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>

service

语法：

module.service('服务名',构造函数)

与

module.factory('服务名',function(){

return new 构造函数名()

})等价

constant：定义常量变量（不可变）//能够定义在config以前

语法：

module.constant('服务名',值)

value：定义变量（可变的）

语法：

module.value('服务名',值)

provider

语法：

module.provider('服务名',{

$get:function(){//必须提供$get方法

return 服务本体

}

})

32.项目结构

yeoman工具

1>安装yo工具

npm install -g -o

2>安装angular 模板(gulp版本)

npm install -g generator-gulp-angualr

3>运行yo下载模板依赖

很据需求下载数据便可

npm install & bower install

简单命令：

mkdir myapp //建立文件夹

33.angular内部算法原理

双向数据绑定 $scope.applay()

脏值检测