当前位置:首页 > 教程 > Web前端 > 前端 > angularjs的service讲解

angularjs的service讲解

AngularJs是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
js
1.首先我们创建一个模块

1
var module = angular.module( "my.new.module", [] );

2.然后写具体的service 可以看到它是一个很有趣的对象 ,以键值对的方式定义属性和值, 值可能是数组,json对象数组,或者函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
appServices.service('Book',['$rootScope',function($rootScope){
 
    var service = {
        books: [
            {title:'bbq',anthor:'李斯'},
            {title:'barbecue',anthor:'loli'}
        ],
        addBook: function(a_book){
            service.books.push(a_book);
            $rootScope.$broadcast( 'books.update' );  
            //这里相当于定义了一个回调函数,任何调用这个图书服务的指令,控制器,过滤器等可以选择实现这个books.update句柄
            来进行addBook后想执行的操作,如更新$scope
        }
    }
 
    return service;
}]);

note:这是通常一个简单的service的写法
$broadcast只能向child controller传递event与data
$emit只能向parent controller传递event与data
$on用于接收event与data

controller之间的层级关系 (controller可以任意嵌套):

1
2
3
4
5
6
7
8
9
10
11
<div class="box row" ng-controller="parentCtrl">
    <div class="col-xs-12">
        <a ng-click="clickMe()" >click me!->i belong parent controller</a>
        <div ng-controller="AChildCtrl">
            <a ng-click="clickMe()" s>click me!->i belong child&&brother controller</a>
        </div>
        <div ng-controller="BChildCtrl">
            <a ng-click="clickMe()" >click me!->i belong child&&brother controller</a>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$broadcast $emit $on 的应用
 
appCtrls.controller('parentCtrl',['$scope',function($scope){
 
     $scope.clickMe = function(){
         var book = { title:'monkey' , author:'lee' }
         $scope.$broadcast('givetochild',book);
     }    
}]);
 
appCtrls.controller('AChildCtrl',['$scope',function($scope){
 
    var book = { title:'fifty shadows' , author:'mcdownload' }
    $scope.$emit = ('givetoparent', book); //向父级传值
}]);
 
appCtrls.controller('BChildCtrl',['$scope',function($scope){
 
    $scope.$on('givetochild',function(event,data){
        console.log(data.title + ' ' + data.author); //输出 mokey 和 lee
        console.log(event);
    });    
}]);

比较奇怪的现象是如果

1
2
3
4
5
appCtrls.controller('parentCtrl',['$scope',function($scope){
 
         var book = { title:'monkey' , author:'lee' }
         $scope.$broadcast('givetochild',book);
}]);

那么总是不会触发$on,得不到任何输出
但是如果,总会正常得到值

1
2
3
4
5
6
appCtrls.controller('parentCtrl',['$scope','$timeout',function($scope,$timeout){
    $timeout(function(){
        var book = { title:'monkey' , author:'lee' }
        $scope.$broadcast('givetochild',book);
    },10);
}]);

service的使用简单代码实例为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
template:
<div class="box row" ng-controller="books.list">
    <div class="col-xs-12">
        <p ng-repeat="book in books">{{book.title}} -- {{book.author}}</p>
        <input type="text" ng-model="book_title" placeholder="请输入书名"><br>
        <input type="text" ng-model="book_author" placeholder="请输入作者"><br>
        <a ng-click="addBook()">添加书籍</a>        
    </div>
</div>
 
controller:
var appCtrls = angular.module('appCtrls',[]);
appCtrls.controller('books.list',['$scope','Book',function($scope,Book){
 
    $scope.books = Book.books;  //取用图书服务
 
    $scope.addBook = function(){
        var a_book = { title:$scope.book_title , author:$scope.book_author }
        Book.addBook(a_book);
    }
 
    $scope.$on('books.update',function(event){
        $scope.books = Book.books;
    });
 
}]);
 
service:
var appServices = angular.module('appCtrls');
appServices.service('Book',['$rootScope',function($rootScope){
 
    var service = {
        books: [
            {title:'bbq',author:'李斯'},
            {title:'barbecue',author:'loli'}
        ],
        addBook: function(a_book){
            service.books.push(a_book);
            $rootScope.$broadcast( 'books.update' );
        }
    }
 
    return service;
}]);

此外,$on还暴露了更多我们可以用到的东西,如果你需要的话
在$on的方法中的event事件参数,其对象的属性和方法如下

1
2
3
4
5
6
7
8
9
10
事件属性                                 目的
event.targetScope                  发出或者传播原始事件的作用域
event.currentScope                 目前正在处理的事件的作用域
event.name                         事件名称
event.stopPropagation()            一个防止事件进一步传播(冒泡/捕获)的函数(这只适用使用`$emit`发出的事件)
 
event.preventDefault()             这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。
                                   直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
 
event.defaultPrevented             如果调用了`preventDefault`则为true

Angular信奉的是,当组建视图(UI)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多,尽管命令式的代码非常适合用来表述业务逻辑。

  • << JavaScript闭包什么鬼
  • iOS的触摸和手势 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/angularjs-service/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。