angular（1.5.8）

時間 2019-11-08

標籤 angular 1.5.8 欄目 AngularJS 简体版

原文原文鏈接

1.MVC基本概念javascript

M：model,模型，數據。html

V：view，視圖，就是如何展現數據。html5

C：controller，控制器，數據與展現的聯繫（鏈接數據與視圖的橋樑），是主要的代碼邏輯區域。java

做用：使代碼分工明確，能夠根據不一樣的分塊進行單獨處理node

ng表明angular jquery

2.angular是什麼？webpack

*：ng是一個處理單頁面應用程序的框架，他擴展了原有的html,使用標籤模板指令等方法去實現動態的單頁面應用程序。web

*：單頁面應用程序：整個頁面站點，不管是什麼頁面內容都是一個html文件，在html文件的內部操做數據的顯示與變化，全部的數據改動再也不使用刷新的方法，而是利用ajax和dom操做在界面上進行調整ajax

*：ng不推薦在代碼中使用DOM操做，所以通常在ng項目中不多使用DOM操做算法

*：ng中徹底遵循MVC思想，將html當作是展現數據的view，而須要在界面中展現的數據就是modle

*：在ng中，凡是一個ng-app就是一個模塊，能夠理解模塊是不少MVC結構的一個集合，模塊中有不少的對象，最典型的就是有不少的控制器，每一個控制器背後都有一個$scope做爲model的載體。

3.框架和庫

庫：是一堆按照功能分類的方法，對象數據的集合，目的就是將用戶開發的代碼簡化方便

框架：框架是一種結構，該結構規定了用戶該如何使用，按照這個結構編寫代碼

模塊：通常將具備一類功能的數據，方法，對象等組合到一塊兒，構成一個模塊

組件：模塊的功能化的結果，能夠獨立完成一個具體邏輯的所有內容的集合

ng-app：ng今後處開始處理，這裏就是view

*：一個頁面中只能出現一個ng-app，若是出現多個的話，後面的都無效。。。

*：若是想要使用多個ng-app，須要使用angular.bootstrap方法

<body>
    <div id="qwert">
        <input type="text" ng-model="inputData"><span>{{ inputData }}</span>
    </div>

    <div id="qqq">
        <input type="text" ng-model="inputData"><span>{{ inputData }}</span>
    </div>
</body>
<script src="./js/angular.js"></script>
<script >
    angular.module( 'mainApp1', [] );

    angular.module( 'mainApp2', [] );

    // bootstrap
    var div1 = document.getElementById( 'qwert' );
    var div2 = document.getElementById( 'qqq' );

    angular.bootstrap( div1, [ 'mainApp1' ] );
    angular.bootstrap( div2, [ 'mainApp2' ] );
</script>

ng-model:數據

*:凡是須要處理的標籤數據，使用ng-model能夠實現數據的雙向綁定

*：雙向數據綁定，就是從界面中到model的變化，可是界面中數據操做發生了變化（用戶的行爲），背後的model中對應的數據一併改變，從背後到界面，凡是背後的model中的數據發生了變化，那麼界面中凡是使用了ng-model、ng-bind插值語法等數據的地方，值也跟着改變

*：若是須要手動的控制數據的變化，就必須首先建立一個模塊，該模塊對應於界面中的ng-app

ng-controller：該屬性會提供一個具體的函數，在函數中處理數據，維護每個具體的功能

5.angular語法

var module= angular.module('ng-app的名字',[])   //建立一個模塊

  module.controller('控制器的名字',function($scope){//全部的操做都應該掛載到模塊中

      //凡是在代碼中出現了ng-model之後，ng都會建立對應的數據模型
      //ng會利用控制器做爲分割，會給每個控制器建立一個對象叫$scope，能夠控制數據
      //在使用的時候，必須使用該名字不能修改

      //在控制器中全部的model數據，實際上都是$scope的屬性,

      $scope.inputData='angular';

})

6.小案例(數據雙向綁定)

 <body ng-app='mainApp'>

     <div ng-controller='mainController'>

            <input type='text' ng-model='abc'>

            <span>{{abc}}</span>

     </div>

</body>

<script>

   angular.module('mainApp',[])

    .controller('mainController',function($scope){

     });

</script>

7.計算器小案例

<body ng-app="app" ng-controller="controller">
    <input type="number" ng-model="num1">
    +
    <input type="number" ng-model="num2">
    =
    <!--<input type="text" ng-model="num1 + num2">-->
    <span>{{ num1 + num2 }}</span>
</body>
<script>
    angular.module( 'app', [] ) 
        .controller( 'controller', function ( $scope ) { 
            $scope.num1 = 0;
            $scope.num2 = 0;
        });
</script>

