AngularJs学习(1)[控制器，过滤器]

http://www.runoob.com/angularjs/angularjs-expressions.html学习文档

AngularJs是一个Javascript框架，是一个用js编写的库。引入库

 
   < 
   script 
   src= 
   "http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js" 
   > 
   < 
   / 
   script 
   > 
  

１、一个简单的例子：

其中：

ng-app 指令告诉 AngularJS，<html> 元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

如果：去掉了ng-app，那么内容会直接显示出俩，不会正确执行代码

一、AngularJs是什么？

***AngularJs把应用和程序数据绑定到HTML元素

***AngularJs可以克隆和复制HTML元素

***AngularJs可以隐藏和显示HTML元素

***AngularJs可以在HTML元素背后“添加代码”

***AngularJs支持验证输入

二、AngularJs表达式：

***AngularJs在双大括号内：{ { expression }}

***AngularJs把数据绑定到HTML,这与ng-bind指令异曲同工

***AngularJs将表达式书写的位置输出数据

***AngularJs表达式和js表达式很像，可以是文字运算符和变量

实例：{ {5+5}}或者{ {firstName+""+lastName}}

　　　　　　结果：　

三、AngularJs模块应用

***AngularJs模块(module)定义了AngularJs应用

***AngularJs控制器(controller)用于控制AngularJs应用

***ng-app指明了应用，ng-controller指明了控制器

姓：
名：
姓名：朱珠你好

四、AngularJs模块应用

字符串：

　　　　　结果：　

数组：

　　　　结果：　

Javascript与AngularJs的区别：

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

　　结果：

重复元素：

***ng-repeat:

　　　　　结果：　

创建自定义指令：

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runDirective, 但在使用它时需要以 - 分割, run-directive:

元素名：

　　　　　　结果：　　　　

 
  其中　 属性也能获取到：<div run-directive></div> 
 

　类名也可以获取到：<div class="run-directive"></div>

可以添加restrict来指定:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model指令：将输入域的值与AngularJs的创建的变量绑定

　　结果：　

五、AngularJs双向绑定

修改输入域的值，AngularJs属性的值也将修改

　结果：

验证邮箱：　　在ng-show为true的时候显示提示信息

报错：　　　　　正确：

应用状态：　ng-model指令可以为应用数据提供状态值（invalid,dirty,touched,error）

invalid:不合法为true；　dirty:值改变为true； touched:触屏为true

若改变初始输入值：

css类：ng-model基于他们的状态为html提供css类：

没有输入和输入文字以后输入框背景颜色变化：　　　　　　　　　　　　　

总结指令 ：ng-invalid：验证失败 ng-valid：验证通过

ng-dirty：是否修改表单 ng-touched：是否和控件进行交互

ng-pristine：是否修改了表单　　　　　　　 ng-pending：任何为满足$asyncValidators的情况

六、scope的作用域

scope(作用域)是应用在HTML(视图)和javascript(控制器)之间的纽带

scope是一个对象，有可用的方法和属性

scope可应用在视图和控制器上

如何使用$scope：可以把它当作一个参数传递

scope是模型，是一个javascript对象，带有属性和方法，这些属性和方法可在视图和控制器中使用。

结果：

使用了ng-repeat指令时，每个重复项都访问了当前的重复对象：

每个<li>都可访问当前的重复对象，这里对应的是一个字符串，并使用变量x 表示。

结果：

根作用域：

六、AngularJs控制器

控制器方法一：

控制器方法二：（控制器可拥有变量和函数）

控制器方法三：

可以将js写在外部引入即可

其他实例：

关于controller作用域问题：

controller中，如果局部$scope和$rootScope都存在，且有相同的名字，{ {变量名}}指局部变量而不是全局变量，作用域只有当前controller；{ {$root.变量名}}是全局变量，在ng-app=""下任何一个controller中都能使用。如果没有$scope，只有$rootscope那么{ {变量名}}和{ {$root.变量名}}就没区别了。

七、AngularJs过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。