AngularJS特性

如果你不熟悉什么是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并不依赖于第三方的插件或者是框架,包括测试。如果你熟悉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

原文链接:http://gbin1.com/gb/share/262.htm

时间: 2024-09-30 19:44:54

AngularJS特性的相关文章

AngularJs 特性 之 MVC

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../../jslib/angular.min-1.5.8.js"></script> <script src="HelloAngular_MVC.js"></script> </head> <body&

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面

AngularJS 特性

单页Web应用(SinglePage) 顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作. 模板(template) 在AngularJS中,一个模板就是一个HTML文件.但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容. »  HTML模板将会被浏览器解析到DOM中. »  DOM然后成为AngularJS编译器的输入. »  AngularJS将会遍历DOM模板来生成一些指导,即

AngularJS学习笔记(1)

1.angularjs特性 mvc模式 模块系统 指令系统 依赖注入 双向数据绑定 2.$scope与$rootscope $scope是局部作用域,$rootscope是全局作用域. 配合ng-controller使用,查找变量时会先从当前作用域($scope)找到全局作用域($rootscope). 函数的形参$scope, $rootScope是不能修改的,testScope是在angular内部自动调用,这两个参数在内部调用时自动依赖注入了.这两个参数统一叫服务,一般服务以$开头. fu

对比jQuery和AngularJS的不同思维模式

jQuery是dom驱动,AngularJS是数据驱动,这里有一篇文章阐述的非常好,建议看看 本文来自StackOverFlow上How do I “think in AngularJS” if I have a jQuery background?一题中得票最高的回答.该回答得票超过3000次,回答者Josh David Miller是活跃于开源社区的开发者,也是Emergenesis公司的联合创始人.该答案最初由数云架构师韩铮翻译并发布在自己的博客上,在征得Josh同意后由韩铮本人推荐给 I

AngularJS入门基础系列—目录索引

AngularJS 特性 单页Web应用(SinglePage) 模板(template) Controller(控制器) Route(路由) Directive(指令) Filter(过滤器) AngularJS实现的一些小功能 演示AngularJS简单的双向绑定功能示例 菜单切换示例 TODOLIST的示例 冒泡排序算法视觉化 AngularJS介绍 我对AngularJS框架的理解

AngularJS实现的一些小功能

演示AngularJS简单的双向绑定功能示例 数据双向绑定这应该算Angular比较特有的属性,概括来说,Angular通过监听变量的变化来实现双向数据绑定.传统技术上,当model改变时,开发与人员需要手动处理DOM元素并将属性反映到变化中.而在Angular中,程序员可以轻轻松松解决这种问题,省掉了很多的代码. <!--本示例演示AngularJS简单的双向绑定功能--> <!doctype html> <!--html标签上加了一个 ng-app属性,意思是整个HTML

浅议Angular(一) -- AngularJS简介

Angular? 作为一款非常优秀的前端高级JS框架,区别于jQuery封装了很多DOM操作,AngularJS应用场景比较特殊,主要为数据呈现或交互等.从09年被Google收购以来,Angular在全球迅速普及,如今的Angular2有了颠覆式的变化. 现在针对Angular1.4.9的最新稳定版本进行简单的讨论. Angular用于快速构建SPA(单一页面应用程序). 单一页面应用程序只有一个页面,即整个应用程序的一个载体,其内容全部是由Ajax方式呈现出来的. 我们知道,传统网站的开发以

angular4.0和angularJS、react.js、vue.js的简单比较

angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 angularJS的一些问题 性能问题[(脏检查机制)在angular中被废除了,整体性能被提升 路由问题[(使用的是第三方模块)在angular中路由器是主要的机制 作用域问题[(不能用原生的事件,想用就要调用一个方法)在angular中任何原生的事件都可以直接处理 表单验证问题[在angular中提供