使用AngularJS的三个重要原因

入门教程: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并不依赖于第三方的插件或者是框架,包括测试。如果你熟悉QUnitMocha 或者 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的三个重要原因,码迷,mamicode.com

时间: 2024-10-12 20:08:07

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

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

在线演示1 本地下载 原文链接:http://www.gbtags.com/gb/share/262.htm 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担.当然,这里有很多其它的前端开发框架,但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了!在今天的这篇文章中,我们将介绍三个你应该使用Angula

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

基于项目实例解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2.等待,直到DOM树构造完毕. 3.发现ng-app,自动进入启动引导阶段. 4.根据ng-app名称找到相应的路由. 5.加载默认地址. 6.Js顺序执行,加载相应模版页 sys_tpls/home.html 7.在此,可以看到index路由中只是填充了ui-view为sys_login的div模

angularJS 服务三

路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用 hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把

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

IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js --> jquery-1.7.2.js -->  jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11 --> IE8(本机系统不支持) --> IE10 angular-1.3.0.14 -->angular-1.2.0 相关代码如下: <div c

AngularJS(三)——在多个AngularJS controller之间共享数据

在MVC中,为了方便维护,针对不同业务会使用不同的controller.有时我们需要在不同的controller中共享数据,本文旨在解决这一问题. 1. 使用$rootScope直接绑定 AngularJS中有一个$rootScope对象,它是AngularJS中最接近全局作用域的对象,是所有$scope对象的最上层,可以简单理解为BOM中的window对象或Node.js中的global对象.最简单的方式是直接将要共享的数据绑定到$rootScope对象中: <!DOCTYPE html>

Angularjs基础(三)

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值ng-model指令 ng-model指令可以将输入域的值与AngularJS 创建的变量绑定. 实例: <div ng-app="myApp" ng-controller="myCtrl"> 名字:<input ng-model="name"> </div>

云服务器受欢迎的三个重要原因

云计算的兴起与发展,让云主机一路高歌走上了巅峰,云主机受到了中小企业和网站站长的爱戴,那么,云主机什么原因吸引了那么多的中小企业和站长们呢? (1)安全性和可靠性   云主机服务多台服务器,因此宕机的风险也会降低很多,抗灾能力也很强,对于企业来说,这是非常重要的,如果发生任何的问题,造成数据受损或者丢失的话,对于企业的损害是无法估量的,所以这也是为什么企业选择云主机的主要原因了. (2)租用价格便宜   云主机的服务一般都是分散在多台服务器的,因此可以充分的利用资源,降低硬件的成本和维护的费用,

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们成为维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJ

angularjs的三目运算

前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注"按钮状态变成"+关注",相反,点击"+关注"按钮变成"已关注"相应的背景颜色都需要发生改变. 点击事件里面改变按钮的背景颜色: angular.element(path).css('background', 'blue');//改变按钮的背景颜色