《AngularJs實戰》學習筆記(慕課網)

時間  2019-12-11
標籤 AngularJs實戰 學習 筆記 欄目 AngularJS 简体版
原文   原文鏈接

1. Controller使用過程當中的注意點javascript

  1. 不要試圖去複用Controller, 一個控制器通常只負責一小塊視圖
  2. 不要在Controller中操做DOM, 這不是控制器的職責. 封裝在指令裏. 
  3. 不要在Controller中作數據格式化, ng有很好用的表單控件
  4. 不要在Controller裏面作數據過濾操做, ng有$filter服務
  5. 通常來講, Controller是不會互相調用的, 控制器之間的交互會經過事件進行  ---> 這是強耦合

2. css

<html ng-app>   <！--這裏ng-app告訴瀏覽器，這裏的html元素是AngularJS應用程序的「全部者」-->
    <div>
        <input ng-model="greeting.text"/>   <!--ng-model把輸入域的值綁定到應用程序變量greeting.text-->
        <p>{{greeting.text}}, Angular</p>   <!-- 雙大括號{{}}是AngularJS表達式:把數據綁定到HTML，與ng-bind指令殊途同歸。-->
　　　　　　　　　　　　　　　　　　　　　　　　　　<!-- AngularJS將在表達式書寫的位置「輸出」數據-->

　　　　　　　　　　　　　　　　　　　　　　　　　　<!--它很像JS表達式，能夠包含文字，運算符和變量-->


    </div>
    ....
    <script src="js/angular-1.3.0.js"></script>
<html>

則p標籤中的值會隨着input裏的輸入進行改變. html

啓動後, 會找ng-app中的指令. 找到ng-model後會生成greeting.text數據模型, 這個模型掛載scope根目錄下, 這樣全部的{{greeting.text}}均可以得到其值前端

 

3. AngularJS四大核心特性java

  • MVC
  • 模塊化和依賴注入
  • 雙向數據綁定
  • 指令

 

 

4. 關於$scopenode

  1. Angularjs的MVC是藉助於$scope實現的：
    1.  做用域也是有層次結構的, 若是在內層做用域中沒有找到值則會向上去找, 相似JS中的原型查找
  2. $scope是一個POJO(Plain Old JavaScript Object)
  3. $scope提供了一些工具方法$watch()/$apply()
  4. $scope是表達式的執行環境(或者叫做用域)
  5. $scope是一個樹形結構, 與DOM標籤平行
  6. 子$scope對象會繼承父$scope上的屬性和方法
  7. 每個Angular應用只有一個根$scope對象(通常位於ng-app上)
  8. $scope能夠傳播事件, 相似DOM事件, 能夠向下也能夠向上
  9. $scope不只是MVC的基礎, 也是後面實現雙向數據綁定的基礎
  10. 能夠用angular.element($0).scope()進行調試
  11. $scope的生命週期: Creation->Watcher registration->Model mutation->Mutation observation->Scope destruction

 5. AngularJS模塊化git

var helloModule=angular.module('HelloAngular',[]);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
    $scope.greeting = {
        text: 'Hello'
    };
}]);

一個完整項目結構angularjs

[目錄]BookStore
|    [目錄]app
|      |  [目錄]css
|      |  [目錄]framework
|      |  [目錄]imgs
|      |  [目錄]js.............................存放js文件
|      |    |  app.js.........................做爲啓動點的js
|      |    |  controllers.js
|      |    |  directives.js
|      |    |  filters.js
|      |    |- services.js
|      |  [目錄]tpls...........................放一些模板,即不完整的html文件片斷
|      |    |  bookList.html
|      |    |- hello.html
|      |- index.html..........................應用的html文件
|    [目錄]node_modules.......................各類基於NodeJS的工具
|      |  [目錄]http-server
|-     |- package.json........................npm配置項
  1. ng-app：定義應用程序的根元素
  2. ng-bind：綁定HTML元素到應用程序數據
  3. ng-bind-html：綁定HTML元素的innerHTML到應用程序數據，並移除HTML字符串中危險字符
  4. ng-bind-template：規定使用膜拜替換的文本內容
  5. ng-blur：規定blur事件的行爲
  6. ng-change：規定在內容改變時要執行的表達式
  7. ng-checked：規定元素是否被選中
  8. ......更多參見  AngularJS指令
  • AngularJS模塊（Module）定義了AngularJS應用
  • AngularJS控制器用於控制AngularJS應用
  • ng-app指令定義了應用，ng-controller定義了控制器

 

