如果你不熟悉什么是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
分享到:
相关推荐
《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...
angularjs入门,四个重要概念,三个重要对象,两个页面语法
学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了...我们都知道$watch有三个参数,第三个参数为true就是要深度监听的。这个参数主要是在嵌套对象的时候会用到,但
首先跟大家说一下这三个模块之间的关系。 1.数据模型(modal)主要提供数据。它不会和视图(view)直接操作。 2.controller保存modal提供的数据,与视图进行操作。 3.view是视图,也就是页面展示。 4.总而言之,...
对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。 请重置工作目录: git checkout -f step-2 我们的...
我们将利用Angularjs 和 ...初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 4.初步了解AngularJS的Scope对象的使用。 MVC模式的基本介绍: MVC是一种UI架构模式,它的目的是将应
今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入。 一.... 2.framework:这里一般放一些除了angularjs之外的第三方需要的前端框架(ui),比如bootstra
对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。 请重置工作目录: 代码如下: git checkout -f step...
为什么是这三个框架? 需要JS 我使用 RequireJS 对所有 JavaScript 进行模块化,无论是否基于 Angular。 AngularJS 考虑到 Angular 的设计目标,我们将 Angular 包括在内,作为一个功能强大的 JavaScript 框架的...
使用AngularJS和Sass构建SPA的模板。 依存关系 节点程序包管理器 -JavaScript Task Runner 很高兴有 -EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。 -Web程序包管理器 入门 更新...
毕业设计,基于SpringBoot+AngularJS+MySql开发的在线资源管理系统,内含Java完整源代码,数据库脚本 基于SpringBoot的在线资源管理系统(实质是个简单网盘) 首页的在线预览功能,需要自行寻找类似项目 项目主要...
我开始使用 Kinvey 主要是因为可以在服务器端运行脚本(而不是我开始使用的 Firebase)。 他们还有一个免费计划。 不过,我没有为会员工具使用任何服务器端脚本。 但是 Kinvey 相关的代码隐藏在几个小服务中,这些...
概要 通过在构建时注入模块依赖项来扩展 AngularJS 应用程序(使用静态代码转换)。 例如转换这个: ... 这种系统的主要用例是当您有一个基于 AngularJS 的应用程序并且您希望允许第三方模块(插件)扩
棱角分明 创建模块化 AngularJS 项目的新样板。 为您的项目使用 angular-fresh,您将使用 Angular 和 Bootstrap ... Gulp 有三个主要任务: gulp dev从 src 文件夹启动本地网络服务器 gulp build 将 JavaScript、Type
什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建)。它是一个第三方路由框架,允许通过状态机制组织接口,而... 三个主要文件 [removed][removed] <script src=angul
角结构这个项目是一个简单的结构思想,在项目 AngularJS 1.x 中遵循。文件和文件夹app - app 文件夹有用于引导项目的脚本 (main.js) 和用于创建 Angular 模块的脚本 (app.js)。 该文件夹将有另一个文件夹,这些...
前端是angularJS,后端是sailsJS 目前有一堆依赖,一些样式,和两个重要的前端文档index.html:此文档在 github 中设置样式并具有三个“cms-container”,每个“cms-form”和“cms-display”以及一个用于在每个字段...
总的来说,管理系统作为现代企业管理的重要工具,以其强大的数据处理能力、智能化的决策支持和高效的业务流程管理,有力推动了企业的数字化转型,助力企业在日益激烈的市场竞争中保持竞争优势。
yy_pinyougou 品优购商城项目 架构与e3mall略有不同