AngularJS - 快速入门

刚开始接触时总是去wiki或各种百科以了解一番。
它们会告诉我一些MVVM、双向数据绑定、依赖注入等等名词，觉得这些名词好上档次，然后我很可能就不打算用这个东西了。AngularJS是什么？

完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术（ HTML、 CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

不考虑那些名词，本篇帮助你快速了解AngularJS的基本用法。文用的AngularJS版本为1.2.x，1.3.x中不再用本文中提到的方式声明controller。

先从这段开始：

<div ng-app="" data-ng-init="name="Kavlez""><p>Name: <input type="text" ng-model="name"></p><p ng-bind="name"></p>{{name}}{{6+8}}</div>

ng-app:定义一个AngularJS应用，被其包含的内容都属于该应用。
ng-init:初始化应用数据。
ng-model:将数据绑定到当前应用。
ng-bind:将应用中定义的变量在该标签中显示

AngularJS的指令都是以ng开头，或者也可以使用data-ng开头。 AngularJS的表达式用两个大括号表示:{{expression}}
这便是AngularJS最基本的功能：数据绑定。我们可以对各种类型进行绑定并显示：

Number<div ng-app="" ng-init="quantity=1;cost=5"><p>Total : ￥{{ quantity * cost }}</p></div>
String<div ng-app="" ng-init="firstName="Kavlez";lastName="Jin""><p>The name is {{ firstName + " " + lastName }}</p></div>
Object<div ng-app="" ng-init="person={firstName:"Kavlez",lastName:"Jin"}"><p>The name is {{ person.lastName }}</p></div>
ArrayPS: 可以使用ng-repeat进行迭代<div ng-app="" ng-init="myArr=[0,2,4,6,8]"><p ng-repeat="element in myArr">{{ element }}</p></div>

Controllers

我们用controller对一个AngularJS应用进行控制。
用ng-controller定义一个controller，声明所有被它包含的元素都属于这个控制器。例如：

<div ng-app="" ng-controller="personController"><h1>{{ person.name +" is a（an） "+person.job }}</h1><h1>{{ person.sayHi（） }}</h1></div><script>function personController（$scope） {$scope.person = [];$scope.person.name="Kavlez"$scope.person.job="brogrammer"$scope.person.sayHi = function（）{return "Hi！ I"m "+ $scope.person.name + ", I"m a（an） " + $scope.person.job;}}</script>

当然，我们应该使用更高效的组织方式。
AngularJS支持将Controller定义在其他js文件中，比如上面的例子可以改为：

<div ng-app="" ng-controller="personController"><h1>{{ person.name +" is a（an） "+person.job }}</h1></div><script type="text/javascript" src="js/app.js"></script>

Module

到目前为止，定义一个Angular app都用ng-app=""的方式。
可行，但是这个app下的变量和函数都是global的，而且会造成controller污染（pollute）。
而通常，我们用module把app组织起来。我们可以通过ng-app="名称"或angular.modele（）来声明一个module。
该方法有两个参数：

模块的名称
依赖列表

比如，之前的例子可以改为：

<div ng-app="myApp" ng-controller="fighterController"><script>var myApp = angular.module（"myApp",[]）;myApp.controller（"fighterController", function（$scope） {//..}</script></div>

如果将app和controller放到两个文件分别定义，则：

<div ng-app="myApp" ng-controller="fighterController"><script src="myApp.js"></script><script src="myAppControllers.js"></script></div>

myApp.js：var myApp = angular.module（"myApp",[]）; myAppControllers.js:myApp.controller（"fighterController", function（$scope） {//..}

Filter

这个东西可以加在表达式里面，改变表达式的输出格式。
我们可以用以下Filters：

Filter	Description
uppercase	转大写
lowercase	转小写
currency	转货币格式
orderBy	按指定属性排序
filter	按指定关键字进行过滤

前3种可以直接用在表达式中，比如：{{name | uppercase}}{{name | lowercase}}{{total | currency}} filter和orderBy通常用于数组：

<div ng-app="" ng-controller="fighterController"><input ng-model="search"/><ul><li ng-repeat="f in fighters|filter:search">{{ f }}</li></ul><script>function fighterController（$scope） {$scope.fighters = [{name:"Ryu",country:"Japan"},{name:"Ken",country:"USA"},{name:"Chun Li",country:"China"},{name:"GuiLe",country:"USA"},{name:"Zangief",country:"Russia"}];}</script></div>

当然，数据不会这样放在一个controller里。
我们可以通过$http来请求数据并进行绑定。
上面的例子可以改为：

function fighterController（$scope,$http） {var url = "请求地址";$http.get（url）.success（function（response） {$scope.fighters = response;}）}

AngularJS权威教程清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htmAngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里 本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-01/111996.htm