6. 使用ngRoute進行視圖之間的路由github

$routeProvider.when('/hello',{　　　　　　　　//$routeProvider提供路由, 當訪問"hello"時會調用hello.html模板, 控制器HelloCtrl控制視圖
    templateUrl: 'tpls/hello.html',
    controller:'HelloCtrl'
}).when('/list',{
    templateUrl:'tpls/bookList.html',
    controller:'BookListCtrl'
}).otherwise({
    redirectTo: '/hello'
})

 

7. ng官方推薦的模塊切分方式:npm

                    app
                     |
    -----------------------------------------------
    |             |            |         |        |
controllers   directives   services   routes   filters
  1. 任何一個ng應用都是由控制器, 指令, 路由, 過濾器等有限的模塊類型構成的
  2. 控制器, 指令, 服務, 路由, 過濾器分別放在一個模塊裏面(可藉助於grunt合併)
  3. 用一個總的app模塊做爲入口點, 它依賴其餘全部模塊 
     1 <!DOCTYPE html>
 2 <html ng-app="bookStore">
 3     <!-- ng-app只有一個,至關於main方法 -->
 4 <head>
 5     <title></title>
           <script>.....</script>
    
 6 </head>
 7 <body>
 8     <div ng-view>
 9         
10     </div>
11 </body>
12 </html>
    　　//controller.js
     1     var bookStoreApp = angular.module('bookStoreApp',[
 2     'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters',
 3     'bookStoreServices','bookStoreDirectives'
 4 ]);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//依賴注入. 模塊之間的依賴的實現. 也能夠加載angularjs自帶的模塊,好比ngAnimate, 記得在html中把script文件引入
 5 
 6 bookStoreApp.config(function($routeProvider){
 7     $routeProvider.when('/hello',{　　　　　　　　
 8         templateUrl: 'tpls/hello.html',
 9         controller:'HelloCtrl'
10     }).when('/list',{
11         templateUrl:'tpls/bookList.html',
12         controller:'BookListCtrl'
13     }).otherwise({
14         redirectTo: '/hello'
15     })
16 });
     1 //directives.js
 2 var bookStoreDirectives = angular.module('bookStoreDirectives', []);
 3 
 4 bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
 5     function($scope){}
 6 ]);
 7 
 8 bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
 9     function($scope){}
10 ]);
     1 //services.js
 2 var bookStoreServices = angular.module('bookStoreServices', []);
 3 
 4 bookStoreServices.service('bookStoreService_1', ['$scope',
 5     function($scope){}
 6 ]);
 7 
 8 bookStoreServices.service('bookStoreService_2', ['$scope',
 9     function($scope){}
10 ]);

     

 8. ng-bind

　　如第2條所示的例子， 使用{{}}綁定數據時，可能會在頁面加載過程當中出現{{greeting.text}}，使得頁面不美觀。 一個解決辦法就是使用ng-bind

 1 <!DOCTYPE html>
 2 <html ng-app>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7     <div ng-controller="HelloAngular">
 8         <p><span ng-bind="greeting.text"></span>,Angular</p>
 9     </div>
10 </body>
11 <script src="js/angular-1.3.0.js"></script>
12 <script src="HelloAngular_MVC.js"></script>
13 </html>

 

　　因此，通常在首頁加載時使用ng-bind。後面的頁面可使用{{}}來綁定

 

9. 雙向綁定場景

  • 　form表單
     1 <!DOCTYPE html>
 2 <html ng-app="userInfoModule">
 3 <!-- ng-app指令定義了一個AngularJS應用程序 -->
 4 
 5 <head>
 6     <meta charset="utf-8">
 7     <link rel="stylesheet" type="text/css" href="css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
 8     <script src="js/angular.js"></script>
 9     <script src="Form.js"></script>
