AngularJS基础
一、AngularJS中的MVC与作用域
创建一个angular模块即ng-app所绑定区域，需要传递两个参数：
①模块名称，即ng-app所需要绑定的名称。ng-app="myApp"
②数组：需要注入的模块名称，不需要可以为空
在angul模块上，创建一个控制器controller，需要传递两个参数
①Colltroller名称，即ng-controller所绑定的名称
②Controller的构造函数,可以传入多个参数，包括$scope和rootScope以及各种系统内置对象
angularJS中的作用域
①$scope局部作用域，声明在$scope上的属性和方法只能在当前controller中使用
②$rootScope根作用域，声明在$rootScopr上的属性和方法可以在ng-APP所包含的任何区域使用，无论是否
为同一controller ，或是否在controller包含范围中
>>>若没有使用scope声明变量，而直接在HTML中使用ng-model绑定的变量作用域为：
1、如果n-model在某个ng-controller中，则此变量绑定到当前controller的$scope上
2、如果ng-model没有在任何一个ng-controller中，则此变量将绑定在$rootscope上
指令与表达式
ng-app：声明Angular所管辖的范围，一般只有一个
AngularJS常用指令]
ng-model 指令把元素值（比如输入域的值）绑定到应用程序的变量中
ng-bind 指令把应用程序变量中的数据绑定到 HTML 视图，可用表达式替代
<div ng-bing="name"></div>等效于<div>{{name}}</div>
ng-init 指令初始化 AngularJS 应用程序变量。(相当于input里面的value默认值)
表达式：双大括号包含表达式，可以包含文字运算符和变量。但表达式在网页加载瞬间会看到大括号，
所以可以用ng-bind=""替代
【指令】AngularJs中通过扩展HTML的属性提供功能，所以ng-开头的新属性被我们成为指令
MVC图解
二、AngularJS过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器可用于转换数据
示列
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
即将所有字符大写
三、AngularJS中的服务Service
内置服务：
>>> 使用内置服务,必须在Controller中通过函数的参数注入进来！！！！！
$location：返回当前页面的 URL地址。
$http:向服务器发送请求，应用响应服务器传送过来的数据,类似于Ajax
$timeout：相当于setTimeout();
$interval：相当于setInterval();
注：$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
四、AngularJS中的select
AngularJS 可以使用数组或对象创建一个下拉列表选项。
两种ng-option和能够-repeat都可以
五、表单与验证(重要)
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
示列代码：
<!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>用户名:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用户名是必须的。</span> </span> </p> <p>邮箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span ng-show="myForm.email.$error.email">非法的邮箱。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; }); </script> </body> </html>
解析：
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