8.生成可自動排序的表格

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <!-- 建立 表格 -->
        <!-- ng-repeat
            語法
                ng-repeat=" item in 數組 "
            將該 "屬性" 放在標籤中, 那麼這個標籤就會根據 "數組" 中 的數據重複顯示
         -->
         <!--<div ng-repeat="o in [ 1, 2, 3, 4 ]">{{ o }}</div>-->

         <!-- 
             ng-click
             與 onclick 相似, 不一樣的是ng-click 中的函數會默認的綁定在 $scope 中
             語法:
                ng-click=" btn() "
                此時的 btn 是 $scope 的一個屬性
         -->

         <table border="1" width="400">
             <thead>
                 <tr>
                     <!-- 
                        點以前 key 中沒有數據
                        帶你以後 key 中有字符串
                        若是重複點 代表 key 中的數據 與 當前須要賦值的數據值同樣

                     -->
                     <!--<th ng-click="key= key == 'name' ? '-name' : key=='-name' ? 'name' : '-name'">name</th>-->
                     <th ng-click="key='name'">name</th>
                     <th ng-click="key='age'">age</th>
                     <th ng-click="key='gender'">gender</th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="item in data | orderBy: key">
                     <td>{{ item.name }}</td>
                     <td>{{ item.age }}</td>
                     <td>{{ item.gender }}</td>
                 </tr>
             </tbody>
         </table>
    </div>
</body>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', function ( $scope ) {
            $scope.data = [
                { name: 'jim1', age: 29, gender: '女' },
                { name: 'jim2', age: 19, gender: '男' },
                { name: 'jim3', age: 49, gender: '女' },
                { name: 'jim4', age: 39, gender: '男' },
                { name: 'jim5', age: 9, gender: '女' }
            ];

        });
</script>
</html>

9.定義與獲取模塊

*：容許用戶本身定義多個模塊，而後將這個模塊與頁面中的ng-app結合

*：angular.module這個方法還能夠用來火的已經定義的模塊，凡是定義的數據都會存儲在angular這個對象的內部，使用該方法，能夠在內部查詢已經建立好的模塊，若是沒有找到該模塊，那麼報錯，若是找到了該模塊，則返回該模塊，便可以直接用於建立控制器等其餘內容。

*：模塊的獲取不受到閉包的影響

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <input type="text" ng-model="inputData"><br>
        <input type="text" ng-model="inputData"><br>
    </div>
</body>
<script>
    (function () {
        angular.module( 'myApp', [] )   // 定義模塊, 在建文件夾
            .controller( 'mainController', function ( $scope ) {
                $scope.inputData = '哈哈哈哈';
            });
    })();


    (function () {
        angular.module( 'mainApp', [ 'myApp' ]  ); 
        // 主模塊依賴於 'myApp'
        // 因爲定義的全部數據都是 在 angular 上定義的, 所以全部的數據都存儲在 angular
        // 這個對象的 內部, 也就是在內部存儲着
        // 若是提供一個模塊的名字, 那麼在內部就會查找對應的名字, 並實現加載
    })();

</script>

10.項目構建工具

gulp、grunt、webpack

使用yeoman和generator-angular模板搭建ng項目：

1>安裝yo

npm install -g yo

2>安裝模板

npm install -g generator-angular

3>下載模板

11.控制器

在傳統的MVC框架中，控制器是ianxiview和model的橋樑，通常書寫代碼在控制器中，唉控制器中調用使用視圖與數據模型，在ng中弱化了控制器的功能，在MVC思想中的兩個基本問題：

1>數據如何同步（$scope.$applay是實現數據雙向綁定的原理）

2>業務邏輯如何實現

在ng中控制器的功能實際上表現出來的只有模塊功能的管理做用

12.MVVM

由於減小了控制器的做用，可是引入了一個新的對象，這個對象與界面中的數據一一對應，而且支持數據的雙向綁定，這樣的一個對象與model仍是有必定的區別，這個對象成爲viewmodel，基礎視圖的數據模型，所以就弱化了controller的概念，可是強化了viewmodel的功能，所以有人稱ng是mvvm框架。

13.如何讓建立控制器？

語法:

module.controller('控制器的名字',function($scope){

})
//在內部執行的時候，會將第二個參數轉換成數組的形式
//在代碼的運行內部利用參數能夠得到函數體，將其tostring後能夠得到參數列表，再將其拼接成數組

完整寫法:

module.controller('控制器的名字',['$scope',function($scope){

}])

14.依賴注入：

依賴：就是在實現某些功能的時候，須要某些特定的對象

注入：就是須要某個對象的時候做爲參數傳入

依賴注入：在使用某個對象的時候，利用參數參入

除了$scope外，還有$http、$interval、$window、$rootScope...........

小案例：

<body ng-app="mainApp"ng-controller="mainController">
    <input type="text" ng-model="name">
    <input type="button" value="得到電影信息" ng-click="btn()">
    <div>
        <div class="box" ng-repeat="item in list">
            <div>{{item.title}}</div>
            <img ng-src="{{item.images.large}}" alt="">
        </div>

    </div>
</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', function ( $http, $scope ) {
            $scope.btn = function () {
                if ( $scope.name == null ) return;

                var txtSearch = 'https://api.douban.com/v2/movie/search?q=' + $scope.name;

                console.log( 'start' );

                $http.get( txtSearch )
                    .success( function ( data ) {
                        // 在利用 get 請求數據的時候, 若是成功了, 就會調用該方法
                        // 得到的數據在參數中
                        // console.log( data );
                        $scope.list = data.subjects;
                    });

            }
        });