10     <title></title>
11 </head>
12 
13 <body>
14     <div class="panel panel-primary">
15         <div class="panel-heading">
16             <div class="panel-title">雙向數據綁定</div>
17         </div>
18         <div class="panel-body">
19             <div class="row">
20                 <div class="col-md-12">
21                     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
22                         <div class="form-group">
23                             <label class="col-md-2 control-label">
24                                 郵箱：
25                             </label>
26                             <div class="col-md-10">
27                                 <input class="form-control" type="email" placeholder="推薦使用126郵箱" ng-model="userInfo.email"></input>
28                             </div>
29                         </div>
30                         <div class="form-group">
31                             <label class="col-md-2 control-label">
32                                 密碼：
33                             </label>
34                             <div class="col-md-10">
35                                 <input class="form-control" type="password" placeholder="只能是數字、字母、下劃線" ng-model="userInfo.password"></input>
36                             </div>
37                         </div>
38                         <div class="form-group">
39                             <div class="col-md-offset-2 col-md-10">
40                                 <div class="checkbox">
41                                     <label>
42                                         <input type="checkbox" ng-model="userInfo.autoLogin">自動登陸
43                                     </label>
44                                 </div>
45                             </div>
46                         </div>
47                         <div class="form-group">
48                             <div class="col-md-offset-2 col-md-10">
49                                 <button class="btn btn-default" ng-click="getFormData()">獲取表單的值</button>
50                                 <button class="btn btn-default" ng-click="setFormData()">設置表單的值</button>
51                                 <button class="btn btn-default" ng-click="resetFormData()">重置表單</button>
52                             </div>
53                         </div>
54                     </form>
55                 </div>      
56             </div>
57         </div>
58     </div>
59 </body>
60 </html>

     

     1 //這裏等號右側括號裏第一個參數，模塊的名稱就是html中主函數入口「ng-app」的名稱，即AngularJS應用的根元素
 2 //AngularJS模塊定義應用
 3 var userInfoModule=angular.module('userInfoModule',[]);
 4 
 5 //AngularJS控制器控制應用
 6 userInfoModule.controller('UserInfoCtrl',['$scope', function($scope){
 7     $scope.userInfo={
 8         email:"25344528@qq.com",
 9         password:"12312313",
10         autoLogin:true
11     };
12     $scope.getFormData=function(){
13         console.log($scope.userInfo)
14     };
15     $scope.setFormData=function(){
16         $scope.userInfo={
17             email:'damoqiasss@124.sc',
18             password:"ssss",
19             autoLogin:false
20         }
21     };
22     $scope.resetFormData = function(){
23         $scope.userInfo={
24             email: "123456@a.cc",
25             password:"56",
26             autoLogin:true
27         }
28     }
29 }])

     

  • 例子2：修改樣式: 不須要直接操做標籤，而是給類綁定不一樣的值從而使得p標籤取得不一樣的樣式屬性
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <!DOCTYPE html>
 8 <html ng-app="myCSSModule">
 9 <head>
10     <meta charset="utf-8">
11     <link rel="stylesheet" type="text/css" href="color.css">
12     <title></title>
13 </head>
14 
15 <body>
16     <div ng-controller="CSSCtrl">
17         <p class="text-{{color}}">測試CSS樣式</p>
18         <button class="btn btn-default" ng-click="setGreen()">綠色</button>
19         <button class="btn btn-default" ng-click="setRed()">紅色</button>
20     </div> 
21 </body>
22 </html>
23 </body>
24     <script src="js/angular.js"></script>
25     <script src="color.js"></script>
26 </html>
     1 var module = angular.module("myCSSModule",[]);
 2 
 3 module.controller('CSSCtrl',['$scope', function($scope){
 4     $scope.setGreen = function(){
 5         $scope.color="green"
 6     };
 7     $scope.setRed = function(){
 8         $scope.color="red"
 9     }
10 }])
    1 .text-red{
2     color:red;
3 }
4 .text-green{
5     color:green;
6 }

     


    這裏爲了不取不到color值獲得text-null這樣奇怪的東西，可使用ng-class：
     1 <!DOCTYPE html>
 2 <html ng-app="MyCSSModule">
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .error{
 8             background-color: red;
 9         }
