angular初体验（简单易学，适合新手）

几个月前第一次听说了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，未完待续。。。