</script>

15.依賴注入的本質：

1>ng在運行的時候，給在內部建立不少對象

2>這些對象都是私有的

// 爲何依賴注入的時候, 須要傳入是是一個字符串的名字?
// 傳入的是一個名字, 那麼在算法的內部
// 就會經過這個名字, 找到內部建立的對象
// 在函數調用的時候( 控制器 ), 將這個同名的內部建立的對象傳入函數

// 若是傳入的名字, 內部沒有建立, 就會檢查其餘模塊中是否認義了
// 若是有定義, 同樣拿過來用
// 若是都沒有就會報一個錯誤
// XXXXProvider 的錯誤

module.controller( '名字', function ( $scope, $http ) {

});
// => 轉換
module.controller( '名字', [ '$scope', '$http', function ( $scope, $http ) {

}] );

16.依賴注入的小案例：

<body ng-app="mainApp" ng-controller="mainController">
    <input type="text" ng-model="num">
</body>
<script src="./js/angular.js"></script>
<script>
    // var num = 0;

    angular.module( 'mainApp', [] )

        .value( 'obj', { num: 0 } )   // 自定義服務( 5 種方法 )

        .controller( 'mainController', function ( $scope, $interval, obj ) {

            // console.log( $window === window );

            // 這裏須要處理界面中 的數據
            // 就必定要有 $scope
            // 我要一個計時器, 來自增一個數據
            // 須要一個計時器, 在 ng 內部有一個 $interval 的對象( 就是 setInterval 的包裝 )
            // 還須要有一個變量, 記錄數字

            $interval(function () {
                // num++;
                obj.num++;
                $scope.num = obj.num;
            }, 1000);

            // setInterval(function () {
            //     num++;
            //     $scope.num = num;

            //     $scope.$apply(); // 雙向數據綁定的原理

            // }, 1000);
        });
</script>

17.在ng 中能夠被注入的對象有兩類，一類是provider，一類是服務

18.做用域(scope)

每一個controller上的數據都是綁定到scope上面的，不一樣的controller擁有不一樣的數據

做用域對象：（就是$scope）

-> 何時建立 $scope
在 ng 凡有控制器就有 $scope 存在.
在 ng 中還有一個特色, 就是懶加載, 也就是說不管是什麼對象只有在使用的時候被建立.

-> 多個 $scope 之間的關係是什麼
在 ng 中控制器能夠分配做用域, 即凡是定義一個控制器就會建立一個 $scope. 若是控制器有
嵌套( 在一個控制器裏定義另外一個控制器 ), 那麼內控制器的 $scope 原型繼承自外控制器的 $scope

對象 a 原型繼承自對象 b, 就是說 a 可使用 b 中的方法, a 的 __proto__ 就是 b
Object.create( b ) -> a

在原型繼承中若是父對象與子對象同時具備同名的屬性會怎樣?
-> 在原型繼承中子對象能夠繼承訪問父對象的全部成員
var base = { name: 'jim' };
var sub = Object.create( base );
console.log( sub.name );
-> 若是在原型繼承中修改或設置子對象的屬性, 至關於給當前對象增長了屬性.
sub.age = 19;
-> 若是修改或設置子對象中與父對象同名的屬性, 實際上父對象不變, 而是給子對象增長了對應的屬性
sub.name = 'tom';
// 除非 sub.__proto__.name = 'tom'

根據屬性搜索原則, 在利用子對象訪問 name 屬性的時候, 只操做子對象, 與父對象無關.

須要具有一個能力, 看 html 標籤繪製 scope 關係

外: modelA: <input type="text" ng-model="modelA">

內: modelB: <input type="text" ng-model="modelB"><br>
內: modelA: <input type="text" ng-model="modelA">
<button ng-click="btn()">點擊訪問</button>
</div>

</div>
</body>
<script src="./js/angular.js"></script>


<script>
    var scopeA;
    angular.module( 'mainApp', [] )
             //controller是內嵌關係，可是建立的時候是平行的代碼
        .controller( 'ControllerA', function ( $scope ) {
            // scopeA = $scope;

        })
        .controller( 'ControllerB', function ( $scope ) {
            // $scope.btn = function () {
            //     console.log( $scope.modelA );
            //     console.log( $scope.__proto__ === scopeA );
            // } ;
            $scope.modelA = '';
            scopeA = $scope;
        })
        .controller( 'ControllerC', function ( $scope ) {

        })
</script>

$rootscope

-> 爲何一開始的代碼中沒有寫 controller 也能夠雙向綁定????
在 ng 程序中, 一旦使用了 ng-app 就代表該標籤與其子標籤被 ng 處理
實際上在背後, 凡有了 ng-app 的背後都會被建立一個 $rootScope 的對象
它就是全部的 $scope 的祖宗, 全部的 $scope 都是直接或間接繼承與 $rootScope 的