10         .warning{
11             background-color: yellow;
12         }
13     </style>
14 </head>
15 <body>
16     <div ng-controller="HeadController">
17         <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
18         <!-- 若是isError是true就使用isError的樣式，若是isWarning是true就使用warning的樣式。error和warning定義在css中 -->
19         <button ng-click="showError()">Simulate Error</button>
20         <button ng-click="showWarning()">Simulate Warning</button>
21     </div>
22 </body>
23 <script type="text/javascript" src="js/angular.js"></script>
24 <script type="text/javascript">
25     var module = angular.module("MyCSSModule",[]);
26 
27     module.controller("HeadController",["$scope",function($scope){
28         $scope.isError = false;
29         $scope.isWarning = false;
30         $scope.showError = function(){
31             $scope.isError = true;
32             $scope.isWarning = false;
33             $scope.messageText = "Error!";
34         };
35         $scope.showWarning = function(){
36             $scope.isError = false;
37             $scope.isWarning = true;
38             $scope.messageText = "Warning!";
39         };
40     }])
41 </script>
42 </html>

 

  • 控制標籤的顯示與隱藏ng-show. 以及ng-hide與之相反
     1 <!DOCTYPE html>
 2 <html ng-app="MyCSSModule">
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .error{
 8             background-color: red;
 9         }
10         .warning{
11             background-color: yellow;
12         }
13     </style>
14 </head>
15 <body>
16     <div ng-controller="HeadController">
17         <button ng-click="toggleMenu()">Toggle Menu</button>
18         <ul ng-show="menuState.show">
19         <!-- 使用menuState.show這個模型的值控制下面的li是否顯示 -->
20             <li ng-click='stun()'>Stun</li>
21             <li ng-click='disintegrate()'>Disintegrate</li>
22             <li ng-click='erase()'>Erase from history</li>
23         </ul>
24     </div>
25 </body>
26 <script type="text/javascript" src="js/angular.js"></script>
27 <script type="text/javascript">
28     var module = angular.module("MyCSSModule",[]);
29 
30     module.controller("HeadController",["$scope",function($scope){
31         $scope.menuState={show:false};
32         $scope.toggleMenu = function(){
33             $scope.menuState.show = !$scope.menuState.show;
34         };
35     }])
36 </script>
37 </html>

     

  • 以及ngAnimate實現頁面切換動畫等

 10. 前端路由

  1. 使用前端路由的緣由：
    1. AJax請求不會留下History記錄
    2. 用戶沒法直接經過URL進入應用中的指定頁面（保存書籤、連接分享給朋友）
    3. Ajax對SEO是個災難
  2. 路由的例子：
    // 要導入angular-route.js
     1 var bookStoreApp = angular.module('bookStoreApp',[
 2     'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters', 3 'bookStoreServices','bookStoreDirectives' 4 ]);　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//依賴注入. 模塊之間的依賴的實現. 也能夠加載angularjs自帶的模塊,好比ngAnimate, 記得在html中把script文件引入 5 6 bookStoreApp.config(function($routeProvider){ 7 $routeProvider.when('/hello',{　　　　　　　　 8 templateUrl: 'tpls/hello.html', 9 controller:'HelloCtrl' 10 }).when('/list',{ 11 templateUrl:'tpls/bookList.html', 12 controller:'BookListCtrl' 13  }).otherwise({ 14 redirectTo: '/hello' 15  }) 16 });
     

     這個AngularJS提供的路由機制不能實現路由的深層次嵌套。 能夠從github上下載angular-ui-router

    <!-- tpl3/index.html -->
<div class="container">
    <div ui-view="topbar"></div>
    <div ui-view="main"></div>
</div>
    var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/index');
    $stateProvider
        .state('index',{
            url: '/index',
            views: {
                '': {
                    templateUrl:'tpls3/index.html'
                },
                'topbar@index' : {
                    templateUrl: 'tpl3/topbar.html'
                },
                'main@index': {
                    templateUrl: 'tpl3/home.html'
                }
            }
        })
        .state('index.usermng'),{
            url: '/usermng',
            views: {
                'main@index': {
                    templateUrl: 'tpls3/usermng.html',
                    controller: function($scope, $state){
                        $scope.addUserType = function(){
                            $state.go("index.usermng.addusertype");
                        }
                    }
                }
            }
        }
})
  3. 前端路由的基本原理

    1. 哈希#
    2. HTML5中新的history API
    3. 路由的核心是給應用定義「狀態」
    4. 使用路由機制會影響到應用的總體編碼方式（須要預先定義好狀態）
    5. 考慮兼容性問題與「優雅降級」

　　　　

