Unit02： 双向数据绑定 、 依赖注入 、 过滤器

【Angular Js】

Google AngularJS是一个JS框架，主要思路不是传统的“先查找再操做DOM元素”，而是“以数据为中心”。适用于以数据操做为主的SPA应用。

Angular的四大特性：

1.MVC模型

           1).Model：模型，就是“业务数据”，前端项目中JS中的变量；

           2).View：视图，“业务数据”在用户面前的展示；前端项目中就是HTML；

           3).Controller：控制器，负责“业务数据”中的增删改查，前端项目中就是Function；

2.双向数据绑定

3.依赖注入

4.模块化(module)设计--体现高聚合低耦合的原则；

 

面试题： AngularJS与jQuery的关系？   jQuery操做思路：先找元素，再操做元素   $(....).xxx();   AngularJS操做思路：建立业务数据、绑定数据、维护数据   AngularJS已经把底层/低级的DOM操做，为开发者封装起来了       AngularJS在加载时会查看当前页面是否已经加载了jquery.js(就是判断window.jQuery是否存在)，若存在则全部的DOM操做全都使用jQuery提供的方法；若不存在，则anglarJS会使用自定义的jQuery精简版本——jqLite——只有jQuery的核心方法。

 

 

一个项目中能够声明若干个功能模块(模块名称不能相同)，最终要有一个启动模块（注册给ng-App指令）myModule1；

一个模块能够有多个控制器(控制器名称不能相同)

  angular.module('myModule2',['ng']);

  angular.module('myModule3',['ng']);

  angular.module('myModule1',['ng','myModule2','myModule3']).controller().controller();

                             |-依赖的模块列表

 

2.控制器的做用范围、做用域

    1）每次调用ngController都会建立一个新的Controller对象；

    2）每一个Controller都有一个惟一的$scope对象；

    3）$scope表示当前Controller的有效范围；

    4）申明某个$scope中的模型数据，通常状况下不能被其余控制器使用；

    5）若想在多个控制器共享某个model数据->能够在声明根做用域中$rootScpoe；每一个Angular应用中只有一个惟一的$rootScpoe；

       $scope的优先级高于$rootScpoe；

 

 

     6）控制器的本质用途：用于划分一个大型页面中不一样的div块 -- 每一个这样的块中都有本身专用的数据，以及能够与其余块共享的数据；*********

 

3.双向数据绑定

    1）方向1：把model绑定到view上，只要model发生改变，view也会跟着改变；

              实现方法：{{}}、ng-bind、ng-if、ng-repeat....几乎全部的显示数据的指令都实现了方向一的绑定；

              练习：

              1- 建立一个点击计数器，有一个按钮只要点一次，当即显示出点击次数；3.html

              2- 仿写轮播广告中的“前进 、后退”按钮；

    2）方向2：把view绑定到model上，把视图中能够修改的值或HTML元素 -- 表单控件的值绑定到一个模型model变量,只要用户修改了表单控件的值，后台模型变量的值会当即随之改变，

                只有ngModel指令能够；*****

                单行文本输入域： 是把value绑定到ng-model上；

                复选框： 是把布尔值(true / false)绑定到ng-model上；

                单选按钮： 把当前选中的单选的value绑定到ng-model上；

                下拉框：把选中的option的value值绑定到ng-model上；

 

4.ng模块提供的service组件

    1)$rootScope;

    2)$interval是Angular提供的定时器；

    3)$timeout;

 

 

5.ng模块提供的指令组件

    ngApp

    ngInit

    ngBind

    ngIf

    ngRepeat

    1）ngClick:为元素绑定单击事件的监听函数 -- 只能是Model函数($scope.函数名=function(){})；

    2) ngSrc: 为img指定src，防止404；

    3) ngModel:把当前文本输入域中的值绑定到model上； 方向2仅有的****其余的都是方向1的指令

       $scope.$watch()监视一个model数据的每一次修改；

       如：

       <input type="text" ng-model="uname" >

       $scope.$watch('model',function(){

             console.log('model数据uname的值改变了'+$scope.uname);

           })

    4) ngShow:若赋值为true;则display:block;不然为none；

    5) ngHide:与ngShow相反；

    6) ngChecked:若是复选框是选中的只是true；

 

* *如何压缩js文件* *

    yuicompressor-2.4.2.jar:YUI项目中提供的压缩程序：可用于压缩js,css

    1- 安装java运行环境；

    2- 运行yuicompressor执行压缩；

        cmd:

        webStrom:

如何压缩js文件？ Yahoo User Interface，YUI项目中提供了一个很好用的压缩程序：yui-compressor 可用于压缩CSS、JS文件。使用步骤： (1)安装Java运行环境 (2)编写JS/CSS文件，用于压缩 (3)运行yuicompressor工具，执行压缩   提示：能够把yuicompressor配置为WebStorm中的FileWatcher，监视js/css文件，实现自动的压缩     注意：压缩工具会执行以下的压缩：  (1)删除全部的注释  (2)删除全部的无用的空白字符  (3)变量名、函数名、形参名尽量的简化 -----------------------------------------------------------------  (4)注意：全部的数据和值不会进行简化！字符串数字不会变；