凡是沒有寫 ng-controller 的 ng-model 都是 $rootScope 的屬性

這個 $rootScope 是程序一開始被建立的, 所以不是使用 controller 來訪問
ng 的 module 有一個方法, 叫作 run(), 表示運行, 即 ng 程序一運行的時候就會
執行該方法.

語法:
module.run( [ '$rootscope', function ($rootscope ) { ... } ] )

<body ng-app="mainApp">
    <input type="text" ng-model="rootModel">
    <div ng-controller="mainController">
        <input type="text" ng-model="mainModel">
        <div>{{mainModel}}</div>
    </div>
</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', function ( $scope ) {
            console.log( 'running controller: mainController' );
            // window.scope = $scope;
        })//程序運行時就會首先執行run函數，（即便run函數在controller後面），多個run函數會按照順序執行
        .run(function ( $http ) {
            console.log( $http );
        })
        .run(function ( $location ) {
            console.log(  $location );
        })
        .run( [ '$rootScope', function ( $rootScope ) {
            console.log( 'running ng-app: rootScope' );
            console.log( $rootScope );

            // window.rootScope = $rootScope;
        }])

</script>

19.註冊小案例

<body ng-app="mainApp" ng-controller="mainController">
    <!-- 只須要註冊用戶名和密碼 -->
    請輸入用戶名: <input type="text" ng-model="userId"><br>
    請輸入密碼: <input type="password" ng-model="pwd1"><br>
    請確認密碼: <input type="password" ng-model="pwd2"><br>
    <input type="reset" value="取消">
    <button ng-click="btn()">註冊</button>
    <div style="color: red;">{{errMsg}}</div>
</body>
<script src="./js/angular.js"></script>
<script>

    function User( userId, pwd ) {
        this.userId = userId;
        this.pwd = pwd;
    }
    User.prototype.save = function () {
        // 將 this 存儲到 login 的 loacalStorage
        var list = JSON.parse( localStorage.getItem( 'userData' ) || '[]' );
        // 第一次進來的時候 是一個 空 即 數組
        list.push( this );
        // 存儲
        localStorage.setItem( 'userData', JSON.stringify( list ) );
    }

    // 將查找的功能交服務器完成就是配置一個 url 地址: http://www.xxxx.com/xxxx.xxxx?userId=....
    // 所以爲了模擬 服務器的操做, 該 User 需 要提供提供 getUserByUserId 的方法
    User.getUserByUserId = function ( userId ) {
        // 取數據
        var list = JSON.parse( localStorage.getItem( 'userData' ) || '[]' );
        // 在數組 list 中找其中某一項是否爲 userId
        // ES5 擴展的 forEach 不能提早退出
        var user;
        list.forEach(function ( v ) {
            if ( v.userId == userId ) {
                // 找到數據
                user = v;
            }
        });

        // 若是 user 中有數據 就表示找到了, 若是沒有數據就表示沒有找到
        return user;
    };
    User.isExist = function ( userId ) {
        return this.getUserByUserId( userId ) != null;
    };
    // ...


    angular.module( 'mainApp', [] ) 
        .controller( 'mainController', [ '$scope', function ( $scope ) {
            $scope.btn = function () {
                $scope.errMsg = '';
                // 1, 驗證用戶是否輸入完整
               
                var userId      =           $scope.userId,
                    pwd1        =           $scope.pwd1,
                    pwd2        =           $scope.pwd2;

                if ( !userId || userId.trim().length === 0 ) {
                    $scope.errMsg = '請輸入完整信息';
                    return;
                }
                if ( !pwd1 || pwd1.trim().length === 0 ) {
                    $scope.errMsg = '請輸入完整信息';
                    return;
                }
                if ( !pwd2 || pwd2.trim().length === 0 ) {
                    $scope.errMsg = '請輸入完整信息';
                    return;
                }

                // 已經輸入了, 這裏能夠 所有 trim 一下
                userId = userId.trim();
                pwd1 = pwd1.trim();
                pwd2 = pwd2.trim();

                // 2, 驗證兩次密碼是否一致
                if ( pwd1 != pwd2 ) {
                    $scope.errMsg = '密碼輸入不一致, 請從新輸入';
                    return;
                }

                // 判斷用戶名是否存在, 若是存在了不容許註冊
                if ( User.isExist( userId ) ) {
                    $scope.errMsg = '該用戶名已存在, 請從新輸入';
                    return;
                } 



                // 存儲
                new User( userId, pwd1 ).save();
            }; 
        }]);

20.搭建本地http服務器

1> 在 node 官網下載 node 安裝包
下載 .msi 格式的須要雙擊安裝
若是下載 zip 格式的能夠配置命令行手動安裝
2> 下一步下一步安裝
安裝完成之後, 驗證是否安裝成功使用
node -v
npm -v
3> 安裝成功後使用安裝 hs 服務器軟件
npm install -g http-server
4> 使用 shift + 右鍵菜單中能夠看到在當前目錄下打開命令行
5> 鍵入 hs -o 或 http-server -o 能夠打開服務,在當前目錄下搭建 http 服務器, 並打開頁面
默認載入 index.html 文件