11. 指令

  1. 自定義指令hello：
    1 // HelloAngular_Directive.js
2 var myModule = angular.module("MyModule",[]);
3 myModule.directive("hello", function(){
4     return {
5         restrict: 'AEMC',       //四個字母分別表示：屬性，元素，註釋，類
6         template: '<div>Hi everyone!</div>',
7         replace: true
8     }
9 });

    使用hello指令的4種方法：

    <!DOCTYPE html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <!-- 法1：使用元素 -->
        <hello></hello>

        <!-- 法2：使用 -->
        <div hello></div>

        <!-- 法3:使用樣式類 -->
        <div class="hello"></div>

        <!-- 法4 -->
        <!-- directive:hello -->
        <div></div>
    </body>
    <script type="text/javascript" src="../test01/js/angular.js"></script>
    <script type="text/javascript" src="HelloAngular_Directive.js"></script>
</html>
  2. restrict---匹配模式
    1. 默認使用「A」 屬性的方式：　　<div my-menu=Products></div>
      還有E-元素:   <my-menu title=Products></my-menu>
      C-樣式類：    <div class=my-menu:Products></div>
      M-註釋：      <!-- directive: my-menu Products -->
    2. 推薦使用元素和屬性的方式使用指令
    3. 當須要建立帶有本身的模板的指令時，使用元素名稱的方式建立指令
    4. 當須要爲已有的HTML標籤增長功能時，使用屬性的方式建立指令
  3. template--模板
    1. template
    2. templateURl
    3. templateCache
      ....myModule.directive("hello".......
       .....
       template: $templateCache.get("hello.html"),
       ....
  4. replace: 元素內部寫的內容是否會被替換
  5. transclude
    template: "<div>Hello everyone!<div ng-transclude></div></div>
//元素內部的內容替換到ng-transclude裏面去
  6. 指令執行的三個階段 & compile和link：
    1. 加載階段：
      1. 加載angular.js，找到ng-app指令，肯定應用的邊界
    2. 編譯階段
      1. 遍歷DOM，找到全部指令；
      2. 根據指令代碼中的template、replace、transclue轉換DOM結構
      3. 若是存在compile函數則調用
    3. 連接階段
      1. 對每一條指令運行link函數
      2. link函數通常用來操做DOM，綁定事件監聽器
    4. 關於compile和link：
      1. compile函數用來對模板自身進行轉換， 而link函數負責在模型和視圖之間進行動態關聯；
      2. 做用域在連接階段纔會被綁定到編譯以後的link函數上
      3. compile函數僅僅在編譯階段運行一次，而對於指令的每一個實例，link函數都會執行一次
      4. compile能夠返回preLink和postLink函數，而link函數只會返回postLink函數
      5. 若是須要修改DOM結構，應該在postLink中來作這件事情，而若是在preLink中作這件事情會致使錯誤
      6. 大多數時候咱們只要編寫link函數便可
  7. 使用directive和Controller綁定DOM事件
     1 <!-- Directive&Controller.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7 </head>
 8 <body>
 9     <div ng-controller="MyCtrl">
10         <loader>滑動加載</loader>
11     </div>
12 </body>
13 <script type="text/javascript" src="../test01/js/angular.js"></script>
14 <script type="text/javascript" src="Directive&Controller.js"></script>
15 </html>
    //Directive&Controller.js
var myModule = angular.module("MyModule",[]);

myModule.controller('MyCtrl',['$scope', function($scope){
    $scope.loadData = function(){
        console.log("加載數據中....");
    }
}]);

myModule.directive("loader", function(){
    return {
        restrict: 'AE',    
        link:function(scope,element,attr){
            element.bind("mouseenter",function(){
                scope.loadData();
                //或者用下面的方法
                scope.$apply('loadData()');
            })
        }
    };
});
    若是要在不一樣的控制器中使用指令調用不一樣的函數，則能夠在自定義的元素中定義不一樣的屬性來規定調用的方法，好比：
     1 <!-- Directive&Controller.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7 </head>
 8 <body>
 9     <div ng-controller="MyCtrl1">
10         <loader howToLoad="loadData1()">滑動加載</loader>
11     </div>
12     <div ng-controller="MyCtrl2">
13         <loader howToLoad="loadData2()">滑動加載</loader>
14     </div>
15 </body>
16 <script type="text/javascript" src="../test01/js/angular.js"></script>
17 <script type="text/javascript" src="Directive&Controller.js"></script>
18 </html>
    //Directive&Controller.js
var myModule = angular.module("MyModule",[]);

myModule.controller('MyCtrl1',['$scope', function($scope){
    $scope.loadData1 = function(){
        console.log("加載數據中....111");
    }
}]);

myModule.controller('MyCtrl2',['$scope', function($scope){
    $scope.loadData2 = function(){
        console.log("加載數據中....222");
    }
}]);

myModule.directive("loader", function(){
    return {
        restrict: 'AE',    
        link:function(scope,element,attr){
            element.bind("mouseenter",function(){
                scope.$apply(attr.howtoload);       //注意在定義屬性中用的的howToLoad的駝峯命名法，在js裏只要用小寫就可
            })
        }
    };
});
  8. Directive&Directive
    <!-- Directive&Directive.html -->
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="..\test01\css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
</head>
<body>
    <div class="row">
        <div class="col-md-3">
            <superman strength>動感超人----力量</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed>動感超人2----力量+敏捷</superman>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <superman strength speed light>動感超人3----力量+敏捷+發光</superman>
        </div>
    </div>
</body>
<script type="text/javascript" src="../test01/js/angular.js"></script>
<script type="text/javascript" src="Directive&Directive.js"></script>
</html>
    //Directive&Directive.js
var myModule = angular.module("MyModule",[]);
myModule.directive("superman", function(){
    return {
        scope: {},
        restrict: 'AE',
        //指令內部的controller，目的是給指令暴露出public方法給指令外部調用的
        controller: function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
                $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
                $scope.abilities.push("speed");
            };
            this.addLight = function(){
                $scope.abilities.push("light");
            };
        },
        //若是想定義暴露出的public方法給指令外部調用就使用controller
        //而link是用於處理指令內部的一些事物，好比給元素綁定事件，改變屬性等
        link: function(scope,element,attrs){
            element.addClass('btn btn-primary');
            element.bind('mouseenter',function(){
                console.log(scope.abilities);
            });
        }
    }
});
myModule.directive("strength", function(){
    return {
        //require意思是strength指令是依賴superman指令的。link就能夠寫第四個參數，則link中就能夠直接調用supermanCtrl中暴露出來的方法了
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl){
            supermanCtrl.addStrength();
        }
    }
});

