Angularjs里面跨作用域的实战！-白红宇

Angularjs里面跨作用域的实战！

阅读量：4624 次

发布时间：2019-06-09

本文共 4756 字，大约阅读时间需要 15 分钟。

好久没有来写博客了，最近一直在用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  2  3     
      4     
      5     
      6  7     
      8     
      9 10 11     Angular JS
12     Provider可以自定义组件来满足你在用AngularJS时候需要的组件
13     {
   {name}}14     Factory可以通过提供服务的形式为我们在使用AngularJS时候提供常量或者是对象
15     
     
      16         
      17     
     
18     
     
      19         
      20     
     
21     因为AngularJS的最大亮点就是双向绑定,作为程序员的话经常会有这样的一种场景！比如说现在的页面分为左右布局两个部分(在AngularJS里面可能就是两个或者多个Controller,对应的DOM可能也就是多个ng-controller的作用域)，左边是设置参数，右边是数据展示，
22         我们希望在左边设置参数后点击按钮然后右边的数据自动的完成绑定，在AngularJS这个时候怎么办呢！这个时候就可以使用Factory+$rootScope在帮助我们完成！下面试验一个很简单的例子！
23     
     
      24         
      25         
      
26         
      27         
      28     
     
29     
     
      30         
      31         
      
32         
      33     
     
34     还有一种在开发的时候可能会经常的用法，就是在Factory里面定义自己个性化的函数，来供自己在想用的地方直接来用，下面再试验一个！
35     
     
      36         
      
       37             
       {
   {user}}
38         
      
39         
      
       40             First user: {
    {firstUser}}41         
      
42         
      
       43             Last user: {
    {lastUser}}44         
      
45     
     
46     
     47     48     49     50     51     52     53 54

JS：

/** * Created by 辉太 on 2015/8/28. */var app = angular.module('myapp',[]);//自定义providerapp.provider('nickname',function($filterProvider){     this.n_name="Hello";     this.$get=function()     {         return this.n_name+"Huitai";     };});//调用自定义的providerapp.controller('AppCtrl',function($scope,nickname){    $scope.name=nickname;});//定义Factoryapp.factory('facname',function(){    return{        title:"This Huitai is from the factory"    };});//调用自己定义的Factoryapp.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();});

转载于:https://www.cnblogs.com/HuiTai/p/Angularjs.html

你可能感兴趣的文章