AngularJs是一个不错的用于开发SPA应用（单页Web应用）的框架。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，由JavaScript来控制不同view在这个页面上的呈现。本文源于Youtube上一个不错的AngularJs的入门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。个人认为这四个概念是AngularJs的核心，支撑起了AngularJs的骨架。掌握了他们对全局上把握AngularJs很有帮助。进阶则需要大量实践和官网API文档的阅读。
看看下图大致就可以了解AngularJs有何能耐。
首先从官网下载angular.min.js和angular-route.min.js。 可以从官网下载（https://angularjs.org/或https://code.angularjs.org/）
在VS中创建一个空的Empty Web项目。
Directive 和 Data Binding
AngularJs 中的Directive概念不是很容易理解，入门阶段可暂且将其理解为用来扩展HTML的一种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.
下面代码使用了两个Directive：ng-app 和 ng-model.
ng-app: 用于auto-bootstrap 一个AngularJs应用。这是必须的一个Directive，一般加在HTML的根对象上（如下代码所示）。更详细解释，移步官网：https://docs.angularjs.org/api/ng/directive/ngApp
ngModel： 用于在property和HTML控件（input,select, textarea）之间建立双向的Data Binding，也就是说HTML控件的值改变会反应到property上，反过来也同样成立。property就是通过{{}}创建的一个对象。
下面代码展示了将文本控件和name之间建立了Data Binding.
<!DOCTYPE html> <html ng-app> <head> <title>Using Directives and Data Binding Syntax</title> </head> <body> <div> Name: <input type="text" ng-model="name" /> {{name}} </div> <script src="https://www.jb51.net/angular.min.js"></script> </body> </html>
Directive可以用“x-”或者“data-”作为前缀。Directive可以放置于元素名、属性、class、注释中。
<!DOCTYPE html> <html data-ng-app=""> <head> <title>Using Directives and Data Binding Syntax</title> </head> <body> <div> Name: <input type="text" data-ng-model="name" /> {{name}} </div> <script src="https://www.jb51.net/angular.min.js"></script> </body> </html>
下面是HTML运行以后的结果。
下面例子展示了通过ng-init和ng-repeat来遍历操作一个数组的用法。
<!DOCTYPE html> <html data-ng-app=""> <head> <title>Iterating with the ng-repeat Directive</title> </head> <body> <div data-ng-init="names = ['Terry','William','Robert','Henry']"> <h3>Looping with the ng-repeat Directive</h3> <ul> <li data-ng-repeat="name in names">{{name}}</li> </ul> </div> <script src="https://www.jb51.net/angular.min.js"></script> </body> </html>
更多directve的用法，参考官网https://docs.angularjs.org/api
Filter
作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用于对数组过滤，对数组中的元素进行排序, 对数据做格式化处理等。
AngualrJS内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。
下面代码展示了数据过滤，排序和大小写转换的实现。每个Filter跟在数据后，并有|隔开。
<!DOCTYPE html> <html data-ng-app=""> <head> <title>Using Filter</title> </head> <body> <div data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'}, {name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'}, {name:'Henry Dow',city:'NewYork'}]"> Names: <br /> <input type="text" data-ng-model="name" /> <br /> <ul> <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> </ul> </div> <script src="https://www.jb51.net/angular.min.js"></script> </body> </html>
运行的结果：