Angularjs里面跨作用域的實戰！

本文轉載自查看原文 2015-08-30 16:14 1901 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();
});

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 剖析AngularJS作用域 AngularJs之Scope作用域【AngularJS】—— 12 獨立作用域理解AngularJS的作用域Scope AngularJS筆記---作用域和控制器作用域，作用域鏈作用域與作用域鏈 JavaScript作用域詞法作用域 Bean的作用域