日期:2016年5月27日

七步走 Angular.js 从菜鸟到专家 (系列列表)

Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应 用开发增加不少魔法变换。 头条推荐 现在就开始使用AngularJS的三个重要原因 要 知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout。而anguar.js是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架,第 二天发现这个框架已经被遗弃了吧!……>>详细 1 Angular.js为什么如此火呢? Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应 用开发增加不少魔法变换。 我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。… Read More

七步从AngularJS菜鸟到专家(7):Routing

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,这是"AngularJS – 七步从菜鸟到专家"系列的第七篇。 在第一篇,我们展示了如何开始搭建一个AngularaJS应用。在第四、五篇我们讨论了Angular内建的directives,上一篇了解了services的强大。 在这一章,我们来看几个前面没有机会细说的关键点,文章的最后会列举一些特别棒的学习资源链接和工具。 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可以看这里。 7. Routing 在单页面应用中,视图之间的跳转就显尤为重要的,随着应用越来越复杂,我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户。 咱们可以通过在主页面中引入不同的模板来支持不同页面的切换,但是这么做的缺点就是,越来越多的内嵌代码导致最后难以管理。 通过ng-include指令我们可以把很多的模板整合在视图中,但是我们有更好的方法来处理这种情况,我们可以把视图打散成layout和模板视图,然后根据用户访问的特定的URL来显示需要的视图 我们可以将这些“碎片”在一个布局模板中拼接起来 AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想 使用$routeProvider,我们可以更好的利用浏览历史的API并且可以让用户可以把当前路径存成书签以方便以后的使用 在我们的应用中设定路由,我们需要做两件事情:第一,我们需要指出我们存放将要存放新页面内容的布局模板在哪里。比如,如果我们想在所有页面都配上header和footer,我们可以这样设计布局模板:… Read More

七步从AngularJS菜鸟到专家(6):服务

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,这是"AngularJS – 七步从菜鸟到专家"系列的第六篇。 在第一篇,我们展示了如何开始搭建一个AngularaJS应用。在第五篇我们讨论了Angular内建的directives。在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用。 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可以看看这里。 目前为止,我们把注意力都放在了如何把视图绑定到$scope和如何用controller管理数据,从内存和效率角度出 发,controllers仅当需要的时候才会被实例化并在不需要的时候被丢弃掉,这就意味着每一次我们使用route跳转或者重载视图(我们会在下一篇 讨论routing),当前的controller会被销毁。 Services可以让我们在整个应用的生命周期中保存数据并且可以让controllers之间共享数据。 第六部分:Services Services都是单例的,就是说在一个应用中,每一个Serice对象只会被实例化一次(用$injector服务),主要负责提供一个接口把 特定函数需要的方法放在一起,我们就拿上一章见过的$http Service来举例,他就提供了访问底层浏览器的XMLHttpRequest对象的方法,相较于调用底层的XMLHttpRequest对 象,$http API使用起来相当的简单。… Read More

七步从AngularJS菜鸟到专家(4和5):指令和表达式

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,这一篇包含了"AngularJS – 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式)。 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用。在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能。 通 过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故 事,并在我们的浏览器里播放它们。完成版的Demo可以看这里(http://www.ng-newsletter.com/code%20/beginner_series/) 第四部分 指令属性 目前为止,我们已提到过几次“指令属性”的概念,但从未深入探讨过它到底是什么。实际上,“指令属性”就是绑定在DOM元素上的函数,它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等等等。 当浏览器启动、开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析。 当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始,如我们在本系列第一篇里所提过的),解析HTML,寻找这些指令属性函数。 当在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。 每个指令属性都有自己的优先级,在我们关于指令属性的专题文章里(http://www.ng-newsletter.com/posts/directives.html),你可以找到更深入的信息。 Angular.js应用的动态性和响应能力,都要归功于指令属性。之前我们已经看过一些指令属性的用例:… Read More

七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,这是"AngularJS – 七步从菜鸟到专家"系列的第三篇。 在第一篇,我们展示了如何开始搭建一个AngularaJS应用。第二篇我们讨论了scope和 $scope 的功能。 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可以看这里。 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点。这一步建立起了文本输入框跟页面的双向绑定。 在这个语境里“双向”意味着如果view改变了属性值,model就会“看到”这个改变,而如果model改变了属性值,view也同样会“看到”这个改变。Angular.js 为你自动搭建好了这个机制。如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作。 要建立这个绑定,我们在文本输入框上使用ng-model 指令属性,像这样:… Read More

七步从Angular.JS菜鸟到专家(2):Scopes

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,这是"AngularJS – 七步从菜鸟到专家"系列的第二篇。 在第一篇我们展示了如何开始搭建一个Angular应用。在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如何更好地运用它。 在这个系列教程里,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放。完成版的Demo可以看这里。 第二部分 Scopes $scope是一个把view(一个DOM元素)连结到controller上的对象。在我们的MVC结构里,这个 $scope 将成为model,它提供一个绑定到DOM元素(以及其子元素)上的excecution context。 尽管听起来有点复杂,但 $scope 实际上就是一个JavaScript对象,controller和view都可以访问它,所以我们可以利用它在两者间传递信息。在这个 $scope … Read More

七步从Angular.JS菜鸟到专家(1):如何开始

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。 很多前端应用的开发框架,比如Backbone、EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长 处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式,因为网络最初的设计无法提供 我们今天所需的交互性,于是我们需要框架,来帮我们填补JavaScript和HTML之间的鸿沟。 AngularJS 填上了这条鸿沟。 而且有了它,你不用再“直接”操控DOM,只要给你的DOM注上metadata(即AngularJS里的directive们),然后让AngularJS来帮你操纵DOM。 同时,AngularJS不依赖(也不妨碍)任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。 它就这么好用。听着挺厉害?是挺厉害的。通过这个七步系列,我们会带着你开始用AngularJS写厉害的应用——不管你之前有没有接触过。跟着我们,我们会教你成为一个专家级的AngularJS开发者。 不过首先我们得搞清楚:什么时候该用AngularJS? AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟其它框架(如jQuery)合作融洽。 如果你要开发的是单页应用,AngularJS就是你的上上之选。Gmail、Google… Read More

Angular.js为什么如此火呢?

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应 用开发增加不少魔法变换。 我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。 数据绑定和scopes(作用域) 首先第一个浮出大脑的问题是:angular支持数据绑定吗? 下面让我们来了解angular.js的数据绑定: Edit in plucker <body ng-app> <span>Insert your… Read More

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

AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout。而anguar.js是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架,第 二天发现这个框架已经被遗弃了吧! 在线演示1 如果你不熟悉什么是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来实现。… Read More