angularjs入门教程AngularJS导言和准备_第1页
angularjs入门教程AngularJS导言和准备_第2页
angularjs入门教程AngularJS导言和准备_第3页
angularjs入门教程AngularJS导言和准备_第4页
angularjs入门教程AngularJS导言和准备_第5页
免费预览已结束，剩余43页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

资资文社关登搜*上一 下一篇AngularJS入门：导言和准于angua学习AngularJS的一个好方法是逐步完成本，它将引导您构建一个完整的AngularJSweb应用程序。该web应用是一个Android设备的 件。通过本 阅读示例学习怎样使用AngulrJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图。学习如何使用AngularJS创建数据侦，且不需要进行DOM操作学种更好、更简单的方法来测试您的web应用程序学习如何使用AngularJS创建常见的web任务，例如更方便的将数据引入应创建一个可在任何浏览器中的工作的动态了解AngularJS与其它JavaScript框架之间的区别了解AngularJS如何实现数据绑定利用AngularJS的项目快速创建自己的项目创建和运试学习AngularJS标识资源(API) 无论是Mac、Linux或Windows环境中，您均可遵循本学习编程。您可以使用源代码管理版本控制系统Git获取本项目的源代码文件，或直接从网上本项目源代码文件的镜像归档压在Mac、Lnux或Windows系统中安装Java运行环境，进行单元测试时需要运行Java程序，以下命令可检测您的系统是否已安装Java运行环境：javajava-git /angular/angular-安装Git工具，然后用以下命令从 项目git /angular/angular-您的系统需运行HTTP服务器程序，如Apache等。如果您的系统没有安装HTTP服务器程序，建议安装Nodejs，它是一个运行JavaScrpt的高性能HTTP服务器程序。最后一件事要做的就是确保您的计算机安装了web浏览器和文本进 源代码文件包angular-phonecat，开始学习angular-：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0anguajs在入门分类，AnguarJS、入门。将本文加入收藏夹关于关于anguarjsAngularJS中国社查看angu 的文章 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资 文社关搜登录*下一篇AngularJS快速开于anguao开始学习AngularJS的一个好方法是创建经典应用程序“Helo使用您喜爱的文本编辑器，创建一个HTML文件，例如：oworld.html将下面的源代码到您的HTML文件在web浏览器中打开这个HTML文件<!doctype<!doctype<htmlng-o运行ong-ng-

<html<htmlng- oo