myModule.directive("speed", function(){
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl){
            supermanCtrl.addSpeed();
        }
    }
});

myModule.directive("light", function(){
    return {
        require: '^superman',
        link: function(scope, element, attrs, supermanCtrl){
            supermanCtrl.addLight();
        }
    }
});
  9. 獨立scope
     1 <!-- IsolateScope.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7     <link rel="stylesheet" type="text/css" href="..\test01\css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
 8 </head>
 9 <body>
10     <hello></hello>
11     <hello></hello>
12     <hello></hello>
13     <hello></hello>
14 </body>
15 <script type="text/javascript" src="../test01/js/angular.js"></script>
16 <script type="text/javascript" src="IsolateScope.js"></script>
17 </html>
    //IsolateScope.js
var myModule = angular.module("MyModule",[]);
myModule.directive("hello", function(){
    return {
        restrict: 'AE',
        scope: {},      //若是不加這個配置項，一個改變其餘都會改變
        template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
        replace: true
    }
});
    scope的綁定策略
    1. @： 把當前屬性做爲字符串傳遞。 你還能夠綁定來自外層scope的值，在屬性值中插入{{}}便可
       1 <!-- ScopeAt.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7     <link rel="stylesheet" type="text/css" href="..\test01\css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
 8 </head>
 9 <body>
