1、AngularJS定义：
Google AngularJS是一个JS框架，主要思路不是传统的“先查找再操作DOM元素”，而是“以数据为中心”。适用于以数据操作为主的SPA应用。
2、AngularJS与jQuery的关系？
jQuery操作思路：先找元素，再操作元素 $(....).xxx();
AngularJS操作思路：创建业务数据、绑定数据、维护数据
AngularJS已经把底层/低级的DOM操作，为开发者封装起来了
AngularJS在加载时会查看当前页面是否已经加载了jquery.js(就是判断window.jQuery是否存在)，若存在则所有的DOM操作全都使用jQuery提供的方法；若不存在，则anglarJS会使用自定义的jQuery精简版本——jqLite——只有jQuery的核心方法。
3、MVC模型
(1)在一个Angular应用中可以声明多个模块(module)
(2)某个模块可以依赖于其他的模块
(3)有一个模块必须注册给ngApp指令——启动模块
(4)一个模块中可以声明多种组件，如：
- controller
- directive
- service
- filter
- ...
4、控制器的作用范围/作用域
(1)每次调用ngController都会创建一个新的Controller对象
(2)每个Controller对象都有唯一的$scope对象
(3)$scope就表示当前控制器对象的有效范围/作用域
(4)声明在某个$scope中模型数据，一般情况下不能被其他的控制器所使用。
(5)若想在多个控制器间共享/传递数据，可以声明在根作用域中——$rootScope—每个Angular应用(ngApp)只有一个唯一的$rootScope对象
(6)控制器的本质用途：用于划分一个大型页面中的不同的DIV块——每个这样的块中都有自己专用的数据，以及可以与其他块共享的数据。
5、AngularJS四大特性之二——双向数据绑定——偏难&重点！
(1)方向1：Model绑定到View，此后不论何时只要Model发生改变，View会自动立即同步更新。
实现方法：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked ... 等等几乎所有的显示数据的指令都实现了方向1的绑定。
(2)方向2：View绑定到Model，把视图中用户可以修改的HTML元素——即表单控件——的值绑定到一个Model变量上。此后，不论何时只要用户修改了表单控件的值，后台模型变量的值会立即随之改变。
实现方法：只有ngModel指令可以！ 为了监视到Model变量真的被改变了，可以使用$scope.$watch()函数对Model数据的值进行监视。
·单行文本输入域，ngModel可以把value属性值绑定到Model变量
·复选框，ngModel可以把true/false值绑定到Model变量
·单选框，ngModel可以把当前选中的单选框的value值绑定到Model变量
·下拉框，ngModel可以把当前选中的option的value值绑定到Model变量
6、ng模块中提供的service组件
(1)$rootScope 用于在所有的控制器间共享数据的服务
(2)$interval 周期性定时器服务
(3)$timeout 一次性定时器服务
7、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;
8、如何压缩js文件？
Yahoo User Interface，YUI项目中提供了一个很好用的压缩程序：yui-compressor
可用于压缩CSS、JS文件。使用步骤：
- 安装Java运行环境
- 编写JS/CSS文件，用于压缩
- 运行yuicompressor工具，执行压缩
提示：可以把yuicompressor配置为WebStorm中的FileWatcher，监视js/css文件，实现自动的压缩
注意：压缩工具会执行如下的压缩：
(1)删除所有的注释
(2)删除所有的无用的空白字符
(3)变量名、函数名、形参名尽可能的简化
(4)所有的数据和值不会进行简化！
9、实例
- 实现一个简易版的购物车计算器
- 用户“同意本站使用条款”则显示“注册”按钮；否则“注册”按钮消失
- 下拉选择用户头像的名称，旁边立即显示用户选择的头像图片
4)表格外勾选“全部选择”复选框，则表格内的所有复选框全部选择
<!DOCTYPE html>
<html lang="en" ng-app="myModule5">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title></title>
</head>
<body>
<div class="container" ng-controller="myCtrl5">
<h1>练习：双向数据绑定</h1>
<h2>1.简易版计算器</h2>
<!--方向2的绑定-->
单价：<input type="text" ng-model="p.price">
数量：<input type="number" ng-model="p.count">
<!--方向1的绑定-->
小计：{{p.price * p.count}}
<h2>2.同意则显示</h2>
<!--方向2的绑定-->
<input type="checkbox" ng-model="agreeOrNot">我同意本站的使用条款<br>
<!--方向1的绑定-->
<input ng-show="agreeOrNot" class="btn btn-success" type="button" value="提交注册信息">
<h2>3.选择角色</h2>
<!--方向2的绑定-->
<select ng-model="imgSrc">
<option value="img/1.jpg">萌大叔</option>
<option value="img/2.jpg">小萝莉</option>
<option value="img/3.jpg">大力士</option>
</select>
<!--方向1的绑定-->
<img ng-src="{{imgSrc}}" style="width:100px;height:100px;">
<h2>4.全选和取消全选</h2>
<!--<input type="checkbox" ng-model="selectAll">
<input type="checkbox" ng-checked="selectAll">-->
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
<span ng-hide="selectAll">全选</span>
<span ng-show="selectAll">取消全选</span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="js/angular.js"></script>
<script>
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
$scope.p = new Object();
$scope.p.price = 0;
$scope.p.count = 0;
/*$scope.selectAll = true;
$scope.$watch('selectAll', function(){
console.log('Model变量selectAll的值改变了：'+$scope.selectAll);
})*/
});
</script>
</body>
</html>
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