oAngularJS本示例演示AngularJS的双向数据绑定（bi-directionaldata编辑前面创建 oworld.html文档将下面的源代码到您的HTML文件刷新浏览器窗口<!doctype<!doctype<htmlng-Yourname:<inputtype="text"ng-model="yourname"o{{yourname||运行Youro<inputng-model="yourname" <inputng-model="yourname"你不需要为该应用另外一个事件侦或添加事件处理程序现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是式 记，作为AnguarJS编译器的指令。AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可应用程序逻辑（Logic）和行为应用程序逻辑和行为是您用JavaScript定义的控制器。AnguarJS与标准AJAX应用程序不同，您模型数据底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽您还可以扩展和添加自己特定的应这些服务可以非常方便的编写WEB应用：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0anguajs在入门分类，AnguarJS、入门。将本文加入收藏夹关于关于anguarjsAngularJS中国社查看angu 的文章anguajs:53说道：登录以回复anguajs:53说道：登录以回复朋友们有疑问或者建议尽管 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门00：引导程 日angugitcheckout-fstep-进入angular-gitcheckout-fstep- 按照下面的操作您可以在浏览器中./scripts/web-可以在独 令行终端运./scripts/web-或nodenodescripts/web-HttpServerrunningHttpServerrunning在浏览器中输入http://ocalhost:8000/app/index.html来我们的应用:[port-number]/[context-请配置服务器使其驱动angular-phonecat项目:[port-number]/[context-在浏览器中输 来问我们的应用了 <!doctype<!doctype<htmllang="en"ng-<metacharset="utf-<title>MyHTML<linkrel="stylesheet"<linkrel="stylesheet" <p>Nothinghere{{'yet'+ng-ng-<html<htmllang="en"ng-ng-

中添加ng-app属性即说明个<html>都是AngularJS作用域。开发者也可以在局部使用ng-app指令，

<divapp>，则AngularJS仅在

AngularJS ng-ng-双大括号绑定的表达式

<p><p>Nothinghere{{'yet'+'yet'+ 'yet'+

AngularJS表达式是一种类似于JavaScrpt的代码片段，AngularJS表达式仅在AngularJS的作用注入器(injector)将用于创建此应用程序的依赖注入 注入器将会创建根作用域作为我们应用模型的范AnglrJS将会根作用域中的DOM，从用ngApp标记的HTML开始，逐步处理DOM中指令和绑定。我工作中这些文件是干什么的？删除示例应用程序添加图像到添加数据文件(JSON)到添加Bootstrap文件到app/css/和app/img/试试把关于数算的新表达式添加到<p>1<p>1+2={{1+2：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0anguajs在入门分类，AnguarJS、入门。将本文加入收藏夹关于关于anguarjsAngularJS中国社查看angu 的文章 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门01：静态模 日angu `gitcheckout`gitcheckout-fstep-果<span>NexusFastjustgotfasterwithNexus<span>MotorolaXOOM™withWi-TheNext,NextGeneration<p>Totalnumberofphones:<p>Totalnumberofphones:本步骤往应用中添加了静态HTML列表，现在让我们转到步骤2以了解如何使用AngularJS动：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0anguajs在入门分类，AnguarJS、入门。将本文加入收藏夹关于关于anguarjsAngularJS中国社查看angu 的文章 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门02：AngularJS模 日gitcheckout-fstepgitcheckout-fstep-视图和发生变化，AnguarJS会实时更新结合点，随之更新视图。<htmlng-<htmlng- <bodyng-<ling-repeat="phonein 起来的AnguarJS

和

里面

ng-repeat="phonein

语句是一个AngularJS迭代器。这个迭代器AngularJS用第

作为模板为列表中的每一 创建一

元素正如我们在第0步时学到的，包裹 和phone.snippet周围的花括号标识着数据绑定。常量计算不同的是，这里的表达式实际上是我们应用的一个数据模型，这些我 控制器里面都设置好了模型和控制 functionfunctionPhoneListCtrl($scope)$scope.phones={"name":"Nexus"snippet":"FastjustgotfasterwithNexus{"name":"MotorolaXOOM™withWi-"snippet":"TheNext,NextGeneration{"name":"MOTOROLA"snippet":"TheNext,NextGeneration}——控制器方法的名字（在JS文件的ngConroller指令的值相匹配。

中） 里的数据此时与注入到我们控制器函数的作用域 ）相关联。当应用启动之后，会有一个作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有<bodyng-controller="PhoneListCtrl">标记内部的数据绑定有效。器。AglrS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。测describe(describe('PhoneCatcontrollers',{describe('PhoneListCtrl',it('shouldcreate"phones"modelwith3phones',function()varscope=ctrl=new示出为AnguarJS的代码创建一个单元测试是容易。正因为测试在软件开发中是必不可少的环以在Jasmine的主页或者JasmineWiki上获得相关知识。试./scripts/test-angular-在一个单独的终端上，进入./scripts/test-angular-

并且运 来启动试（Windows命令行下请输入.\scripts\test-server.bat来运行，后面命令运行方式类打开一个新的浏览器窗口，并且转到选择“Capturethisbrowserinstrictmode运

进试ChromeChrome:Runner.Total1tests(Passed:1;Fails:0;Errors:0)(2.00Chrome19.0.1084.36MacOS:Run1tests(Passed:1;Fails:0;Errors0)(2.00<p>Totalnumberofphones: 添加另<p>Totalnumberofphones:创建一个新的数据模型属性，并且把它绑定到模板上。例如$scope$scope.o= o,更新你的浏览器，确保显示出来“Helo,用一个迭代器创建一个简单<tr><th>row<trng-repeat="iin[0,1,2,3,4,5,6,<tr><th>row<trng-repeat="i<tr><th>row<trng-repeat="iin[0,1,2,3,4,5,6,i确定 改 之后单元测试失败，然后重新跑一：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹ovexiaoba在:51说道：登录以在step-0的文件夹里面用ovexiaoba在:51说道：登录以在step-0的文件夹里面用gitcheckout-fstep-0重置之后少了文件就是test/ib/下面的三个测试文件。所以用./scrpts/test-server.sh启动服务器测试就有问题。ovexiaoba在:01说道：登录以为什么我运行./scripts/test.sh 试，没有出现4下面的结果。 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门03：迭代器过 日gitcheckout-fstepgitcheckout-fstep-模 class="container-<divclass="row-<div<!--Sidebarcontent--Search:<inputng-<div<!--Bodycontent--<ul<ling-repeat="phoneinphones|

码数据绑定：这是AngularJS的一个特性。当页面加载的时候，AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性。phoneinphones| phoneinphones| 使 过滤器：filter函数使

的值来创建一个只包

记录的新数组

测describedescribe('PhoneCatApp',{describe('Phonelistview',function(){{;it('shouldfilterthephonelistasusertypesintothesearchbox',{expect(repeater('.phones 用的是AnguarJS端到端测试器提供的接口。node.js用户使用其他http服务器

:[port-访客 /angular-phonecat/step- 现在我们来看一下我们怎么让query模型的值出现在HTML的页面标你或许认为像下面这样在

PhoneGallery:

<body<bodyng-和如果你想让和

<htmlng-appng-动 <htmlng-appng-

ng- ng-的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBnd或者ngBindTemplate指<title<titleng-bind-template="PhoneGallery: Phone 块中加入下面这些端到端测试代码itit('shoulddisplaythecurrentfiltervaluewithinanelementwithidfunction()expect(element('#status').text()).toMatch(/Currentfilter:\s*$/); //alternativeversionofthelastassertionthattestsjustthevalueofthepid为刷新浏览器，端到端测试器会报告测试失败。为了让测试通过，编辑index.html，添加一 或 绑定，再加上Currentfilter:pid为<div<divid="status">Currentfilter:在端到端测试里面加一 语句，重新跑一遍。你将发现测试器暂停了！这样允许你有机会测试运行过程中查看你应用的状态。测试应用是实时的！你可以更换搜索内容来证明。稍有经验你就会知道，这对于在端到端测试中迅速找到问题是关键。：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLicense&&文档CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门04：双向绑 日gitcheckout-fstepgitcheckout-fstep-你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制排列的顺序。步骤3和步骤4之间最重要的不同在下面列出。你可以在里看到完整的差别。模Search:Search:<inputng-Sort<selectng- <option<ul<ling-repeat="phoneinphones|filter:query|

，这样我们的用户就可以选择我们提然后，

过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的

过滤以一个数组作为输入，一份副本，然后把副本重排序再输出到迭代器AngularJS在select元素和被用作orderBy过滤器的输入

functionfunctionPhoneListCtrl($scope)$scope.phones={"name":"Nexus"snippet":"FastjustgotfasterwithNexusS.","age":0},{"name":"MotorolaXOOM™withWi-"snippet":"TheNext,NextGenerationtablet.","age":1},{"name":"MOTOROLA"snippet":"TheNext,NextGenerationtablet.","age":2}$scope.orderProp=}我们修 属性来

模型——的数组——为每一个记录其增加了一个

属性。我们会我们在控制器代码里加了一

的默认

。如果我们不设置默认值，这个模我们的用户在下拉菜单选择一个顺序之前一直处于未初始化状 测describe(describe('PhoneCatcontrollers',function()function(){varscope,{scope=ctrl=newit('shouldcreate"phones"modelwith3phones',{it('shouldsetthedefaultvalueoforderPropmodel',{ Chrome:RunnerTotal2tests(Passed:2;Fails:0;Errors:0)(3.00ChromeChrome:RunnerTotal2tests(Passed:2;Fails:0;Errors:0)(3.00Chrome19.0.1084.36MacOS:Run2tests(Passed:2;Fails:0;Errors0)(3.00it('shouldbepossibletocontrolphoneorderviathedropdownselectfunction()//let'snarrowthedatasettomakethetestassertionsexpect(repeater('.phonesli','PhoneList').column('')).toEqual(["MotorolaXOOM\u2122withWi-Fi","MOTOROLAexpect(repeater('.phonesli','PhoneList').column('')).toEqual(["MOTOROLAXOOM\u2122","MotorolaXOOM\u2122withWi-在 控制器中，把设置 那条语句删掉，你会看到AlrJS会在下拉菜单中临时添加一个空白的选项，并且排序顺序是默认排序（即未排序）。 模板里面添加一个`{{orderProp}}绑定来实时显示它的值服务以及AnguarJS如何使用依赖注入。：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门05：XHR和依赖注 日 injection(DI)）

gitgitcheckout-fstep-数

[[{"age": "motorola-defy-with-"name":"MotorolaDEFY\u2122with"snippet":"Areyoureadyforeverythinglifethrowsyour]

functionfunctionPhoneListCtrl($scope,$http) $scope.phones=$scope.orderProp=}//PhoneListCtrl.$inject=['$scope',

们的

服务

HTTPHTTPfunctionfunctionPhoneListCtrl($scope,$http)'$'前缀命名习建服务，作用域方法，以及一些其他的AngularJSAPI都在名字前面使用一个‘$’前缀。不要使关于JS压缩

PhoneListCtrlPhoneListCtrl.$inject=['$scope',varvarPhoneListCtrl=['$scope','$http',function($scope,$http){/*constructorbody*/测

describe('PhoneCatcontrollers',function()function(){describe('PhoneCatcontrollers',function()function(){varscope,beforeEach(inject(function($httpBackend_,$rootScope,$controller)$httpBackend $httpBackendrespond([{name:'NexusS'},{name:'Motorolascope=ctrl=$controller(PhoneListCtrl,{$scope:我们使用

方法将$rootScope，$controller和$httpBackend服务实例注入到函数里。这些实例都来自一个注入器，但是这个注入器在每一个测试内部都会被重建。这样保证了每一个测试都从一个的起始点开始，并且每一个测试都和其他测试相互独立调 来为我们的控制器创建一个新的作用域函数和刚创建的作用域作为参数，传递给已注入 函数

将请求服务 注入到我们的 函数中。这是这个服务的一个伪版本，这样做产品环境中有助于处理所有的HR和JON请求。服务的伪版本允许你不用考虑原生I和全局状态——随便一个都能构成测试的噩梦——就可以写测试 方法来告诉$httpBackend服务来等待一个HTTP请求，并且告诉它如何对其进行响应。注意到，当我们调用$httpBackend.flush方法之前，响应是不会被发出的。it(it('shouldcreate"phones"modelwith2phonesfetchedfromxhr',{ {name:'Motorola在浏览器里，我们调

来清空（flush）请求队列。这样

服务回的prome（什么是promise请参见这里）能够被解释成规范的应答。我们设置一些断言，来验证数据模型已经在作用域里了。it('shouldsetthedefaultvalueoforderPropmodel'it('shouldsetthedefaultvalueoforderPropmodel',{;Chrome:RunnerTotal2tests(Chrome:RunnerTotal2tests(Passed:2;Fails:0;Errors:0)(3.00Chrome19.0.1084.36MacOS:Run2tests(Passed:2;Fails:0;Errors0)(3.00{{phones|在index.html末尾添加一 绑定，观察json格式的{{phones|$scope.phones=data.splice(0, $scope.phones=data.splice(0, ：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门06：与模 日 gitcheckout-fstepgitcheckout-fstep-注意到注意到现在phones.json 向[{[{ "motorola-defy-with-"imageUrl":"img/phones/motorola-defy-with-motoblur.0.jpg","name":"MotorolaDEFY\u2122withMOTOBLUR\u2122",]模<ul<ul<ling-repeat="phoneinphones|filter:query|orderBy:orderProp" ng- 属

，只需要使用ngSrc指令代替<img>的src属性就可

属性来进行绑定（<imgclass="diagram"{{phone.imageUrl}}">），浏览器会把AngularJS的{{表达式}}起一个向 {{phone.imageUrl}}的请求。因为浏览器载入页面 时

测itit('shouldrenderphonespecificlinks',{input('query').enter('nexus');element('.phoneslia').click();expect(browser().location().url()).toBe('/phones/nexus-现 ng- 属性。用像Firebug，ChromeWebInspector这样的工具，或 ng-者

：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门07：路由与多视 日gitcheckout-fstep-gitcheckout-fstep-

为了增加详细信息视图，我们可以拓展index.html来同时包含两个视图的模板代码，但是这

要把

AglrJS中应用的路由通过roteProvder来，它是rote服务的提供者。这项服务使得控制器、视图模板与当前浏览器的RL可以轻易集成。应用这个特性我们就可以实现深，它允许我们使用浏览器的历史(回退或者前进导航)和书签。

者require.js这两个模块（非AnguarJS的两个库）不同的是，AnguarJSApp模 config(['$routeProvider',function($routeProvider){when('/phones',{templateUrl:'partials/phone-list.html',controller:PhoneListCtrl}).when('/phones/:phoneId',{templateUrl:'partials/phone-detail.html',controller:PhoneDeotherwise({redirectTo:'/phones'}); 并且通过使用configAPI，我们请求用$routeProvider.whenAPI来定义我们的路由规则

当URL映射段为/phones时 列表视图会被显示出来。为了构造这个视图，AngularJS会phone-phone- 模板和PhoneListCtrl控制器phone-phone-当URL映射段

时 详细信息视图被显示出来。这

:phoneId是URL的变量分。为了构造 详细视图，AngulrJS会使用器。

模板

PhoneDetailCtrl我们重用之前创造过的PhoneListCtrl控制器，同时我们 的

控制器，把它存放在app/js/controllers.js文件里$route.otherwise({redirectTo:$route.otherwise({redirectTo:

s hone/:phoneId作为一个匹配当前URL的模板。所s

:符号的变量（此处变<!doctype<!doctype<htmllang="en"ng-functionfunctionPhoneDetailCtrl($scope,$routeParams)$scope.phoneId=}//PhoneDetailCtrl.$inject=['$scope',模 <html<htmllang="en"ng- <script <divng-注意，我们把index.html模板里面大部分代码移除，我们只放置了一个<div>容器，这 具有ng-view属性。我们删除掉的代码现在被放置在phone-list.html模板中： class class="container-<divclass="row-<div<!--Sidebarcontent--Search:<inputng-model="query">Sortby:<selectng- <option<div<!--Bodycontent--app/partials/phone-<ul<ul<ling-repeat="phoneinphones|filter:query|orderBy:orderProp" ng- TBDTBD:detailviewfor 测

it('shouldredirectindex.htmltoindex.html#/phones',{describe('Phonedetailview',{beforeEach(function(){it('shoulddisplayplaceholderpagewithphoneId',{expect(binding('phoneId')).toBe('nexus-试着在index.html上增加一个{{orderProp}}绑定，当你在列表视图上时什么也没变这是因为orderProp模型仅仅在PhoneListCtrl管理的作用域下才是可见的，这与<divview元素相关。如果你在phone-list.html模板中加入同样的绑定，那么这个绑定会按你设想的：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资文社 关搜登录*下一篇AngularJS入 日模gitcheckout-fstepgitcheckout-fstep- detail.html视图模板数除 {"additionalFeatures":"Contour{"additionalFeatures":"ContourDisplay,NearFieldCommunications(NFC),...","android":{"os":"Android"ui":"images":"storage":"flash":"ram":}}

functionfunctionPhoneDetailCtrl($scope,$routeParams,$http)$http.get('phones/'+$routeParams.phoneId+'.json').success(function(data)$scope.phone=}//PhoneDetailCtrl.$inject=['$scope','$routeParams', 模

{{表达式 {{表达式

<img<imgng-src="{{phone.images[0]}}"<ulclass="phone-<ling-repeat="imgin<imgng-<ul<span>Availabilityand<ddng-repeat="availabilityin<span>Additional测：

function(){varscope,$httpBackend,beforeEach(inject(function($httpBackend_,$rootScope,$routeParams,$controller)$httpBackend $httpBackend $routeParams.phoneId='xyz';scope=$rootScope.$new();ctrl=$controller(PhoneDetailCtrl,{$scope:it('shouldfetchphonedetail',{ Chrome:RunnerTotal3tests(Chrome:RunnerTotal3tests(Passed:3;Fails:0;Errors:0)(5.00Chrome19.0.1084.36MacOS:Run3tests(Passed:3;Fails:0;Errors0)(5.00同时，我们也添加一个端到端测试，指向NexusS详细信息页面并且验证页面的头部是“NexusS”。describe('Phonedetailview',function(){browser().navigateTo('../../app/index.html#/phones/nexus-it('shoulddisplaynexus-spage',{expect(binding('')).toBe('Nexus：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门09：过滤 日gitcheckout-fstep-gitcheckout-fstep-定制过

returnfunction(input)returninput?'\u2713': 上

模件

<script{{expression{{expression|filter<dd>{{phone.connectivity.infrared|<dd>{{phone.connectivity.gps|测test/unit/fdescribedescribe('filter',{describe('checkmark',function()it('shouldconvertbooleanvaluestounicodecheckmarkorcross',inject(function(checkmarkFilter){执

ChromeChrome:RunnerTotal4tests(Passed:4;Fails:0;Errors:0)(3.00Chrome19.0.1084.36MacOS:Run4tests(Passed:4;Fails:0;Errors0)(3.00现在让我们来 下AngularJS内置过滤器， ndex.html中加入如下绑定{{"lowercapstring"|uppercase{{{foo:"bar",baz:23}|json{{1304375948024|date{{1304375948024|date:"MM/dd/yyyy@h:mma"我们也可以用一个输入框来创建一个模型，并且将之与一个过滤后的绑定结合在一起。在inde.htl中加入如下代码：<input<inputng-model="userInput">Uppercased:{{userInput|uppercase：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码TheMITLicense&&文档 CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门10：事件处理 日gitcheckout-fstep-gitcheckout-fstep-functionfunctionPhoneDetailCtrl($scope,$routeParams,$http)$http.get('phones/'+$routeParams.phoneId+'.json').success(function(data)$scope.phone=$scope.mainImageUrl=$scope.setImage=function(imageUrl)$scope.mainImageUrl=}}//PhoneDetailCtrl.$inject=['$scope','$routeParams',

<imgng-src<imgng-src="{{mainImageUrl}}"<ulclass="phone-<ling-repeat="imgin<imgng-src="{{img}}"ng-我们把大

测

片。第二个测试点击几个缩略图并且验证主随之合理的变化。describedescribe('Phonedetailview',function()it('shoulddisplaythefirstphoneimageasthemainphoneimage',{expect(element('img.phone').attr('src')).toBe('img/phones/nexus-it('shouldswapmainimageifathumbnailimageisclickedon',function()elementelement('.phone-thumbsli:nth-child(3)img').click();element('.phone-thumbsli:nth-child(1)img').click(); o=function(name o=function(name) o'+(name||'world')+} ng- o('Elmo')">：：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码 TheMITLiense&&文档CCBY3.0furtherLee在入门分类，AngularJS、furtherLee、入门。将本文加入收藏夹 评论，您必须先登录AngularJS中文社区&&AngularJS英文官网&&代码TheMITLicense&&文档CCBY©2012 |PoweredbyWordPress&bbPress|[湘ICP 资资文社关登搜*上一 下一篇AngularJS入门11：REST和定 日gitcheckout-fstep-gitcheckout-fstep-模

<script src="lib/angular/angular-服angular.angular.module('phonecatServices',['ngResource']).factory('Phone',function($resource){return$resource('phones/:phoneId.json',{},query:{method:'GET',params:{phoneId

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论