课件笔记压缩day

1、复习：AngularJS 是一个 JS 框架，主要思路不是传统的“先查找再操作 DOM 元素”，而是“以数据为中心”。适用于以数据操作为主的 SPA 应用。Angular 四大特性：(1)MVC 模型M：模型，即业务数据，端应用中就是保存在特定范围的 JS 变量View：视图，即业务数据在用户面前的呈现，端应用中就是HTMLController：控制器，负责业务数据的获取、修改、删除等， (2)双向数据绑定依赖注入模块化(Module)设计体现“高聚合低耦合”设计原则端应用中由function 来担当。学习目标：复习并扩展MVC 模型双向数据绑定重点&偏难 (3)依赖注入次重点&简单复习 MV

2、C 模型在一个Angular 应用中可以某个模块可以依赖于其他的模块多个模块(module)(3)有一个模块必须 (4)一个模块中可以 1)controller 2)directive3)service 4)filter 5).给ngApp 指令启动模块多种组件，如：2.控制器的作用范围/作用域面试题： AngularJS 与jQuery 的关系？jQuery 操作思路：先找元素，再操作元素$().();AngularJS 操作思路：创建业务数据、绑定数据、数据AngularJS 已经把底层/低级的DOM 操作，为开发者封装起来了AngularJS 在加载时会查看当前页面是否已经加载了 jqu

3、ery.js(就是判断 window.jQuery 是否存在)，若存在则所有的DOM 操作全都使用jQuery 提供的方法；若不存在，则 anglarJS 会使用自定义的jQuery精简版本jqLite只有 jQuery 的 方法。每次调用ngController 都会创建一个新的Controller 对象每个Controller 对象都有唯一的$scope 对象$scope 就表示当前控制器对象的有效范围/作用域(4)在某个$scope 中模型数据，一般情况下不能被其他的控制器所使用。(5)若想在多个控制器间共享/传递数据，可以 (ngApp)只有一个唯一的$rootScope 对象在根作用

4、域中$rootScope每个 Angular 应用(6)控制器的本质用途：用于划分一个大型页面中的不同的 DIV 块每个这样的块中都有自己数据，以及可以与其他块共享的数据。的3.AngularJS 四大特性之二双向数据绑定偏难&重点！(1)方向 1：M绑定到View，此后不论何时只要M发生改变，View 会自动立即同步更新。实现方法： 、ngBind、ngIf、ngRepeat、ngShow、ngChecked . 等等几乎所有的显示数据的指令都实现了方向 1 的绑定。练习：1)创建一个点击计数器，有一个按钮，只要点击一次，立即显示出点击次数。2)仿写轮播中的“前进/后退”按钮，提示：忘掉传统

5、的轮播！注意 img 的 src 属性值可以赋值为一个M数据，而此数据可以使用模型函数进行修改。(2)方向 2：View 绑定到M，把视图中用户可以修改的 HTML 元素即表单控件的值绑定到一个M变量上。此后，不论何时只要用户修改了表单控件的值模型变量的值会立即随之改变。变量真的被改变了， 可以使用实现方法： 只有 ngM$scope.$watch()函数对 M指令可以！ 为了监视到 M数据的值进行监视。单行文本输入域，ngMode 可以把value 属性值绑定到M变量复选框，ngM单选框，ngM下拉框，ngM练习：可以把true/false 值绑定到M变量可以把当前选中的单选框的value

6、值绑定到M可以把当前选中的option 的value 值绑定到M变量变量1)实现一个简易版的购物车计算器2)用户“同意本站使用条款”则显示“”按钮；否则“”按钮3)下拉选择用户头像的名称，旁边立即显示用户选择的头像4)表格外勾选“全部选择”复选框，则表格内的所有复选框全部选择4.ng 模块中提供的service 组件(1)$rootScope (2)$erval (3)$timeout用于在所有的控制器间共享数据的服务周期性定时器服务定时器服务ng 模块提供的directive 组件ngApp (2)ngInit (3)ngBind (4)ngIf (5)ngRepeatngClick： 为元

7、素绑定单击事件的不能是全局函数ngMouseOver .函数只能是 M函数($scope.函数名=function()，(8)ngSrc: 为IMG指定src 属性，但可以防止 404 请求错误(9)ngShow: 若赋值为true，则display:block；否则 display:none; (10)ngHide: 若赋值为true，则display:none；否则 display:block;如何压缩 js 文件？Yahoo Usererface，YUI 项目中提供了一个很好用的压缩程序：pressor可用于压缩CSS、JS 文件。使用步骤：安装Java 运行环境编写JS/CSS 文件，用于压缩运行pressor 工具，执行压缩提示：可以把pressor 配置为WebStorm 中的 FileWatcher，监视 js/css 文件，实现自动的