自强不息，厚德载物！身心自在，道法自然！


Angularjs里面跨作用域的实战！

好久没有来写博客了，最近一直在用Google的AngularJS,后面我自己简称AngularJS就叫AJ吧！

      学习AngularJS一路也是深坑颇多啊--!就不多说了，不过还是建议大家有时间去学下下，果真很强大！再次我就不说入门的东西了，博客上有前辈们也是介绍了不少！我这里就给大家带来点新鲜的并且是实用的，几乎你只要用AJ开发前段的话，你都会碰到！

      话不多说，直接来进入主题！先来看看AJ里面provider、factory、service的区别

      $scope、$http、$window等都是AJ提供的内置服务，如果我们要定义自己的服务，我们就可以通过关键字provider、factory、service来创建服务。这三个有什么区别吗？我推荐个博客大家去看看，个人觉得写的非常的好！(地址：http://hellobug.github.io/blog/angularjs-providers/)。

     简单的说下它三个的区别吧！

    provider使用的时候必须要实现$get方法，每次执行provider的时候，就是$get执行后的结果
    factory定义的时候，第二个参数就可以看成provider里的$get
    service定义的时候，第二个参数会被new一下

    然后在说下这三个的有点吧！(别人的总结~~)

    1. 为应用提供通用的服务，形式可以是常量或对象
    2. 便于模块化
    3. 便于单元测试

   然后我开始都说了，我要给大家来演示的是一个开发的时候会经常碰到的问题，而且好多人到这里就会犯晕(◎﹏◎)！下面我就直接代码了，废话将会很少，就从这边介绍的最简单的开始！

   Provider来完成一个属于你的服务组件

   来看一个界面

  

  来看界面代码：

 

    对应的JS:

   

    提升下例子：

    Factory可以通过提供服务的形式为我们在使用AngularJS时候提供常量或者是对象

    先来看界面：

  

  再来看界面代码：

 

  在来看看JS：

  

  哎！这个不太实用对吧！确实我也觉得用处这个不是很多！那就再来提升下例子，这次提升就会很实用了,注意看本篇的主题跨作用域获取数据！

  Factory+$rootScope跨作用域传递数据

  先来看界面：

 

这种场景在应用中是不是很多了，很多人说我直接用$rootScope就能直接做到，是的的确是能做到，但是为了优雅或者处于$rootScope的弊端，我采用Factory+$rootScope来完成这个操作！来界面代码:

 

  再来看看JS：

 

 过于详细的用法或者不解的地方，可以一起来探讨，由于还有一个例子也是一个拓展但是非常简单就不在演示了，后面直接贴上代码！希望本篇文章对AJ入门或者采用不久的朋友们有所帮助，我的实例都会从经常用的研发角度出发，大家共同努力，一起脱AJ的坑！o(^▽^)o，最后分享出实例的DOM和JS:

 1 <html lang="en" ng-app="myapp">
 2 <head>
 3     <meta charset="UTF-8">
 4     <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css"/>
 5     <link rel="stylesheet" href="assets/style.css"/>
 6 
 7     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
 8     <meta name="viewport" content="initial-scale=1" />
 9 </head>
10 <body layout="column" ng-controller="AppCtrl">
11     <h3>Angular JS</h3>
12     <h4 style="color: #660000">Provider可以自定义组件来满足你在用AngularJS时候需要的组件</h4>
13     <label>{{name}}</label>
14     <h4 style="color: #008800">Factory可以通过提供服务的形式为我们在使用AngularJS时候提供常量或者是对象</h4>
15     <div ng-controller="fact1Ctrl">
16         <input type="text" style="width:350px;" ng-model="fact1name">
17     </div>
18     <div ng-controller="fact2Ctrl">
19         <input type="text" style="width:350px;" ng-model="fact2name">
20     </div>
21     <h4 style="color: #880000">因为AngularJS的最大亮点就是双向绑定,作为程序员的话经常会有这样的一种场景！比如说现在的页面分为左右布局两个部分(在AngularJS里面可能就是两个或者多个Controller,对应的DOM可能也就是多个ng-controller的作用域)，左边是设置参数，右边是数据展示，<br/>
22         我们希望在左边设置参数后点击按钮然后右边的数据自动的完成绑定，在AngularJS这个时候怎么办呢！这个时候就可以使用Factory+$rootScope在帮助我们完成！下面试验一个很简单的例子！</h4>
23     <div ng-controller="ControllerZero">
24         <input ng-model="message" >
25         <br>
26         <input ng-model="password">
27         <button ng-click="handleClick(message,password);">给我传到ControllerOne里面去</button>
28     </div>
29     <div ng-controller="ControllerOne">
30         <input ng-model="message" style="width: 350px;" >
31         <br>
32         <input ng-model="password" style="width: 350px;" >
33     </div>
34     <h4 style="color: #0000f1">还有一种在开发的时候可能会经常的用法，就是在Factory里面定义自己个性化的函数，来供自己在想用的地方直接来用，下面再试验一个！</h4>
35     <div ng-controller="userCtrl">
36         <ul ng-repeat="user in users">
37             <li>{{user}}</li>
38         </ul>
39         <div ng-controller="FristCtrl">
40             First user: {{firstUser}}
41         </div>
42         <div ng-controller="LastCtrl">
43             Last user: {{lastUser}}
44         </div>
45     </div>
46     <!-- Angular Material Dependencies -->
47     <script src="./bower_components/angular/angular.js"></script>
48     <script src="./bower_components/angular-animate/angular-animate.js"></script>
49     <script src="./bower_components/angular-aria/angular-aria.js"></script>
50     <script src="./bower_components/angular-route/angular-route.js"></script>
51     <script type="text/javascript" src="./bower_components/angular-material/angular-material.js"></script>
52     <script src="./src/myapp.js"></script>
53 </body>
54 </html>

JS：

/**
 * Created by 辉太 on 2015/8/28.
 */
var app = angular.module('myapp',[]);


//自定义provider
app.provider('nickname',function($filterProvider){
     this.n_name="Hello";
     this.$get=function()
     {
         return this.n_name+"Huitai";
     };
});
//调用自定义的provider
app.controller('AppCtrl',function($scope,nickname){
    $scope.name=nickname;
});
//定义Factory
app.factory('facname',function(){
    return{
        title:"This Huitai is from the factory"
    };
});
//调用自己定义的Factory
app.controller('fact1Ctrl',function($scope,facname){
    $scope.fact1name = facname.title;
});
app.controller('fact2Ctrl',function($scope,facname){
    $scope.fact2name = facname.title;
});
//跨作用域获取数据
app.factory('myService',function($rootScope){
    var myService = {};
    myService.message='';
    myService.password='';
    myService.prepForBroadcast = function(msg,pwd){
        this.message = msg;
        this.password = pwd;
        this.broadcastItem();
    };
    myService.broadcastItem = function(){
        $rootScope.$broadcast('handleBroadcast');
    };
    return myService;
});
function ControllerZero($scope,myService)
{
    $scope.handleClick = function(msg,pwd){
        myService.prepForBroadcast(msg,pwd);
    };
    $scope.$on('handleBroadcast',function(){
        $scope.message = myService.message;
        $scope.password = myService.password;
    });
}

function ControllerOne($scope,myService){
    $scope.$on('handleBroadcast',function(){
        $scope.message = '从zero到one的数据：'+ myService.message;
        $scope.password ='从zero到one的数据2：' + myService.password;
    });
}
ControllerZero.$inject = ['$scope','myService'];
ControllerOne.$inject = ['$scope','myService'];

app.controller('ControllerZero',ControllerZero);
app.controller('ControllerOne',ControllerOne);


app.factory("UserService",function(){
    var users = ['huitai','nickyu','tianyu','shaokai'];
    return {
        all: function() {
            return users;
        },
        first: function() {
            return users[0];
        },
        last: function(){
            //这里本该判断取数组的最后一位，我偷个懒，各位写的时候千万别学习
            return users[3];
        }
    };
});

app.controller("userCtrl", function($scope, UserService) {
    $scope.users = UserService.all();
});

app.controller("FristCtrl", function($scope, UserService) {
    $scope.firstUser = UserService.first();
});

app.controller("LastCtrl", function($scope, UserService) {
    $scope.lastUser = UserService.last();
});

 

posted @ 2015-08-30 16:14  辉太  阅读(2260)  评论(0)  编辑  收藏  举报

路漫漫其修远兮，吾将上下而求索！