AngularJS简介
CrazyDogWang 2016-08-31
AngularJS简介
AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。
AngularJS是通过指令扩展了HTML，且通过表达式绑定数据到HTML。
地址：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
AngularJS通过ng-directives扩展了HTML。
ng-app指令定义一个AngularJS应用程序。
ng-model指令把元素之（比如输入域的值）绑定到应用程序。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
HTML5允许扩展的（自制的）属性，以data-开头。
AngularJS属性以ng-开头，但是您可以使用data-ng-来让网页对HTML5有效。
什么是AngularJS?
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
创建自定义的指令
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
可以通过以下方式来调用指令：元素名、属性、类名、注释
restrict 属性设置指令只能通过某些方式来调用
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
restrict 值可以是:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、
ng-invalid、ng-dirty、ng-pending、ng-pristine
AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
所有的应用都有一个 $rootScope(根作用域)，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
向指令添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<div ng-app="myApp" ng-controller="namesCtrl">
<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>