10     <div ng-controller="MyCtrl">
11         <drink flavor="{{ctrlFlavor}}"></drink>
12     </div>
13 </body>
14 <script type="text/javascript" src="../test01/js/angular.js"></script>
15 <script type="text/javascript">
16     var myModule = angular.module("MyModule",[]);
17     myModule.controller('MyCtrl', ['$scope', function($scope){
18         $scope.ctrlFlavor = "百威";
19     }])
20     // myModule.directive("drink", function(){
21     //     return {
22     //         restrict: 'AE',
23     //         template:"<div>{{flavor}}</div>",
24     //         link: function(scope, element, attrs){
25     //             scope.flavor = attrs.flavor;
26     //         }
27     //     }
28     // })
29     //以上能夠直接寫做：
30     myModule.directive("drink", function(){
31         return {
32             restrict:'AE',
33             scope: {
34                 flavor: '@'
35             },
36             template: "<div>{{flavor}}</div>"
37         }
38     })
39 </script>
40 </html>
    2. =： 與父scope中的屬性進行雙向綁定
       1 <!-- ScopeEqual.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7     <link rel="stylesheet" type="text/css" href="..\test01\css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
 8 </head>
 9 <body>
10     <div ng-controller="MyCtrl">
11         Ctrl:
12         <br>
13         <input type="text" ng-model="ctrlFlavor">
14         <br>
15         Directive:
16         <br>
17         <drink flavor="ctrlFlavor"></drink>
18     </div>
19 </body>
20 <script type="text/javascript" src="../test01/js/angular.js"></script>
21 <script type="text/javascript">
22     var myModule = angular.module("MyModule",[]);
23     myModule.controller('MyCtrl', ['$scope', function($scope){
24         $scope.ctrlFlavor = "百威";
25     }])
26     myModule.directive("drink", function(){
27         return {
28             restrict:'AE',
29             scope: {
30                 flavor: '='
31             },
32             template: '<input type="text" ng-model="flavor"/>'
33         }
34     })
35 </script>
36 </html>
    3. &： 傳遞一個來自父scope的函數，稍後調用

       1 <!-- ScopeAnd.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="MyModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <title></title>
 7     <link rel="stylesheet" type="text/css" href="..\test01\css\bootstrap-3.3.0-dist\dist\css\bootstrap.css">
 8 </head>
 9 <body>
10     <div ng-controller="MyCtrl">
11         <greeting greet="sayHello(name)"></greeting>
12         <greeting greet="sayHello(name)"></greeting>
13         <greeting greet="sayHello(name)"></greeting>
14     </div>
15 </body>
16 <script type="text/javascript" src="../test01/js/angular.js"></script>
17 <script type="text/javascript">
18     var myModule = angular.module("MyModule",[]);
19     myModule.controller('MyCtrl', ['$scope', function($scope){
20         $scope.sayHello = function(name){
21             alert("Hello "+name);
22         }
23     }])
24     myModule.directive("greeting", function(){
25         return {
26             restrict:'AE',
27             scope: {
28                 greet: '&'
29             },
30             template: '<input type="text" ng-model="userName"/><br/>' +
31                       '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br>'
32         }
33     })
34 </script>
35 </html>
  10. form指令
    1. HTML原生的form表單是不能嵌套的，而Angular封裝以後的form能夠嵌套
    2. Angular爲form擴展了自動校驗、防止重複提交等功能；
    3. Angular對input元素的type進行了校驗，一共提供瞭如下10種類型：
      text, number, url, email, radio, checkbox, hidden, button, submit, reset
    4. Angular爲表單內置了4種CSS樣式：
      ng-valid, ng-invaid, ng-pristine, ng-dirty 

    5. 內置校驗器：

      require, minlength, maxlength
       1 <!-- FormBasic.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="TestFormModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="../test01/js/angular.js"></script>
 7 </head>
 8 <body>
 9     <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
