标签：js对象 页面 作用域 like size mode today 方向 分离
第一章 简单认识AngularJS
1、双向数据绑定
可通过ng-model监控输入
ng-app属性声明所有被其包含的内容都属于这个AngularJs应用，这也是我们在web应用中嵌套AngularJs的原因
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJs的影响
2、MVC模式
MVC是一种软件架构设计模式，它将表现从用户交互中分离出来；模型中包含应用的数据和与数据进行交互的方法，视图将数据
呈现给用户，而控制器则是二者之间的桥梁。
3、模块
使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块名称，第二个是依赖列表，也就是可以被注入
到模块中的对象列表。
angular.module(‘myapp‘,[]);//此方法是用来定义模块的
angular.module(‘myapp‘); //获取对模块的引用
开发大型应用时，我们会创建多个模块来承载业务逻辑
参数：
1、name ：模块的名称 字符串变量
2、requires： 包含了一个字符串变量组成的列表，每个元素都是一个模块名称
4、作用域 （scope）
作用域是构成AngularJs应用的核心基础
$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方
$rootScope是AngularJs中最接近全局作用域的对象
$scope 对象就是一个普通的JavaScript对象，我们可以在其上随意修改和添加属性
$scope对象在AngualrJs中充当数据模型，但与传统的数据模型不一样，它不负责处理和操作数据，只是视图和HTML之间的桥梁
，是视图和控制器之间的胶水
*****$scope的所有属性，都可以自动被视图访问到
可以使用$scope的$destory()的方法来清理作用域（尽管angualrJs会自己清理作用域）
5、多种标记
可以在AngularJs应用的模板中使用多种标记
指令：将DOM元素增强为可复用的DOM组件的属性或元素 指令通常不会创建自己的$scope,但也有例外，比如：ng-controller,ng-repeat会
创建自己的子作用域并将它们附加到DOM元素上
值绑定：模板语法{{}}可以将表达式绑定到视图上
过滤器：可以在视图中使用的函数，用来进行格式化
表单控件：用来检验用户输入的控件
6、控制器
AngularJs允许我们在视图中像调用普通数据一样调用$scope上的函数。
angularJs同其他js框架最主要的区别：控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作
它只是视图和$scope之间的桥梁。
AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。
控制器嵌套：（作用域包含作用域）
7、表达式
表达式特性：
1、所有的表达式都在其所属的作用域内部执行，并有访问$scope的权限
2、如果表达式发生了TypeError和ReferenceError并不会抛异常
3、不允许使用任何流程控制功能
4、可以接受过滤器和过滤器链
AngularJs 会在运行$digest循环的过程中自动解析表达式
AngularJS通过$parse这个内部服务来进行表达式的运算，将$parse服务注入到控制器中，然后调用它就可以实现手动解析表达式
8、 过滤器
过滤器用来格式化需要展示给用户的数据，AngularJs有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器
过滤器可以在html中使用 例如：{{123.456789 | number:2 }} 过滤器和参数之间用冒号分割； 使用多个过滤器时，用| 短竖线分割
也可以在js中使用过滤器
AngularJS提供的内置过滤器：
1、currency：可以将一个数值格式化为货币格式，但是也可以自定义货币符号
{{123 |currency }}
2、date :可以将日期格式化为需要的格式
年份格式化：
四位：{{today | date:‘yyyy‘}}
两位：{{today | date:‘yy‘}}
一位：{{today | date:‘y‘}}
还有月份、日期等格式 详见AngularJs权威教程page25
3、filter：可以从给定数组中选择一个子集，并将其生成一个新数组返回。
这个过滤器通常用来过滤需要进行展示的元素
第一个参数：
这个过滤器的第一个参数可以是字符串、对象、或是一个用来从数组中选择元素的函数
字符串：返回所有包含该字符串的元素（还可以通过加！表示不包含此字符串的所有元素）
例如：{{[‘Air‘,‘Lerner‘,‘Likes‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}
对象：AngularJs会将待过滤对象的属性同这个对象中的同名属性进行比较
{{[{
‘name‘:‘Ari‘,
‘city‘:‘San Franisco‘,
‘favorite Food‘:‘Pizza‘
},
{
‘name‘:‘Kate‘,
‘city‘:‘indian Franisco‘,
‘favorite Food‘:‘Pizza‘
}
] | filter:{‘favorite Food‘:‘Pizza‘} }}
函数：对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回
（也可以用自定义函数进行过滤，这个函数定义在$scope上）
第二个参数：用来指定预期值同实际值进行比较的方式
4、json
json 过滤器可以将一个JSON或js对象转换成字符串。
{{{‘name‘:‘Ari‘,‘City‘:‘San Francisco‘}| json }}
5、limitTo ：会根据传入的参数生成一个新的数组或字符串
例如：截取字符串的前三个字符
{{San Franisco is very cloudy | limitTo:3}}
截取字符串的后六个字符
{{San Franisco is very cloudy | limitTo-6}}
返回数组的第一个元素
{{[‘a‘,‘b‘,‘c‘,‘d‘] | limitTo: 1 }}
6、lowercase:将字符串转为小写
{{"San Franisco is very cloudy" | lowercase}}
7、number ：将数字格式化为文本，第二个参数可选：用来控制小数点后截取的位数
{{123.46789 | number:2}}
8、orderBy：可以用表达式对指定的数组进行排序
第一个参数：是用来确定数组排序方向的谓词（即根据什么来排序）
第二个参数：用来控制排序的方向（是否逆向）
9、uppercase:将字符串转为大写
{{"San Franisco is very cloudy" | uppercase}}
10、自定义过滤器
注意：angular.module(‘这里只能写ng-app的值‘,[]);
11、表单验证
AngularJs能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便
要使用表单验证，首先要确保表单form中有name属性
如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记
可以在input上使用的所有验证选项：
1、必填项：required
2、最小长度：ng-minlength=‘位数’
3、最大长度：ng-maxlength=‘位数’
4、模式匹配：ng-pattern=‘正则表达式’
5、电子邮件：type=‘email’
6、数字：type=‘number’
7、URL： type=‘url’
8、自定义验证：第十章讲
9、在表单中控制变量
根据表单的属性，可以对表单做出实时响应
formName.inputName.property
未修改的表单： formName.inputName.$pristine
修改过的表单： formName.inputName.$dirty
合法的表单： formName.inputName.$valid
不合法的表单： formName.inputName.$invalid
错误： $error对象，它包含当前表单的所有验证内容，以及它们是否合法的信息，用下面语句访问这个属性
formName.inputName.$error
第二章 指令简介
1、指令：自定义HTML元素和属性
指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径
2、HTML引导
当浏览器加载一个包含AngularJS应用的HTML时，我们只需要一小段简单的代码就能够启动AngularJs应用。
在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性的形式来使用，因此可以将它写到任何位置，但是写到<html>的开始标签上是最常规的做法：
内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用ng作为前缀。为防止命名冲突，不要在自定义指令前加ng前缀。
现在，在HTML元素中可以使用所有内置指令和自定义指令了。同时，基于JavaScript的原型继承机制，任何在这个根元素内部的指令只要能够访问作用域，就可以访问$rootscope。
这里的能够访问作用域指的是同DOM进行了链接，这个操作会在指令稍后的生命周期中进行。
3、我们的第一个指令
让我们来创建一个自定义指令：<my-directive></my-directive>
假设我们已经创建了一个完整的HTML文档，其中包含了AngularJS，并且DOM中已经用ng-app指令标识出了应用的根元素，当AngualrJs编译HTML时就会调用指令。
调用指令意味着执行指令背后与之相关的JavaScript代码，这些代码是我们用指令定义写出来的：
myDirective指令的定义是这样的：
angular.module(‘myApp‘,[])
.dirctive(‘myDirective‘,function(){
return {
restrict:‘E‘,
template:‘<a href="http://google.com">Click me to go to Gooogle</a>‘
}
})
通过AngularJs模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数用过返回一个对象。
因为我们之前在HTML里使用my-directive声明指令，因此指令定义必须以myDirective为名字
directive()方法返回的对象中包含了用来定义和配置指令的方法和属性。为了尽快掌握简单的属性定义，我们只用了restrict和template两个设置项来定义指令。
打开Chrome开发者工具，可以看到AngularJS在页面加载以及调用指令定义后生成的代码，AngularJS把生成后的代码提供给Chrome进行渲染
默认情况下，AngualrJS将模板生成的HTMl代码嵌套在自定义标签<my-directive>内部。
下面向指令定义中添加一些新的设置：我们可以将自定义标签从生成的DOM中完全移除掉，并只留下由模板生成的链接。将replace设置为true就可以实现这个效果：
angular.module("myApp",[])
.directive("myDirective",function(){
return {
restrict:‘E‘,
replace:true,
template:‘<a href="http://Google.com">Click me to go to Google</a>‘
};
});
再次看一下生成后的代码，会发现DOM原始的指令已经不见了，只有我们在模板中写的HTML代码。replace方法会用自定义元素取代指令声明，而不是嵌套在其内部。
我们把创建的这些自定义元素称为指令（用directive()方法创建），因为事实上指令并不需要创建一个新的自定义元素。
下面都是用来声明前面创建指令的合法格式：
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
你好你好
标签：js对象 页面 作用域 like size mode today 方向 分离
原文地址：http://www.cnblogs.com/WEI-web/p/6210132.html
