第 1 章 初识 AngularJS
Angular基于MIT许可，开源框架。
为开发者提供了很多现代Web开发的高级功能：
- 解耦应用逻辑、数据模型和视图;
- 依赖注入;
- 浏览历史(使书签和前进、后退按钮能够像在普通Web应用中一样工作);
- 测试;
……
第 2 章 数据绑定和第一个 AngularJS Web应用
Angular插件小于100K，大约70K左右，引用即可使用。非常方便
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script>``` ```<h1>Hello {{ name }}</h1>``` 使用{{}}模板符号 <div class="se-preview-section-delimiter"></div> ##经典的双向绑定示例 <div class="se-preview-section-delimiter"></div> ```<div ng-controller='MyController'> <input ng-model="person.name" type="text" placeholder="Your name"> <h1>Hello {{ person.name }}</h1>
javascript代码
function MyController($scope,$timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
},1000);
};
updateClock();
};
这个写法挺有意思，使用timeout代替setInterval
$apply版
function MyController($scope) {
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
},1000);
updateClock();
};
在线示例:http://jsbin.com/uHiVOZo/1/edit?html,output
第 3 章 模块
声明模块
angular.module('myApp',[]);
两个参数，第一个参数是模块名（ng-app属性定义）；第二个参数是依赖列表，字符串数组
angular.module('myApp',[])//引用模块
.run(function($rootScope) {
$rootScope.name = "World";
});
第 4 章 作用域（scope）
Angular启动并生成视图时，自动为ng-app和
可以在模板中使用的标记
- 指令 : 将DOM元素增强为可复用的DOM组件的属性或元素。ng-前缀的标签或属性
- 值绑定 : 模板语法{{ }}可以将表达式绑定到视图上。
- 过滤器 : 可以在视图中使用的函数,用来进行格式化。
- 表单控件 : 用来检验用户输入的控件。
$scope的生命周期
当angular认为$scope已经无用时，会自动销毁。
可者也可以手动销毁：
$scope.$destory()
指令一般不会自动创建$scope，除了ng-controller,ng-repeat
第 5 章 控制器
控制器的初始化，可以这样写，但不建议写太多这样的全局变量
function FirstController($scope) {
$scope.message = "hello";
}
更佳的方式创建一个模块
var app = angular.module('app',[]);
app.controller('FirstController',function($scope) {
$scope.message = "hello";
});
控制器可以嵌套，$scope中定义的项在查找时与js语法相近，从最近的作用域逐层向外查找。
控制器尽量写得简洁，可以配合指令和服务来完成，而不是将所有的逻辑甚至dom操作写到其中
//简洁的控制器
angular.module('myApp',[]) .controller('MyController',function($scope,UserSrv) {
// 内容可以被指令控制
$scope.onLogin = function(user) {
UserSrv.runLogin(user);
};
});
第 6 章 表达式
Angular表达式的特性
- 所有表达式都在其所属的控制器内的使用域内运行，有访问$scope的权限
- 表达式发生TypeError和ReferenceError并不会抛出异常
- 没有流程控制功能，if else…
- 接受过滤器和过滤链
scope.
watch()侦听变量的变化
$scope.$watch("model",function(newVal,oldVal,scope){
})
$parse手动解析表达式
在线示例:http://jsbin.com/UWuLALOf/1/edit?html,js,output
第 8 章 指令简介
自定义HTML标签和指令
<my-better-video my-href="/goofy-video.mp4">
Caneventaketext</my-better-video>
创建一个指令
<my-directive my-url="http://www.baidu.com"
my-link-text="click me"></my-directive>
angular.module('myApp',[])
/* 两个参数，第一个参数是指令名，即标签，使用驼峰命名。转化为指令标签时使用-分割 第二个参数是方法，吐出一个对象，template是标签内容 */
.directive('myDirective',function() {
return {
restrict: 'E',template: '<a href="{{ myUrl }}"> {{ myLinkText }}</a>'
};
});
将指令的属性值与$scope绑定
angular.module('myApp',template: '<a href="{{ myUrl }}"> {{ myLinkText }}</a>'
};
});
restrict 属性的取值，可以有三种：
A 用于元素的 Attribute，这是默认值 E 用于元素的名称 C 用于 CSS 中的 class
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google">
</div>
angular.module('myApp',[])
.directive('myDirective',function() {
return {
restrict: 'A',replace: true,scope: {
myUrl: '@',//绑定策略
myLinkText: '@' //绑定策略 },
template: '<a href="{{myUrl}}">' +
'{{myLinkText}}</a>'
}; });
//在线示例:http://jsbin.com/eloKoDI/1/edit
一般情况下绑定的时候使用相同的名称，也可以定义不同的
scope: { myUrl: '@someAttr',//someAttr是自定义名称的指令属性 myLinkText: '@'//这个复用了相同的名字myLinkText }
第 11 章 Angular模块加载
模块上创建指令和服务
angular.module('myApp',[])
//服务
.factory('myFactory',function(){
var service = {}; 11
return service;
})
//指令
.directive('myDirective',function(){
return {
template: '<button>Click me</button>'
})
运行块.run
是angular应用中第一个被执行的方法
第 34 章 下一步
使用jqLite，是jquery的子库
使用angular.element(dom)可以得到一个jqLite对象
