使用angularJS的三个重要原因
- - Web前端 - ITeye博客如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担. 当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了.
使用angularJS的三个重要原因
标签：
angularjs
原因
| 发表时间：2014-04-22 00:03 | 作者：lxz8999
出处：http://www.iteye.com
如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担。当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了！在今天的这篇文章中，我们将介绍三个你应该使用Angular.js的重要原因，希望大家觉得有帮助！
原因一：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知道应该运行：
<html lang="en" ng-app>
添加Angular<script>标签到<head>标签里：
<head>
...meta and stylesheet tags...
<script src="lib/angular/angular.js"></script>
添加正常的HTML标签。AngularJS directive可以在HTML属性中被访问，而表单式将使用两个大括号来标示：
<body ng-controller="ActivitiesListCtrl">
<h1>Today's activities</h1>
<ul>
<li ng-repeat="activity in activities">
{{activity.name}}
</li>
</ul>
</body>
</html>
ng-controller directive设置了一个名字空间，这里我们可以添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象，可以用来创建一系列的对象元素。
当你想从Anguar中获取数据，你使用一个对应名字的controller方法，如下：
function ActivitiesListCtrl($scope) {
$scope.activities = [
{ "name": "Wake up" },
{ "name": "Brush teeth" },
{ "name": "Shower" },
{ "name": "Have breakfast" },
{ "name": "Go to work" },
{ "name": "Write a Nettuts article" },
{ "name": "Go to the gym" },
{ "name": "Meet friends" },
{ "name": "Go to bed" }
];
}
这里我们创建了一个方法，名字和前面的ng-controller directive一样，这样我们页面可以找到对应的Angular方法来执行。我们传递了$(scope)对象来访问模板中的activities列表。提供了activities对应的name，我们在页面中使用"{{expression}}"表达式展现出来。
或者你保存数据在服务器上，我们同样可以使用AJAX获取数据：
function ActivitiesListCtrl($scope) {
$http.get('activities/list.json').success(function (data) {
$scope.activities = data;
}
}
这里我们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式非常类似。
以上我们使用success方法确保数据返回，并且将数据绑定到了$scope上。
静态的列表显示的很好，但是这里我们希望能够根据用户选择自动排序。这里我们添加一个简单的下拉菜单：
<h3>Sort:</h3>
<select>
<option value="name">Alphabetically</option>
</select>
添加directive:
<select ng-model="sortModel">
最后，我们修改<li>标签来识别sortModel：
<li ng-repeat="activity in activities | orderBy: sortModel">
搞定！关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助我们通过选择的内容来过滤内容。
注意我们代码中没有监听用户的互动事件。没有使用callback或者事件处理。所有的这些都被Angular内部处理了。
当然AngularJS提供了我们一个完整的教程，帮助你创建一个web应用，如果大家有兴趣可以看看！
总结
AngularJS快速的成为了javascript的主流框架，帮助你专业的从事web开发
如果你寻找或者评估一个成熟的js前端框架的话，AngularJS应用成为你的评估对象之一。最重要的是：免费下载 - AngularJS.org。
原文链接：http://gbin1.com/gb/share/262.htm
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
原因一：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知道应该运行：
<html lang="en" ng-app>
添加Angular<script>标签到<head>标签里：
<head>
...meta and stylesheet tags...
<script src="lib/angular/angular.js"></script>
添加正常的HTML标签。AngularJS directive可以在HTML属性中被访问，而表单式将使用两个大括号来标示：
<body ng-controller="ActivitiesListCtrl">
<h1>Today's activities</h1>
<ul>
<li ng-repeat="activity in activities">
{{activity.name}}
</li>
</ul>
</body>
</html>
ng-controller directive设置了一个名字空间，这里我们可以添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象，可以用来创建一系列的对象元素。
当你想从Anguar中获取数据，你使用一个对应名字的controller方法，如下：
function ActivitiesListCtrl($scope) {
$scope.activities = [
{ "name": "Wake up" },
{ "name": "Brush teeth" },
{ "name": "Shower" },
{ "name": "Have breakfast" },
{ "name": "Go to work" },
{ "name": "Write a Nettuts article" },
{ "name": "Go to the gym" },
{ "name": "Meet friends" },
{ "name": "Go to bed" }
];
}
这里我们创建了一个方法，名字和前面的ng-controller directive一样，这样我们页面可以找到对应的Angular方法来执行。我们传递了$(scope)对象来访问模板中的activities列表。提供了activities对应的name，我们在页面中使用"{{expression}}"表达式展现出来。
或者你保存数据在服务器上，我们同样可以使用AJAX获取数据：
function ActivitiesListCtrl($scope) {
$http.get('activities/list.json').success(function (data) {
$scope.activities = data;
}
}
这里我们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式非常类似。
以上我们使用success方法确保数据返回，并且将数据绑定到了$scope上。
静态的列表显示的很好，但是这里我们希望能够根据用户选择自动排序。这里我们添加一个简单的下拉菜单：
<h3>Sort:</h3>
<select>
<option value="name">Alphabetically</option>
</select>
添加directive:
<select ng-model="sortModel">
最后，我们修改<li>标签来识别sortModel：
<li ng-repeat="activity in activities | orderBy: sortModel">
搞定！关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助我们通过选择的内容来过滤内容。
注意我们代码中没有监听用户的互动事件。没有使用callback或者事件处理。所有的这些都被Angular内部处理了。
当然AngularJS提供了我们一个完整的教程，帮助你创建一个web应用，如果大家有兴趣可以看看！
总结
AngularJS快速的成为了javascript的主流框架，帮助你专业的从事web开发
如果你寻找或者评估一个成熟的js前端框架的话，AngularJS应用成为你的评估对象之一。最重要的是：免费下载 - AngularJS.org。
原文链接：http://gbin1.com/gb/share/262.htm
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [angularjs 原因] 推荐：
学习AngularJS实例
- - Web前端 - ITeye博客怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引.
AngularJS表单验证
- - JavaScript - Web前端 - ITeye博客 通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. 表单验证 .
表单验证
. AngularJS基本特性介绍
- - ITeye博客使用AngularJS非常简单，如下：. 以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用. HTML执行表达式（Expressions）. AngularJS允许在HTML直接执行表达式，如下：.
angularjs与服务器交互
- - CSDN博客Web前端推荐文章真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互. 为了实现这一点，Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易.
AngularJS与服务器交互
- - JavaScript - Web前端 - ITeye博客 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码.
使用AngularJS构建大型Web应用
- - InfoQ cnAngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师 Brian Ford近日撰写了一篇 blog，分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义.
AngularJS的IE浏览器兼容性
- - JavaScript - Web前端 - ITeye博客 如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话，你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须：. a.确保JSON字符串能被正常解析（IE7需要），你可以使用JSON2或者JSON3来实现. b.不能使用自定义的元素标签，如（你只能使用属性的形式，如
）.
借助AngularJS写优雅的代码
- - 四火的唠叨接触 AngularJS还真有点碰巧，在用JQuery写数据绑定的时候，我被数据对象和DOM之间的同步整烦了，要写一大堆方法绑定和取值/设值的代码逻辑，丑得要死. 数据对象发生变更以后，要及时更新DOM树；. 用户操作改变DOM树以后，要回头更新数据对象. 这个问题还是举例来说清楚一些，比如我定义了这样一个queryObj：.
AngularJS 最常用的八种功能
- - Web前端 - ITeye博客本文地址： http://zhaoyanblog.com/archives/99.html. 第一 迭代输出之ng-repeat标签. ng-repeat让table ul ol等标签和js里的数组完美结合. 你甚至可以指定输出的顺序：. 第二 动态绑定之ng-model标签. 任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，.