使用AngularJS的三个重要原因

标签来搭建的。你需要自己在CSS的class中定义相关的DOM层次结构。而使用AngularJS，你可以操作XML一样操作HTML，给你无穷的方式来完成标签和属性定义。AngularJS通过自己的编译器和directives来完成相关的设置。

使用HTML模板：如果你曾经使用过Mustache ， Hogan.js，或者handlerbars的话，你就可以快速的理解AngularJS的模板引擎语法，应为它是纯HTML的。AngularJS通过DOM浏览来完成此类功能，使用上面提到的directives。模板被作为DOM元素传递到Angular的编译器中，可以被扩展，执行或者重用。这很关键，这样一来你就拥有了DOM组件，而非字符串，允许你直接的操作扩展DOM树。

企业级别的测试：AnguarJS并不依赖于第三方的插件或者是框架，包括测试。如果你熟悉QUnit, Mocha 或者 Jasmine的话，那么对于理解Angular的单元测试和Scenario Runner来说就非常简单。

以上的这些基本的原则能够帮助知道你使用Angular来创建高效性能可维护的代码。只要你有代码保存数据，AnguarJS会帮助你处理所有的重量级内容，提供一个富客户端的超棒体验！

原因三：花几分钟就可以开始开发

学习Angular非常简单。添加几个属性到你的HTML中，你可以使用5分钟搭建一个应用！

添加ng-app directive到标签，这样Angular知道应该运行：

1. html lang="en" ng-app> 

添加Angular

1. head> 
2. ...meta and stylesheet tags... 
3.  script src="lib/angular/angular.js">script> 

添加正常的HTML标签。AngularJS directive可以在HTML属性中被访问，而表单式将使用两个大括号来标示：

1. body ng-controller="ActivitiesListCtrl"> 
2.   h1>Today‘s activitiesh1> 
3.   ul> 
4.    li ng-repeat="activity in activities"> 
5.      {{activity.name}} 
6.    li> 
7.   ul> 
8. body> 
9. html> 

ng-controller directive设置了一个名字空间，这里我们可以添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象，可以用来创建一系列的对象元素。

当你想从Anguar中获取数据，你使用一个对应名字的controller方法，如下：

1. function ActivitiesListCtrl($scope) { 
2.   $scope.activities = [ 
3.     { "name": "Wake up" }, 
4.     { "name": "Brush teeth" }, 
5.     { "name": "Shower" }, 
6.     { "name": "Have breakfast" }, 
7.     { "name": "Go to work" }, 
8.     { "name": "Write a Nettuts article" }, 
9.     { "name": "Go to the gym" }, 
10.     { "name": "Meet friends" }, 
11.     { "name": "Go to bed" } 
12.   ]; 
13.  } 

这里我们创建了一个方法，名字和前面的ng-controller directive一样，这样我们页面可以找到对应的Angular方法来执行。我们传递了$(scope)对象来访问模板中的activities列表。提供了activities对应的name，我们在页面中使用"{{expression}}"表达式展现出来。

或者你保存数据在服务器上，我们同样可以使用AJAX获取数据：

1. function ActivitiesListCtrl($scope) { 
2.   $http.get(‘activities/list.json‘).success(function (data) { 
3.     $scope.activities = data; 
4.   } 
5. } 

这里我们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式非常类似。

以上我们使用success方法确保数据返回，并且将数据绑定到了$scope上。

静态的列表显示的很好，但是这里我们希望能够根据用户选择自动排序。这里我们添加一个简单的下拉菜单：

1. Sort:

    
2.  
3.    "name">Alphabetically 
4.   

添加directive:

1. "sortModel"> 

最后，我们修改

标签来识别sortModel：

2. "activity in activities | orderBy: sortModel"> 

搞定！关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助我们通过选择的内容来过滤内容。

注意我们代码中没有监听用户的互动事件。没有使用callback或者事件处理。所有的这些都被Angular内部处理了。

当然AngularJS提供了我们一个完整的教程，帮助你创建一个web应用，如果大家有兴趣可以看看！

总结

AngularJS快速的成为了javascript的主流框架，帮助你专业的从事web开发

如果你寻找或者评估一个成熟的js前端框架的话，AngularJS应用成为你的评估对象之一。最重要的是：免费下载 - AngularJS.org。

使用AngularJS的三个重要原因,搜素材,soscw.com

使用AngularJS的三个重要原因

标签：com   http   style   class   div   code   java   c   log   javascript   tar   

原文地址：http://www.cnblogs.com/fuland/p/3699185.html