入门教程：http://www.ituring.com.cn/minibook/303 ； http://angularjs.cn/tag/AngularJS

原因一：Google开发的框架

要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knockout。而anguar.js是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架，第二天发现这个框架已经被遗弃了吧！

其实这不是Google第一次尝试开发javascript的前端框架，大家可能还记得Web Toolkit，用来帮助你将java代码转化为javasscript代码。过去google的wave推广用它来开发项目。随着HTML5，CSS3和javascript的发展，Google发现web应用并非意味着只使用纯Java来实现。

AngularJS将帮助标准化的开发web应用结构并且提供了针对客户端应用的未来开发使用的模板

versin 1.0 发布在6个月前，已经被很多的应用实践过了，包括商业应用及其产品。Angularjs作为可选的架构必将成为整个开发社区的明星。因为AngualrJS是google开发的产品，所以注定了你将有一个坚实的基础，相信它能够成为你的最佳选择！

原因二：AngularJS非常全面

类似 Backbone 或者 JavaScriptMVC，anguar是一个快速的前端开发解决方案。没有其它的插件或者架构足以开发数据驱动的web应用。下面列出了AnguarJS的一些特性：

方便的REST： RESTful逐渐成为了标准的服务器和客户端沟通的方式。使用一行javascript代码，你就可以快速的从服务器端得到数据。AugularJS将这些变成了JS对象，作为Model，遵循MVVM(model view view-model)设计模式。

MVVM救星：Model将和ViewModel互动（通过$scope对象），将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的代码。View可以通过$routeProvider对象来支配，所以你可以深度的链接和组织你的View和Controller，将他们变成导航URL。AngualrJS同时提供了无状态的Controller，可以用来初始化和控制$scope对象。

数据绑定和依赖注入：在MVVM设计模式中的任何东西无论发生任何事情都自动的和UI通信。这帮助我们去除了wrapper，getter/setter方法或者class定义。AngularJS将帮助我们处理所有的这些内容，所以你可以处理数据像处理基本javascript数据类型，例如，数组一样简单。当然你也可以通过自定义处理复杂数据。正因为所有事情的发生都是自动的，所以你不必调用一个main()来执行你的代码，而是通过依赖关系来驱动。

可扩展的HTML：大多数的网站都是使用非语义的<div>标签来搭建的。你需要自己在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到<html>标签，这样Angular知道应该运行：

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

添加Angular<script>标签到<head>标签里：

  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 activities</h1>
  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. <h3>Sort:</h3>
  2. <select>
  3. <option value="name">Alphabetically</option>
  4. </select>

添加directive:

  1. <select ng-model="sortModel">

最后，我们修改<li>标签来识别sortModel：

  1. <li ng-repeat="activity in activities | orderBy: sortModel">

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

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

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

总结

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

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

使用AngularJS的三个重要原因的更多相关文章

  1. 现在就开始使用AngularJS的三个重要原因

    现在就开始使用AngularJS的三个重要原因 在线演示1 本地下载 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单 ...

  2. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  3. angularJS 服务三

    路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面 ...

  4. AngularJS进阶(三十七)IE浏览器兼容性后续

    IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...

  5. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  6. 精通AngularJS（三）深入scope，继承结构，事件系统和生命周期

    深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...

  7. AngularJS 第三天----作用域

    作用域的概念及其功能 AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用.由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重 ...

  8. angularjs的三目运算

    前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...

  9. angularjs笔记(三)

    AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. js字符串和数组方法总结

    字符串操作: concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() ...

  2. linux commands ---2 ,学习vim编辑器如何使用的方法。

    vim /data/yst.txt   打开一个文件之后,然后在命令行模式下,输入:help 可以调出 vim 的帮助文档. 然后会进入: 然后就可以查阅具体的帮助文档了,再也不用再网上找一些零散的v ...

  3. VPN工作原理

    引言 在过去几十年中,世界发生了很大的变化.现在很多公司除了处理本地或地区性事务外,还要考虑全球市场和物流的问题.很多公司在全国甚至全球都设有分支机构,而这些公司都需要做的一件事情就是:找到能够与分公 ...

  4. BNU OJ 50998 BQG's Messy Code

    #include <cstdio> #define _(l) int l #define ___(l,L) for (_(o)=0,x=l o*2;o<x;o++)O= L o; # ...

  5. -linux删除大量文件----rm,rsync

    要在linux下删除海量文件,比如有数十万个文件,此时常用的rm -rf * 就会等待时间很长.这时我们可以使用rsync快速删除大量文件. 1.建立一个空目录 mkdir -p /tmp/rsync ...

  6. Spring--AOP--面向切面编程

    AOP: 面向切面编程. 通过动态代理实现. AOP就3条线, 2条线给剪断. 实现:动态代理 如果实现interface的话, 用Proxy, InvocationHandler. 不实现inter ...

  7. 跳舞链 Dancing Links

    作为搜索里面的一个大头,终于刷了一部分题目了,跳舞链一般都有现成的模板来套...... 至于跳舞链的学习的话,我觉得http://www.cnblogs.com/grenet/p/3163550.ht ...

  8. (简单) POJ 1278 Catch That Cow，回溯。

    Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...

  9. [转载]七天学会NodeJS

    链接:http://nqdeng.github.io/7-days-nodejs/ NodeJS基础 什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS ...

  10. 数据分析与R语言-概念点（一）

    一.数据分析 1.数据分析的多层模型 常用的统计量 常用的算法 常用的数据分析工具 常见的报表 二.R语言 1.什么是R语言?     R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个 ...