要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,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开发的产品,所以注定了你将有一个坚实的基础,相信它能够成为你的最佳选择!
类似 Backbone 或者 JavaScriptMVC,anguar是一个快速的前端开发解决方案。没有其它的插件或者架构足以开发数据驱动的web应用。下面列出了AnguarJS的一些特性:
$scope
对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的代码。View可以通过$routeProvider
对象来支配,所以你可以深度的链接和组织你的View和Controller,将他们变成导航URL。AngualrJS同时提供了无状态的Controller,可以用来初始化和控制$scope对象。<div>
标签来搭建的。你需要自己在CSS的class中定义相关的DOM层次结构。而使用AngularJS,你可以操作XML一样操作HTML,给你无穷的方式来完成标签和属性定义。AngularJS通过自己的编译器和directives来完成相关的设置。以上的这些基本的原则能够帮助知道你使用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的重复对象,可以用来创建一系列的对象元素。
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。