AngularJS服务入门案例简介

最新推荐文章于 2020-02-22 10:10:09 发布

xyphf_和派孔明

最新推荐文章于 2020-02-22 10:10:09 发布

阅读量569

点赞数

分类专栏：数据处理 angular.js入门文章标签： angularjs angular服务

本文链接：https://blog.csdn.net/xyphf/article/details/53126667

版权

数据处理同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

angular.js入门

34 篇文章 1 订阅

订阅专栏

angularJS服务内容简介：

一、使用$http服务
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>

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);//到控制台查看data的数据形式
        $scope.users=data;//将data对象赋给users
    }).error(function(data, status, headers, config) {//请求失败的回调
        console.log("error...");
    });
}]);

data.json数据文件

[{
    "name": "《和派孔明JavaScript入门精选》"
},{
    "name": "《大话Jquery》"
},{
    "name": "《AngularJS入门案例解析》"
}]

服务情况下打开
我们将控制台打开，看一下console.log出来的对象

二、创建自己的Service
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>

MyService1.js

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',//将userListService抽成一个服务
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'//返回用户列表
            });
        }
        return { //返回用户列表
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);

//用controller调用我们写的服务
myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {//$scope.$watch监控数据模型的变化，此时我们监听'username',当它发生变化的时候,调用后门的函数
            if (newUserName) {
                if (timeout) {//在函数里面检测是不是拿到了新的newUserName
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)//如果拿到了,就向后台去拿一个新的请求,调用我们之前封装userListService服务
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);//防抖动处理,这里并不是每按下一个键,就像向后台请求一次数据,这样的话会非常的抖动,这里的处理是当你输入后不再输入350毫秒后向后台请求一次数据
            }
        });
    }
]);

//其他控制器...

users.json数据

《和派孔明JavaScript入门精选》
《大话Jquery》
《AngularJS入门案例解析》

当你输入的时候，向后台发起请求自定义服务

三、Service的特性介绍
1.Service都是单例的

2.Service由$injector负责实例化

3.Service在整个应用的生命周期中存在，可以用来共享数据

在需要使用的地方利用依赖注入机制注入Service

自定义的Service需要写在内置的Service后门

内置Service的命名以$符合开头，自定义Service应该避免

Angularjs 中的 provider, factory 和 service的区别

Service、Factory、Provider本质上都是Provider

四、$filter介绍
$filter是用来进行数据格式化的专用服务
AngularJS内置了9个filter：
currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase
filter可以嵌套使用(用管道符合|分离)
filter是可以传递参数的
用户可以定义自己的filter

日期格式化
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="Filter.js"></script>
    </head>
    <body>
        {{ 1304375948024 | date }}
        <br>
        {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
        <br>
        {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
        <br>
    </body>
</html>

Filter.js

var myModule=angular.module("MyModule",[]);

自定义过滤器
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="MyFilter.js"></script>
</head>
<body>
    {{'和派孔明'|filter1 }}
</body>
</html>

MyFilter.js

var myModule=angular.module("MyModule",[]);
myModule.filter('filter1',function(){
    return function(item){
        return item + 'o(∩_∩)o';
    }
});