几个月前第一次听说了angularjs这个框架，那时并没有什么好感。因为我偏执的认为angular这个名字很晦涩，不易记忆和理
解。直到最近项目中要用到它，我又不得不开始学习它，并在一天天的使用中爱上了它 ... ... （今天貌似情人节啊，谈爱字我才想起
来，大家七夕快乐哈哈）
angularjs 最酷炫的五大特性：双向绑定，依赖注入，mvc，模板，Directives。
学习angular，我觉得应该从它的指令开始学起。
AngularJS指令
AngularJS
通过被称为 指令 的新属性来扩展 HTML。
ng-app 指令：模块名。定义了
AngularJS 应用程序的 根元素，用于初始化一个
AngularJS 应用程序。
ng-init 指令：在html元素中直接为
AngularJS 应用程序定义初始值，初始化应用程序数据。但初始化一般在控制器或模块中进行。
ng-model 指令：绑定html元素到应用程序数据中的模板中。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令：对于集合中（数组中）的每个项会 克隆一次
HTML 元素，会重复一个 HTML 元素多次。（一般用于循环输出）
ng-bind 指令：把数据绑定到对应的
HTML元素上。（也可以直接将要输出的model放在html的双大括号内直接输出）
这些指令的具体应用看后面的实例，这里只是罗列出来让你心里好有个底。
ng-if ：在html中通过判断该html元素绑定的model的值的真假来决定该html元素是否显示。
ng-show / ng-hide：在html中通过判断该html元素中ng-show所绑定的model的值的真假，来控制该html元素是否显示。
ng-if和ng-show、ng-hide他们从表面上看非常像，但是ng-if只是用来做判断，值为true时只会显示里面的内容。而ng-if所在
的这个dom节点实际并不会被创建。（网上据说是这样的，时间匆忙还未来得及亲测。）
AngularJS表达式
AngularJS 使用 表达式 把数据绑定到
HTML。
AngularJS 表达式 与 JavaScript
表达式的异同：
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS 表达式写在双大括号内：{{ expression }}，就可以直接输出expression的值了。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
除此之外，angularjs的数字、字符串、对象、数组都跟js一样。
看一个ng-if 的实例：
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>选中单选按钮，则输出为：
Click me: Show when checked: This is removed when the checkbox is unchecked.
AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据，它是常规的 JavaScript 对象。
ng-controller 指令：定义了应用程序所在的控制控制器。
<div
ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
定义了ng-app的地方，表明是angular所控制的范围。应用程序在
<div> 内运行。定义了ng-controller="myCtrl" 的div，
表明这个div的控制器是myCtrl。然后JavaScript代码的myCtrl是这个控制器的定义。AngularJS
使用$scope 对象来调用控制
器。$scope
是一个应用象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS
Model(模
型)的对象。这段代码中控制器在作用域中创建了两个属性 firstName 和 lastName)。ng-model 指令绑定输入的值到控制器的属
性（firstName
和 lastName）。
AngularJS过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中，用于筛选、过滤、转换数据。
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
<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>
另外要过滤的值也可以是你绑定的某个model的值，除此之外你还可以自定义过滤器。
AngularJS服务
$http 是
AngularJS 中的一个核心服务，用于读取远程服务器的数据。（一般用来进行前后端数据交互）。
例如读取 一个外部JSON 文件（以下是存储在web服务器上的
JSON 文件）：
http://www.runoob.com/try/angularjs/data/Customers_JSON.php
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbk?p",
"City" : "Lule?",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "K?niglich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "K?benhavn",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "?rhus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
你可以这么获取刚才那个json文件：（$http.get(url)
是用于读取服务器数据的函数）
AngularJS 实例
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ‘, ‘ + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘customersCtrl‘, function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
这是我这几天的使用心得，我还会接着学习angular，未完待续。。。
版权声明：本文为博主原创文章，未经博主允许不得转载。