Note08--Service && Provider

最新推荐文章于 2024-08-13 15:38:34 发布

David_Hernandez

最新推荐文章于 2024-08-13 15:38:34 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签：指令 Service

本文链接：https://blog.youkuaiyun.com/kisslotus/article/details/54719515

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

1. 目录

这里写图片描述

2. $http
    a. E.g.
        i. HTTPBasic.html

<html ng-app="MyModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="HTTPBasic.js"></script>
    </head>
    <body>
        <div ng-controller="LoadDataCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>
    </body>
</html>

        ii. HTTPBasic.js

var myModule=angular.module("MyModule",[]);
myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){
    $http({
        method: 'GET',
        url: 'data.json'
    }).success(function(data, status, headers, config) {
        console.log("success...");
        console.log(data);
        $scope.users=data;
    }).error(function(data, status, headers, config) {
        console.log("error...");
    });
}]);

3. Service

这里写图片描述

    a. E.g.
        i. MyService1.html

<html ng-app="MyServiceApp">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyService1.js"></script>
</head>

<body>
    <div ng-controller="ServiceController">
        <label>用户名</label>
        <input type="text" ng-model="username" placeholder="请输入用户名" />
        <pre ng-show="username">{{users}}</pre>
    </div>
</body>

</html>

        ii. MyService1.js

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);

myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {
            if (newUserName) {
                if (timeout) {
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);
            }
        });
    }
]);

//...

        iii. $scope.$watch：监控一个数据模型的变化
        iv. 自己定义的Service
            1) 不要以$开头
            2) 必须放在放在最后一个，前面必须先放置AngularJS的内置服务
            3) 自定义的Service也存在依赖注入
4. Service、Provider、Factory三者之间的关系

这里写图片描述