10         <input type="text" name="userName" ng-model="user.userName" required/>
11         <input type="password" name="password" ng-model="user.password" required/>
12         <input type="submit" ng-disabled="myForm.$invalid" />
13     </form>
14 </body>
15 <script type="text/javascript">
16     var myModule = angular.module("TestFormModule",[]);
17     myModule.controller("TestFormModule", function($scope){
18         $scope.user={
19             userName:'xxxxx',
20             password:''
21         };
22         $scope.save=function(){
23             alert("save!");
24         }
25     })
26 </script>
27 </html>
  11. 自定義指令
     1 <!-- Expander.html -->
 2 <!DOCTYPE html>
 3 <html ng-app="expanderModule">
 4 <head>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="../test01/js/angular.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="SomeController">
10         <expander class="expander" expander-title='title'>
11             {{text}}
12         </expander>
13     </div>
14 </body>
15 <script type="text/javascript">
16     var myModule = angular.module("expanderModule",[]);
17     myModule.directive("expander", function(){
18         return {
19             restrict: 'EA',
20             replace: true,
21             transclude: true,
22             scope: {
23                 title : '=expanderTitle'
24             },
25             template: '<div>'
26                     + '<div class="title" ng-click="toggle()">{{title}}</div>'
27                     + '<div class="body" ng-show="showMe" ng-transclude></div>'
28                     + '</div>',
29             link: function(scope, element, attrs){
30                 scope.showMe = false;
31                 scope.toggle = function(){
32                     scope.showMe = !scope.showMe;
33                 }
34             }
35         }
36     });
37     myModule.controller('SomeController', function($scope){
38         $scope.title = '點擊展開';
39         $scope.text = '這裏是內部的內容';
40     });
41 </script>
42 </html>
  12. 第三方指令庫：angular-ui

　　

12. Service和Provider：

  1. 使用$http服務
    <!-- HTTPbasic.html -->
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../test01/js/angular.js"></script>
</head>
<body>
    <div ng-controller="LoadDataCtrl">
        <ul>
            <li ng-repeat="user in users">
                {{user.name}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    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);
            $scope.users=data;
        }).error(function(data, status, headers, config) {
            console.log("error...");
        });
        //這裏會報錯：$http(...).success is not a function。好像如今得用$http().then()function了？
    }]);
</script>
</html>
  2. 建立本身的Service
  3. Service的特性
    1. Service都是單例的
    2. Service由$injector負責實例化
    3. Service在整個應用的生命週期中存在，能夠用來共享數據
    4. 在須要使用的地方利用依賴注入機制注入Service
    5. 自定義的Service須要寫在內置的Service後面
    6. 內置Service的命名以$符號開頭，自定義Service應該避免
  4. Service，Factory，Provider本質上都是Provider
    function provider(name, provider_){
    if(isFunction(provider_)){
        provider_ = providerInjector.instantiate(provider_);
    }
    if(!provider_.$get){
        throw Error('provider '+name+' must define $get factory...');
    }
    return providerCache[name + providerSuffix] = provider_;
}
    Provider模式是「策略模式」+「抽象工廠模式」的混合體
  5. 使用$filter服務
    1. $filter是用來進行數據格式化的專用服務
    2. AngularJS內置了9個filter：
      currency（格式化貨幣）,data（日期）,filter,json,limitTo,lowercase,number,orderBy,uppercase
    3. filter能夠嵌套使用（用管道符號|分隔）
    4. filter是能夠傳遞參數的
    5. 用戶能夠定義本身的filter
       1 <!DOCTYPE html>
 2 <html ng-app="MyModule">
 3 <head>
 4     <meta charset="utf-8">
 5     <script type="text/javascript" src="../test01/js/angular.js"></script>
 6 </head>
 7 <body>
 8     {{ 1304375948024 | date}}
 9     <br>
10     {{ 1304375948024 | date:"MM/dd/yy @ h:mma"}}
11     <br>
12     {{ 1304375948024 | date:"yyyy-MM-dd hh:mm::ss"}}
13 </body>
14 <script type="text/javascript">
15     var myModule = angular.module("MyModule",[]);
16 </script>
17 </html>
  6. 其餘內置的Service介紹

 13. 核心原理解析

  1. AngularJS的啓動過程分析
  2. 依賴注入原理分析：Provider與Injector
  3. 指令的執行過程分析
  4. $scope與雙向數據綁定分析
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程