和 http-server 同樣, 有一個服務軟件 browser-sync（瀏覽器同步）

21.$http基礎知識（數據的展現案例）

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <table border="1" width="400">
            <tr ng-repeat="item in list">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="./angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {
        {
            // $http.get('')   使用 get 請求
            // $http.post('') 使用 post 請求

            // $http({
            //     url: ...
            //     method: ...
            // })

            // $http 會返回一個 Promise 對象
            // 其有一個 then 方法
            // 其接受兩個 參數, 分別是兩個函數
            // 表明的意思是 若是請求成功調用第一個函數
            // 若是請求失敗調用第二個函數

            // 若是使用獲取 請求有兩個快捷方法
            // success
            // catch

            // $http.get( './personData1.json' )
            //     .then( function ( data ) {
            //         // success
            //         console.log( 'success' );
            //         console.log( data );
            //     }, function ( err ) {
            //         // error
            //         console.log( 'err' );
            //         console.log( err );
            //     });

            // 等價
            // $http.get( './personData1.json' )
            //     .success(function ( data ) {
            //         console.log( 'success' );
            //         console.log( data );
            //     })
            //     .catch(function ( err ) {
            //         console.log( 'err' );
            //         console.log( err );
            //     });
        }
            $http.get( './personData.json' )
                .success(function ( data ) {
                    $scope.list = data;
                });
        }]);

</script>

22.數據的刪除案例：

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <table border="1" width="400">
            <tr ng-repeat="item in list">
                <td>{{$index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
                <td><a href="#" ng-click="remove( $index )">刪除</a></td>
            </tr>
        </table>
    </div>
</body>
<script src="./angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {

            $scope.remove = function ( index ) {
                console.log( index );
                // 利用 this.item 便可找到咱們的 數據, 而後利用 list 刪除這個數據
                // 利用 $index 便可拿到其索引, 就能夠刪除
                $scope.list.splice( index, 1 );

                window.scope = $scope;

                // 對服務器發送請求處理, 等到結果

            };


            $http.get( './personData.json' )
                .success(function ( data ) {
                    $scope.list = data;
                });


        }]);

</script>

23.數據的增長案例

<body ng-app="mainApp">
    <div ng-controller="mainController">
        姓名: <input type="text" ng-model="name"><br>
        年齡: <input type="number" ng-model="age"><br>
        性別: <input type="text" ng-model="gender"><br>
        <button ng-click="add()">添加</button>
        <hr>
        <input type="text" ng-model="search">
        <hr>
        <table border="1" width="400">
            <tr ng-repeat="item in list | filter: { name: search }">
                <td>{{$index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
                <td><a href="#" ng-click="remove( $index )">刪除</a></td>
            </tr>
        </table>
    </div>
</body>
<script src="./angular.js"></script>
<script>
    // function UserList( $http ) {
    // }
    angular.module( 'mainApp', [] )
        .controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {
            window.scope = $scope;
            $scope.add = function () {
                // 驗證輸入
                $scope.list.push({
                    name: $scope.name,
                    age: $scope.age,
                    gender: $scope.gender
                });
                // 清空
                $scope.name = $scope.age = $scope.gender = undefined;
            }
            $scope.remove = function ( index ) {
                console.log( index );
                // 利用 this.item 便可找到咱們的 數據, 而後利用 list 刪除這個數據
                // 利用 $index 便可拿到其索引, 就能夠刪除
                $scope.list.splice( index, 1 );
                // 對服務器發送請求處理, 等到結果

            };
            $http.get( './personData.json' )
                .success(function ( data ) {
                    $scope.list = data;
                });
        }]);

</script>

24.事件

- 什麼是事件
通常涉及到事件的時候, 指的事件機制, 通俗的解釋是當用戶執行某一個行爲的時候, 瀏覽器會自動的調用預先註冊好的函數.
與事件相關的名字有不少
1> 事件處理函數. 就是響應用戶的函數.
2> 事件( 作名詞講 ). 是指事件名. 注意是不包含 on 的名字.
3> 事件的註冊( 給 on... 賦值 )
... ...
瞭解
4> 事件監聽
瀏覽器會判斷在用戶發出某個行爲的時候, 是否註冊了對應的事件處理函數. 若是有就會發射事件.
5> 事件發射
調用內置的事件處理函數
a 標籤爲例, 點擊 a 標籤的時候會跳轉, 那麼這個跳轉就是默認的處理行爲
在默認的事件處理函數中會調用 on... 的事件處理函數( 用戶的事件處理函數 )

猜想, 默認的邏輯爲
function 默認() {
if ( onclick ) {
if ( onclick() === false ) return;
}
// 默認的邏輯
// 跳轉
location.href = ....
}

通俗的解釋
京東在買東西, 我看上了一個產品( angular權威指南 ), 可是價格很高.
點擊收藏: 提示你是否要降價提醒. 若是我選擇了降價提醒.

