Day: May 27, 2016

七步走 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,但是我觉得还是百说不如一练。 数据绑定和scopes(作用域) 首先第一个浮出大脑的问题是:angular支持数据绑定吗? 阅读全文 2 七步从Angular.JS菜鸟到专家(1):如何开始 AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。 很多前端应用的开发框架,比如Backbone、EmberJS等,都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长 处,但它不必要地污染了开发者自己代码的对象空间,还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式,因为网络最初的设计无法提供 我们今天所需的交互性,于是我们需要框架,来帮我们填补JavaScript和HTML之间的鸿沟。 AngularJS 填上了这条鸿沟。 而且有了它,你不用再“直接”操控DOM,只要给你的DOM注上metadata(即AngularJS里的directive们),然后让AngularJS来帮你操纵DOM。 阅读全文 3 七步从Angular.JS菜鸟到专家(2):Scopes 这是"AngularJS – 七步从菜鸟到专家"系列的第二篇。 在第一篇我们展示了如何开始搭建一个Angular应用。在这一篇里,我们要讨论一个理解AngularJS运作原理所必须的基本概念,以及你如何更好地运用它。… 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,我们可以这样设计布局模板: <header> <h1>Header</h1> </header> <div class="content"> <div ng-view></div> </div> <footer> <h5>Footer</h5> </footer> ng-view指令将高速$routeProvider在哪里渲染模板 第二,我们需要配置我们的路由信息,我们将在应用中配置$routeProvider $routeProvider提供了两种方法处理路由:when和otherwise。 方法when接收两个参数,第一个设置$location.path(). (直接用“//”也没有问题) 第二个参数是配置对象,这个可以包含不同的键,我们可以简单的说几个 controller controller: 'MyController'… 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使用起来相当的简单。 Angular内建了很多服务供我们日常使用,这些服务对于在复杂应用中建立自己的Services都是相当有用的。 AngularJS让我们可以轻松的创建自己的services,仅仅注册service即可,一旦注册,Angular编译器就可以找到并加载他作为依赖供程序运行时使用, 最常见的创建方法就是用angular.module API 的factory模式 angular.module('myApp.services', ).factory('githubService', function() { var serviceInstance = {}; // 我们的第一个服务 return serviceInstance; }); 当然,我们也可以使用内建的$provide service来创建service。… 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应用的动态性和响应能力,都要归功于指令属性。之前我们已经看过一些指令属性的用例: ng-model <input ng-model="name" name="Name" placeholder="Enter your name"/> <h4>Your name: {{ name }}</h4> 试试看  ng-model指令属性(我们在之前的章节使用过它),被用来将DOM文本输入框的值,跟controller里的$scope model绑定起来。具体的实现过程,是在这个值上绑定了一个$watch函数(类似JavaScript里的事件监听函数)。 $watch函数(在使用时)运行在Angular.js的事件循环(即$digest循环)里,让Angular.js能够对DOM进行相应的更新。请关注我们关于$digest循环的高级文章! 在Angular.js应用的开发中,我们用指令属性来将行为绑定到DOM上。指令属性的使用,是一个 应用能否拥有动态性、响应能力的关键。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 指令属性,像这样: <div ng-controller="MyController"> <input type="text" ng-model="person.name" placeholder="Enter your name" /> <h5>Hello {{ person.name }}</h5> </div> 现在我们建立好了一个数据绑定(没错,就这么容易),来看看view怎么改变model吧: 试试看: 当你在文本框里输入时,下面的名字也自动随之改变,这就展现了我们数据绑定的一个方向:从view到model。我们也可以在我们的(客户端)后台改变model,看这个改变自动在前端体现出来。要展示这一过程,让我们在  MyController 的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 对象里,我们既存储数据,又存储将要运行在view上的函数。 每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope,它对应着含有 ng-app 指令属性的那个DOM元素。 如果页面上没有明确设定 $scope ,Angular 就会把数据和函数都绑定到这里, 第一部分中的例子就是靠这一点成功运行的。 在这个例子里,我们将使用 $rootScope 。在main.js文件里,我们给这个scope加一个name属性。把这个函数放进 app.run函数里执行,我们就保证了它能在应用的其他部分之前被执行。你可以把app.run函数看作是Angular应用的main方法。 app.run(function($rootScope) { $rootScope.name =… 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 Docs、Twitter和Facebook这样的应用,都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用,就不是AngularJS的用武之地了。 读过上面的介绍,现在是你学习AngularJS所要理解的第一个话题了: 1. 如何开始开发一个应用 在这个系列教程里,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里播出的最新故事,并在我们的浏览器里播放它们。完成版的Demo可以看这里:http://www.ng-newsletter.com/code/beginner_series/) 写AngularJS的应用,我们会一起写互动层面和展示层面。 这一开始可能让你觉得有点奇怪,特别是当你用过其他框架将这两个层面分别对待的框架时。然而一旦你摸到诀窍,AngularJS 的写法就会变成你的第二天性了。 让我们来看一个能用AngularJS开发的最简单的应用: <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body>… 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 name:</span> <input type="text" ng-model="user.name" /> <h3>Echo: {{user.name}}</h3> </body> 在这代码片段中,在我们解释细节之前,我还是希望尝试下其效果: 注:此刻暂时不要太心急去了解ng-app。 如你所见,我在input中输入的将会显示在后边echo。这是如何工作的?简单来说,angular的ng-model(更多关于指令的将在文章后续)给我带来了双向绑定机制。 如此是好,但是user.name存储在哪里呢?其存储在我们的$scope上,当我们在input中输入任何字符都会及时的更新scope对象上 的user.name属性。然后我们可以利用angular的表达式{{…}}现实在HTML中。所以当我们在input中输入时,其会及时更新 scope上的user,name属性,在由修改HTML显示。 好吧,这并不难,但是你所说的$scope是个什么东东呢?在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上,来达到双向你绑定。 这就好比: 这意味着我们我们从template上为$scope设置了一个属性对象user.name,所以我们也可以在controller中访问这个对象(user.name). 让我们来看个更复杂的示例: Edit in… 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来实现。 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对象。 数据绑定和依赖… Read More