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)注意：所有的数据和值不会进行简化！字符串数字不会变；