事件機制在實際開發中有一個設計模式與之對應
1> 觀察者模式
2> 代理模式

- 事件模型
若是說須要自定義事件, 那麼就須要本身實現
1> 事件的註冊
2> 事件的發射
3> 監聽通常使用內置事件進行監聽

例如頁面中有一個案例 btn
那麼須要提供函數
1> on 綁定事件
2> fire 發射事件
3> 監聽 onclick 賦值

做業
function MyControl( dom ) {
this.dom = ...dom...;
this.events = {};

// 監聽...
}
MyControl.prototype = {
on: function () {},
fire: function () {}
}

var triBtn = new MyControl( '#dv' );
triBtn.on( '...', function () ... )

- angular 中事件的使用
在 ng 中有兩個很是經常使用的事件
1> emit 從子控制器向父控制器方向傳播事件
2> broadcast 從父控制器向子控制器方向傳播事件

這兩個方法都是用來發射事件的, 註冊使用 $on( ... )

emit事件：

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <input type="text" ng-model="myInput">

        <div ng-controller="secondController">
            <input type="text" ng-model="myInput">
            <input type="button" value="點擊" ng-click="click()">
        </div>
    </div>
    
</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', function ( $scope ) {
            $scope.myInput = '';

            // 在這裏監聽事件, 等待數據的來到
            $scope.$on( 'bigbigEvent', function ( evt, args ) {
                // console.log( arguments );
                $scope.myInput = args;
            });
        })
        .controller('secondController', function ( $scope ) {
            $scope.myInput = '';

            $scope.click = function () {
                // 在這裏發射一個事件, 將數據傳遞出去
                // console.log($scope.$emit);
                $scope.$emit( 'bigbigEvent', $scope.myInput );
            };
        });
</script>

brodcast事件：

<body ng-app="mainApp">
    <div ng-controller="mainController">
        <input type="text" ng-model="myInput">
        <input type="button" value="點擊" ng-click="click()">
        <div ng-controller="secondController">
            <input type="text" ng-model="myInput">
        </div>
    </div>
    
</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .controller( 'mainController', function ( $scope ) {
            $scope.myInput = '';
            
            $scope.click = function () {
                // 父控制器, 須要廣播事件
                // console.log($scope.$broadcast);
                $scope.$broadcast( 'smallsmallevent', $scope.myInput, 1, 2, 3, 4 );
            };
        })
        .controller('secondController', function ( $scope ) {
            $scope.myInput = '';
            // 子控制器
            // 監聽廣播事件
            $scope.$on( 'smallsmallevent', function ( evt, a,b,c,d,e ) {
                console.log( arguments );
            });
        });
</script>

兄弟控制器間傳遞信息：

<body ng-app="mainApp">

    <div ng-controller="mainController">
        <input type="text" ng-model="myInput">
        <input type="button" value="點擊" ng-click="click()">
    </div>

    <div ng-controller="secondController">
        <input type="text" ng-model="myInput">
    </div>

</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .run( function ( $rootScope ) {
            // 監聽 發佈過來的事件, 而後轉發對應的事件
            $rootScope.$on( 'mainEvent', function ( evt, data ) {
                // 拿到數據之後, 直接一腳踢開
                $rootScope.$broadcast( 'secondEvent', data );
            })
        })
        .controller( 'mainController', function ( $scope ) {
            $scope.myInput = '';
            
            $scope.click = function () {

                $scope.$emit( 'mainEvent', { data: $scope.myInput } );

            };
           
        })
        .controller('secondController', function ( $scope ) {
            $scope.myInput = '';
           
            $scope.$on( 'secondEvent', function ( evt, data ) {
                $scope.myInput = data.data;
            });
        });
</script>

25.表達式

有數據與運算符鏈接的, 而且有值的式子就是表達式

123

n = 123

func()

- ng 中表達式
ng 中的表示式是一個類 javascript 代碼片斷.
它主要用在插值語法中( {{ }} ), 或指令中( ng-click="btn()" ). 主要用於計算值
或函數調用.

- ng 表達式與 js 表達式的異同

<div>{{ 1234 | currency }}</div> //將數字以貨幣形式展現

26.frameset(頁面分欄)

<frameset cols="30%, *">
    <frame src="http://www.baidu.com"/>
    <frame src="http://www.itcast.cn" />
</frameset>

27.過濾器：

- 什麼是過濾器
所謂的過濾就是將一堆數據進行一個篩選, 找到你想要的數據.
在 ng 中, 所謂的過濾是指, 將一個數據( 單個數據, 或數組等 ) 用一個函數進行處理, 獲得一個具體的結果.
這個過程就是過濾. 通俗說, 就是 "洗一下". 再一種解釋比如映射( map ).

- 做用
將 ng 中使用的數據, 按照必定的規則顯示出來
例如:
貨幣: 按照格式顯示貨幣
日期: 按照指定的格式顯示日期

<body ng-app="mainApp">
    <div>{{ now | date: 'yy年MM月dd日  hh:mm:ss' }}</div>
