AngularJS基本特性介绍
HelloWorld
使用AngularJS非常简单,如下:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Hello {{'World'}}! </body> </html>
以指令ng-app定义AngularJS的作用域,然后引入angular-1.0.1.min.js,这就是AngularJS的HelloWorld,简单但是无用。
HTML执行表达式(Expressions)
AngularJS允许在HTML直接执行表达式,如下:
1+2 = {{1+2}}! #页面会显示 1+2 = 3!
一样的简单,同样的无用,因为在HTML直接写表达式会让代码一团糟,这样的功能最好不要用。
Directives(指令)
这个特性非常有用,这个特性扩展HTML的表现能力,通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令,下面来看一个例子,使用了内置的ng-repeat
<div ng-init="students = [ {name:'John', age:25, gender:'boy'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Sebastian', age:10, gender:'boy'}, {name:'Samantha', age:16, gender:'girl'} ]"> <div data-ng-repeat="student in students"> <h3>{{student.name}}:{{student.age}}</h3> </div> </div>
上例中,首先通过ng-init指令创建了一个students的对象数组,然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值,只显示boy:
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"> <h3>{{student.name}}:{{student.age}}</h3> </div>
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'" data-ng-switch="student.age >18"> <h3>{{student.name}}:{{student.age}}</h3> <p data-ng-switch-when="true">ADULT</p> </div>
这个特性比较杀手级,它为开发人员省了很多代码,对定义WebPageStructure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要,还支持定制Directive满足你的奇葩需求。
数据绑定(DataBinding)
在AngularJS中,只需要简单的使用ng-model就可以实现model和view的双向绑定,任何在view上的修改马上反应到Model,任何在Model数据上的修改马上反应到View的展示上。如下:
<div data-ng-repeat="student in students"> <h3>{{student.name}}:{{student.age}}</h3> Edit Name: <input type="text" data-ng-model="student.name"> </div>
过滤器(Filters)
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据,实现形式就是以‘|’字符分割expression:{{expression|filter1|filter2}}.例如:把student的名字全部展示为大写:
<div data-ng-repeat="student in students"> <h3>{{student.name|uppercase}}:{{student.age}}</h3> </div>
和Directive一样,Filter同样支持定制:http://docs.angularjs.org/guide/filter。
模块化(Modules)
在AngularJs中,应用可以拆分为一个个的小模块,模块之间可以相互依赖,这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
<html ng-app=“AngularJSSample”>
然后在javascript中,可以非常简单的获取到这个Module,
var AngularJSSample = angular.module('AngularJSSample', []);
之后,你可以为这个Module了添加你想要得东西了,比方说我们前面提到的定制filter和Directive等。例如为定义一个GreetFilter:
var AngularJSSample = angular.module('AngularJSSample', []); AngularJSSample.filter('greet', function() { return function(name) { return 'Hello, ' + name + '!'; }; });
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图(PartialViews)
AngularJS除了通过ng-app可以把一个应用拆成小模块,在模块中,还可以通过ngView定义的页面模板,然后和Route配合显示对应的View,这个特性对想写SinglePageApplication的同学非常有用。
依赖注入(DependencyInjection)
AngularJS中提供了config操作为一个Module注入依赖的Service,例如我想注入一个“$routeProvider"这个路由服务:
AngularJSSample.config(['$routeProvider', function($routeProvider){ }]) ;
路由(Routes)
AngularJS中,可以直接用javascript定义可用的路由,页面的跳转再也不用到服务器去走一圈了
AngularJSSample.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/students', { templateUrl: 'views/students.html', controller: 'studentsController' }).otherwise( { templateUrl: 'views/greeting.html' }) }]);
控制器(Controllers)
上面的例子中,使用了一个studentController,AngularJS中在module上使用controller操作可以为module定义一个Controller,Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作,然后通过$scope服把view需要的数据传递过去。为保证隔离性,在Controller中一定不要有任何与DOM相关的代码。定义一个controller如下:
AngularJSSample.controller(['studentController', function ($scope) { }]);
Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据,View都可以访问到。
AngularJSSample.controller(['studentController', function ($scope) { $scope.students = [ {name: 'John', age: 25, gender: 'boy'}, {name: 'Joy', age: 15, gender: 'girl'}, {name: 'Mary', age: 28, gender: 'girl'}, {name: 'Sebastian', age: 10, gender: 'boy'}, {name: 'Samantha', age: 16, gender: 'girl'} ]; }]);
小结
AngularJS自己定义一整套完整的逻辑,其对前端代码的规范性很有帮助,另外,内置的各种Directive会极大的减少开发人员的代码量;未来AngularJS+RestfulService可能会大行其道。
对AngualarJS的槽点有2个,第一,所有逻辑知识都暴露在JavaScript中,是否会导致一些安全问题,第二,官方的文档可用性极差啊。