AngularJS系列(一)——常用指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo4105/article/details/77893963
资料
学习参考：http://www.runoob.com/angularjs/angularjs-tutorial.html
概述AngularJS1.x是基于MVC的js架构。
jQuery是dom搜索驱动，AngularJS是数据驱动。对于熟悉jq的同学来说，学习使用Angular就用angular的方式思考实现、即数据的角度。而不用JQ的角度、即操作dom。
引用文件：angular.min.js
常用指令ng-app 指令ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
代码语言：javascript复制
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
2.1：绑定 HTML 元素到 HTML 表单。
代码语言：javascript复制
在输入框中尝试输入:
姓名:
你输入的为: {{ firstName}}
代码语言：javascript复制
验证实例代码语言：javascript复制
代码语言：javascript复制varvalidationApp = angular.module('validationApp', []);
validationApp.controller('mainController',function($scope) {
$scope.submitForm =function(isValid) {
if (isValid) {
alert('表单验证通过');
}
};
});
2.3：获得状态值(invalid, dirty, touched, error):
代码语言：javascript复制
2.4：CSS 类,ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：代码语言：javascript复制代码语言：javascript复制
编辑文本域，不同状态背景颜色会发送变化。
ng-model 指令根据表单域的状态添加/移除以下类：ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
重复元素 ng-repeat遍历数组输出，常用于表格重复
代码语言：javascript复制
{{$index}}
{{x}}
遍历数组对象
代码语言：javascript复制
{{x.name+ ',' + x.country}}
代码语言：javascript复制
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用