AngularJS--MVC模型

 

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

Angular四大特性：

  (1)MVC模型

Model：模型，即业务数据，在前端应用中就是保存在特定范围的JS变量

View：视图，即业务数据在用户面前的呈现，在前端应用中就是HTML

Controller：控制器，负责业务数据的获取、修改、删除等，在前端应用中由function来担当。

  (2)双向数据绑定

  (3)依赖注入

  (4)模块化(Module)设计——体现“高聚合低耦合”设计原则

 

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

 

 

1.MVC模型

  (1)在一个Angular应用中能够声明多个模块(module)

  (2)某个模块能够依赖于其余的模块

  (3)有一个模块必须注册给ngApp指令——启动模块

  (4)一个模块中能够声明多种组件，如：

1)controller

2)directive

3)service

4)filter

5)...

 

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

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

  (2)每一个Controller对象都有惟一的$scope对象

  (3)$scope就表示当前控制器对象的有效范围/做用域

  (4)声明在某个$scope中模型数据，通常状况下不能被其余的控制器所使用。

  (5)若想在多个控制器间共享/传递数据，能够声明在根做用域中——$rootScope—每一个Angular应用(ngApp)只有一个惟一的$rootScope对象

 

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

 

 

3.AngularJS四大特性之二——双向数据绑定——偏难&重点！

  (1)方向1：Model绑定到View，此后不论什么时候只要Model发生改变，View会自动当即同步更新。

实现方法：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked ... 等等几乎全部的显示数据的指令都实现了方向1的绑定。

练习：

1)建立一个点击计数器，有一个按钮，只要点击一次，当即显示出点击次数。

2)仿写轮播广告中的“前进/后退”按钮，提示：忘掉传统的轮播广告！注意img的src属性值能够赋值为一个Model数据，而此数据能够使用模型函数进行修改。

 

  (2)方向2：View绑定到Model，把视图中用户能够修改的HTML元素——即表单控件——的值绑定到一个Model变量上。此后，不论什么时候只要用户修改了表单控件的值，后台模型变量的值会当即随之改变。

实现方法：只有ngModel指令能够！ 为了监视到Model变量真的被改变了，能够使用$scope.$watch()函数对Model数据的值进行监视。

·单行文本输入域，ngMode能够把value属性值绑定到Model变量

·复选框，ngModel能够把true/false值绑定到Model变量

·单选框，ngModel能够把当前选中的单选框的value值绑定到Model变量

·下拉框，ngModel能够把当前选中的option的value值绑定到Model变量

 

 

 

 

4.ng模块中提供的service组件

  (1)$rootScope     用于在全部的控制器间共享数据的服务

  (2)$interval          周期性定时器服务

  (3)$timeout         一次性定时器服务

 

 

5.ng模块提供的directive组件

  (1)ngApp

  (2)ngInit

  (3)ngBind

  (4)ngIf

  (5)ngRepeat

  (6)ngClick： 为元素绑定单击事件的监听函数——只能是Model函数($scope.函数名=function(){})，不能是全局函数

  (7)ngMouseOver ....

  (8)ngSrc: 为IMG标签指定src属性，但能够防止404请求错误

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

  (10)ngHide:  若赋值为true，则display:none；不然display:block;

 

 

如何压缩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)注意：全部的数据和值不会进行简化！

 

 

6.AngularJS四大特性之三——依赖注入