</body>
<script src="./js/angular.js"></script>
<script>
    angular.module( 'mainApp', [] )
        .run( function ( $rootScope ) {
            $rootScope.now = new Date();
        })
</script>

- 語法
- 表達式
{{ 數據 | 過濾器名: 參數 }}
所謂的過濾器名, 其實就是一個函數, 其中豎線表示的含義是將前面的 "數據" 做爲參數傳入到過濾器這個函數中.
那麼函數的第一個參數就是前面的數據. 可是爲了能夠控制函數的具體實現, 函數還能夠帶有其餘參數. 在過濾器名
後面用冒號鏈接的內容就是參數, 若是有多個參數, 例如兩個參數的時候, 使用語法

- 自定義過濾器
使用語法
module.filter( '過濾器的名字', [ function () {
return function ( input ) { // 這個被 return 的函數就是過濾器函數

}
}] );

<body ng-app="mainApp">
    <div>{{ 'ng-app' }}</div>
    <div>{{ 'ng-app' | tocamel }}</div>
</body>
<script src="./js/angular.js"></script>
<script>
//非駝峯轉駝峯

    angular.module( 'mainApp', [] )
        .filter( 'tocamel', function () {
            var r = /-(\w)/g;
            return function ( input ) {
                return input.replace( r, function ( _, c ) {
                    return c.toUpperCase();
                }); 
            }   
        });

</script>

- 注入

### 內置經常使用過濾器
filter 過濾, 該過濾器使用在數組數據的後面, 用於過濾出子數組
filter 帶有三種參數形式
1> 單個數據, 凡是在數組中數據與之同樣的就被留下來
2> 對象, 用來過濾對象數組
3> 帶有一個函數, 用來對當前元素進行判斷, 相似於 jquery 的 map 函數.
該函數就是在判斷當前元素是否須要被過濾出來

currency 表示貨幣, 意味着使用金錢的方式來現實. 沒有參數.
number 表示已小數點後多少位來現實數據. 使用的時候使用語法
{{ num | number: 3 }} // 保留小數點後 3 位
date 採用時間格式來現實
yyyy 年份, yy 沒有世紀時間的年份
MM 月
dd 日
hh 小時, HH 表示 24 小時制
mm 分鐘
ss 秒
.sss 毫秒

json 以 json 的格式顯示數據
lowercase 轉小寫
uppercase 轉大寫
limitTo 表示從數組的哪個位置開始, 到哪個位置截取
limitTo: 3 從左開始, 截取前 3 個數據
limitTo: -4 從右開始, 截取後 4 個數據
orderBy 排序
帶有三個參數
1> 表示按照什麼屬性排序, 帶有負號的時候降序, 默認試試升序.
2> 一個 boolean 值, 表示是否逆序
3> 一個函數, 表示比較規則. 使用比較規則排序

### 過濾器組合使用

數據 | 過濾器1 | 過濾器2 | 過濾器3

### 自定義過濾器

28.指令 directive

- 什麼是指令
指令就是命令的意思. 簡單的描述就是給一個指令( 命令 )給你, 那麼你就要作不少的事情.
在 ng 中, 指令是寫在一個標籤中的一個特殊的屬性, 例如 ng-XXX. 在 ng 中凡是寫了指令
的地方, 其實背後會有一連串的代碼被執行.

例如:
ng-controller, 背後會建立 $scope 等數據
ng-app, 背後會建立模塊, $rootScope 等數據
ng-repeat, 直接根據數據建立 html 標籤
ng-model, 背後就將數據加到最近的一個 $scope 中
ng-click, 背後就建立一個監聽點擊的事件
... ...

### 內置指令
// 這裏的指令都是延遲, 或須要 ng 執行獲得結果的指令
ng-href
ng-src
ng-class 用於設置類樣式的屬性
傳統的語法是使用 class="..."
須要時常更改 class 中含有的類樣式
正常狀況多是 class="navigator hide", 菜單被展開之後, 能夠變成 class="navigator"

ng-class 的語法是須要一個對象
例如: ng-class="{ 鍵: 值, 鍵: 值, 鍵: 值 }"
此時鍵名就是類樣式的名字
值是一個 boolean 值, 表示是否含有該類樣式

例如, 要實現
class="navigator hide"
能夠寫成
ng-class="{ navigator: true, hide: true }"
若是要寫成
class="navigator"
能夠是
ng-class="{ navigator: true, hide: false }"

ng-style 該屬性用於設置樣式, 其樣式的值按照分號分割羅列在該屬性中
例如:
style="width: 200px; height: 100px; border: 1px solid red;"
ng-style 能夠跟一個對象, 其對象的鍵值對就表示樣式的名字與值

ng-cloak 給全部的使用了 ng 指令的 html 標籤加上一個 hide 類樣式, 就是設置其 display: none
ng-bind 就是插值語法的指令形式
<div>{{ num }}</div>
等價於
<div ng-bind="num"></div>
ng-app
ng-controller
ng-model

//boolean類型的指令

