AngularJS根本特性介绍
日期：2014-05-16 浏览次数：20406 次
AngularJS基本特性介绍
Hello World
使用AngularJS非常简单，如下：
以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用。
HTML执行表达式（Expressions）
AngularJS允许在HTML直接执行表达式，如下：
一样的简单，同样的无用，因为在HTML直接写表达式会让代码一团糟，这样的功能最好不要用。
Directives（指令）
这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令，下面来看一个例子，使用了内置的ng-repeat
上例中，首先通过ng-init指令创建了一个students的对象数组， 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值，只显示boy：
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding）
在AngularJS中，只需要简单的使用ng-model就可以实现model和view的双向绑定，任何在view上的修改马上反应到Model，任何在Model数据上的修改马上反应到View的展示上。如下：
过滤器（Filters）
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据，实现形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示为大写：
和Directive一样，Filter同样支持定制：http://docs.angularjs.org/guide/filter。
模块化（Modules）
在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
然后在javascript中，可以非常简单的获取到这个Module，
之后，你可以为这个Module了添加你想要得东西了，比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
AngularJS中提供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
路由（Routes）
Hello World
使用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的Hello World，简单但是无用。
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>这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding）
在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等。例如为定义一个Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
AngularJS中提供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;
路由（Routes）
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
