AngularJS（一）

在正文之前，先注意一点。
对于 HTML 应用程序，通常建议把所有的脚本都放置在元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

AngularJS表达式

指令	作用
ng-app	定义一个 AngularJS 应用程序
ng-model	把元素值（比如输入域的值）绑定到应用程序
ng-bind	把应用程序数据绑定到 HTML 视图
ng-init	初始化 AngularJS 应用程序变量（通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它）
ng-controller	指明了控制器
ng-repeat	对于集合中（数组中）的每个项会克隆一次 HTML 元素
ng-show	元素显示，参数值为true显示
ng-hide	元素隐藏，参数值为true隐藏
ng-disabled	元素禁用，参数值为true禁用
ng-click	元素点击事件
ng-if	条件事件
ng-switch	多条件判断

创建自定义指令

举一个菜鸟教程的例子：


<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

注意：使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
你可以通过元素名，属性，类名，注释来调用指令：
元素名：

<runoob-directive></runoob-directive>

属性：

<div runoob-directive></div>

类名：

<div class="runoob-directive"></div>

注释：

<!-- directive: runoob-directive -->

限制使用：

你可以限制你的指令只能通过特定的方式来调用。

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model

用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值，并且它可以根据表单域的状态添加/移除以下类：ng-empty，ng-not-empty，ng-touched，ng-untouched
，ng-valid，ng-invalid，ng-dirty，ng-pending，ng-pristine

ng-invalid:未通过验证的表单
ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true
ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过
ng-touched:布尔值属性，表示用户是否和控件进行过交互
ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

控制器

 <div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

过滤器

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="http://www.runoob.com/try/demo_source/namesController.js"></script>

</body>
</html>