ng-selected
ng-readonly
ng-disabled
//具備流程控制的指令
ng-if //元素是否存在 ng-hide和ng-show有相似的功能
ng-switch //相似於switch-case語句

<div ng-init='num=4'>
   <div  ng-switch='num'>
      <div ng-switch-when='2'>222</div>
      <div ng-switch-when='3'>333</div>
      <div ng-switch-default>default</div>
   </div>
</div>

ng-view//就是一個容器，用於路由操做
ng-repeat// 注意： $index、 $even、$odd、 $first、 $last

ng-init
//事件指令（添加到scope上）
ng-click
ng-dbclick
ng-change
ng-select
ng-submit

ng 1.5.8 中有 64 個指令

自定義指令:

定義的語法：

//定義的語法：
     angular.module('mainApp',[])
     .directive('itLogin',[function(){//要用駝峯命名法
              return{//指令的配置
                  template:'<div class='login'>'+
                  '請輸入用戶名：<input type="text"><br>'+
                  '請輸入密碼：<input type="password"><br>'+
                  '<input type="button" value="登陸">'+
                  '</div>'
              };
          }])

//自定義指令的使用：

自定義指令的屬性：

restrict：string //設置指令的使用形式(EACM),能夠容許個人指令以標籤、屬性、class、註釋的形式給出

E：element

A:attribute

C：class

M：common

eg：<it-login></it-login>

priority:number //設置指令的優先級

triminal:boolean //中止優先級低於該指令級別的指令

template: string | function

templateUrl:'tmp.html' //設置模板的路徑

replace：boolean //設置將指令標籤替換成模板內容

scope：boolean | object //用於設置獨立的做用域

取值爲true表示繼承做用域

直接賦值一個對象，這個就是獨立的做用域（不參與集成的特例）

controller： string | ['$scope', function($scope){}] //設置事件的處理函數

require:string

link :function

compile:function

transclude: true （嵌入，轉換包含，轉置） //將使用指令時傳入標籤內數據站換到模板中

<body ng-app='mainApp'>
    <div it-login>哈哈哈哈</div>
</body>
<script>
     //定義的語法：
     angular.module('mainApp',[])
     .directive('itLogin',[function(){
              return{//指令的配置
                  transclude:true ,
                  template:'<div class="login" ng-transclude></div>'//結果就是模板中會顯示'哈哈哈'
              };
          }])
</script>

29.路由

操做步驟：
1>下載angular.js和angular-route.js
2>在頁面中放置一個容器
<ng-view></ng-view>
3>在建立模塊的時候引入'ngRoute'
angular.module('mainApp',['ngRoute'])
4>在模塊中有一個方法config是在程序運行以前被執行的，該方法中能夠完成程序的預設值
在ng中config方法和run方法構成了程序運行紅的預備和運行的行爲
在config中配置路由信息，使用語法：
.config(['$routeProvider',function(){
$routeProvider
.when('/',{
template:''
})
.when('/',{
template:''
})
.otherwise({redirectTo:'/'})
}])
在路由中的參數，就是url中的#後面的內容(hash）

<body ng-app='mainApp'>

</body>
<script>
    angular.module('mainApp',['ngRoute'])
    .config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/',{
              template:'<h1>主頁</h1>'
        })
        .when('/a',{
              template:'<h1>a頁</h1>'
        })
        .when('/b',{
              template:'<h1>b頁</h1>'
        })
        .when('/c',{
              template:'<h1>c頁</h1>'
        })
        .otherwise({redirectTo:'/'});

    }])
</script>

路由中的屬性：
1>templateUrl
2>template
3>controller:函數 | 字符串

30.

移除路由的url中的#
1>在config方法中，配置$locationProvider,啓用html5模式

(function(){
        angular.module('mainApp')
          .config(['$locationProvider',function($locationProvider){
              $locationProvider.html5Mode(true);
          }])
    })()

2>修改根路徑爲當前頁面的路徑

<head>
<base href='/main/'>//設置根路徑
</head>

3>修改全部的a標籤的href屬性

<body ng-app='mainApp'>
       <a href="">首頁</a> //    /是根目錄，須要去掉
       <a href="a">a頁</a>#/ 
       <a href="b">b頁</a>
       <a href="c">c頁</a>
       <ng-view></ng-view>

</body>

31.服務：提供一些特定功能的對象（在ng中，服務就是被注入的對象）

在ng中被定義用來使用的數據、對象、函數就是服務

factory

語法：

module.factory('服務名',[function(){

return 服務的本體

}])

<body ng-app='mainApp'>
    <div ng-controller='mainController'></div>
</body>
<script>
    angular .module('mainApp.services',[])
    .factory('myServer',['$http',function($http){
               //return 能夠是數字   對象   函數
               return 123;
               //return function(str){console.log(str)};
               //return  $http;
           }]);
    angular.module('mainApp',['mainApp.services'])
    .controller('mainController',function($scope,myServer){
           // myServer('hello angualr')
           //myServer.get(url)
           //   .success(function(data){console.log(data)})
    })
</script>