angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備

上傳人：洞*** IP屬地：北京上傳時間：2023-01-19 格式：DOCX 頁數(shù)：48 大小：880.49KB 積分：12 舉報 版權(quán)申訴

angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備_第2頁

angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備_第3頁

angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備_第4頁

angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備_第5頁

已閱讀5頁，還剩43頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

資資文社關(guān)登搜*上一下一篇AngularJS入門：導(dǎo)言和準(zhǔn)于angua學(xué)習(xí)AngularJS的一個好方法是逐步完成本，它將引導(dǎo)您構(gòu)建一個完整的AngularJSweb應(yīng)用程序。該web應(yīng)用是一個Android設(shè)備的件。通過本閱讀示例學(xué)習(xí)怎樣使用AngulrJS的客戶端數(shù)據(jù)綁定和依賴注入功能來建立可立即響應(yīng)用戶操作的動態(tài)數(shù)據(jù)視圖。學(xué)習(xí)如何使用AngularJS創(chuàng)建數(shù)據(jù)偵，且不需要進行DOM操作學(xué)種更好、更簡單的方法來測試您的web應(yīng)用程序?qū)W習(xí)如何使用AngularJS創(chuàng)建常見的web任務(wù)，例如更方便的將數(shù)據(jù)引入應(yīng)創(chuàng)建一個可在任何瀏覽器中的工作的動態(tài)了解AngularJS與其它JavaScript框架之間的區(qū)別了解AngularJS如何實現(xiàn)數(shù)據(jù)綁定利用AngularJS的項目快速創(chuàng)建自己的項目創(chuàng)建和運試學(xué)習(xí)AngularJS標(biāo)識資源(API) 無論是Mac、Linux或Windows環(huán)境中，您均可遵循本學(xué)習(xí)編程。您可以使用源代碼管理版本控制系統(tǒng)Git獲取本項目的源代碼文件，或直接從網(wǎng)上本項目源代碼文件的鏡像歸檔壓在Mac、Lnux或Windows系統(tǒng)中安裝Java運行環(huán)境，進行單元測試時需要運行Java程序，以下命令可檢測您的系統(tǒng)是否已安裝Java運行環(huán)境：javajava-git /angular/angular-安裝Git工具，然后用以下命令從項目git /angular/angular-您的系統(tǒng)需運行HTTP服務(wù)器程序，如Apache等。如果您的系統(tǒng)沒有安裝HTTP服務(wù)器程序，建議安裝Nodejs，它是一個運行JavaScrpt的高性能HTTP服務(wù)器程序。最后一件事要做的就是確保您的計算機安裝了web瀏覽器和文本進源代碼文件包angular-phonecat，開始學(xué)習(xí)angular-：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼TheMITLicense&&文檔 CCBY3.0anguajs在入門分類，AnguarJS、入門。將本文加入收藏夾關(guān)于關(guān)于anguarjsAngularJS中國社查看angu 的文章評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資文社關(guān)搜登錄*下一篇AngularJS快速開于anguao開始學(xué)習(xí)AngularJS的一個好方法是創(chuàng)建經(jīng)典應(yīng)用程序“Helo使用您喜愛的文本編輯器，創(chuàng)建一個HTML文件，例如：oworld.html將下面的源代碼到您的HTML文件在web瀏覽器中打開這個HTML文件<!doctype<!doctype<htmlng-o運行ong-ng-

<html<htmlng- oo

oAngularJS本示例演示AngularJS的雙向數(shù)據(jù)綁定（bi-directionaldata編輯前面創(chuàng)建 oworld.html文檔將下面的源代碼到您的HTML文件刷新瀏覽器窗口<!doctype<!doctype<htmlng-Yourname:<inputtype="text"ng-model="yourname"o{{yourname||運行Youro<inputng-model="yourname" <inputng-model="yourname"你不需要為該應(yīng)用另外一個事件偵或添加事件處理程序現(xiàn)在試著在輸入框中鍵入您的名稱，您鍵入的名稱將立即更新顯示在問候語中。這就是式記，作為AnguarJS編譯器的指令。AngularJS編譯器是完全可擴展的，這意味著通過AngularJS您可應(yīng)用程序邏輯（Logic）和行為應(yīng)用程序邏輯和行為是您用JavaScript定義的控制器。AnguarJS與標(biāo)準(zhǔn)AJAX應(yīng)用程序不同，您模型數(shù)據(jù)底層服務(wù)包括依賴注入，XHR、緩存、URL路由和瀏覽器抽您還可以擴展和添加自己特定的應(yīng)這些服務(wù)可以非常方便的編寫WEB應(yīng)用：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0anguajs在入門分類，AnguarJS、入門。將本文加入收藏夾關(guān)于關(guān)于anguarjsAngularJS中國社查看angu 的文章anguajs:53說道：登錄以回復(fù)anguajs:53說道：登錄以回復(fù)朋友們有疑問或者建議盡管評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門00：引導(dǎo)程日angugitcheckout-fstep-進入angular-gitcheckout-fstep- 按照下面的操作您可以在瀏覽器中./scripts/web-可以在獨令行終端運./scripts/web-或nodenodescripts/web-HttpServerrunningHttpServerrunning在瀏覽器中輸入http://ocalhost:8000/app/index.html來我們的應(yīng)用:[port-number]/[context-請配置服務(wù)器使其驅(qū)動angular-phonecat項目:[port-number]/[context-在瀏覽器中輸來問我們的應(yīng)用了 <!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作用域。開發(fā)者也可以在局部使用ng-app指令，

<divapp>，則AngularJS僅在

AngularJS ng-ng-雙大括號綁定的表達式

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

AngularJS表達式是一種類似于JavaScrpt的代碼片段，AngularJS表達式僅在AngularJS的作用注入器(injector)將用于創(chuàng)建此應(yīng)用程序的依賴注入注入器將會創(chuàng)建根作用域作為我們應(yīng)用模型的范AnglrJS將會根作用域中的DOM，從用ngApp標(biāo)記的HTML開始，逐步處理DOM中指令和綁定。我工作中這些文件是干什么的？刪除示例應(yīng)用程序添加圖像到添加數(shù)據(jù)文件(JSON)到添加Bootstrap文件到app/css/和app/img/試試把關(guān)于數(shù)算的新表達式添加到<p>1<p>1+2={{1+2：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼TheMITLicense&&文檔 CCBY3.0anguajs在入門分類，AnguarJS、入門。將本文加入收藏夾關(guān)于關(guān)于anguarjsAngularJS中國社查看angu 的文章評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門01：靜態(tài)模日angu `gitcheckout`gitcheckout-fstep-果<span>NexusFastjustgotfasterwithNexus<span>MotorolaXOOM?withWi-TheNext,NextGeneration<p>Totalnumberofphones:<p>Totalnumberofphones:本步驟往應(yīng)用中添加了靜態(tài)HTML列表，現(xiàn)在讓我們轉(zhuǎn)到步驟2以了解如何使用AngularJS動：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0anguajs在入門分類，AnguarJS、入門。將本文加入收藏夾關(guān)于關(guān)于anguarjsAngularJS中國社查看angu 的文章評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門02：AngularJS模日gitcheckout-fstepgitcheckout-fstep-視圖和發(fā)生變化，AnguarJS會實時更新結(jié)合點，隨之更新視圖。<htmlng-<htmlng- <bodyng-<ling-repeat="phonein 起來的AnguarJS

和

里面

ng-repeat="phonein

語句是一個AngularJS迭代器。這個迭代器AngularJS用第

作為模板為列表中的每一創(chuàng)建一

元素正如我們在第0步時學(xué)到的，包裹和phone.snippet周圍的花括號標(biāo)識著數(shù)據(jù)綁定。常量計算不同的是，這里的表達式實際上是我們應(yīng)用的一個數(shù)據(jù)模型，這些我控制器里面都設(shè)置好了模型和控制 functionfunctionPhoneListCtrl($scope)$scope.phones={"name":"Nexus"snippet":"FastjustgotfasterwithNexus{"name":"MotorolaXOOM?withWi-"snippet":"TheNext,NextGeneration{"name":"MOTOROLA"snippet":"TheNext,NextGeneration}——控制器方法的名字（在JS文件的ngConroller指令的值相匹配。

中）里的數(shù)據(jù)此時與注入到我們控制器函數(shù)的作用域）相關(guān)聯(lián)。當(dāng)應(yīng)用啟動之后，會有一個作用域被創(chuàng)建出來，而控制器的作用域是根作用域的一個典型后繼。這個控制器的作用域?qū)λ?lt;bodyng-controller="PhoneListCtrl">標(biāo)記內(nèi)部的數(shù)據(jù)綁定有效。器。AglrS使用作用域，同時還有模板中的信息，數(shù)據(jù)模型和控制器。這些可以幫助模型和視圖分離，但是他們兩者確實是同步的！任何對于模型的更改都會即時反映在視圖上；任何在視圖上的更改都會被立刻體現(xiàn)在模型中。測describe(describe('PhoneCatcontrollers',{describe('PhoneListCtrl',it('shouldcreate"phones"modelwith3phones',function()varscope=ctrl=new示出為AnguarJS的代碼創(chuàng)建一個單元測試是容易。正因為測試在軟件開發(fā)中是必不可少的環(huán)以在Jasmine的主頁或者JasmineWiki上獲得相關(guān)知識。試./scripts/test-angular-在一個單獨的終端上，進入./scripts/test-angular-

并且運來啟動試（Windows命令行下請輸入.\scripts\test-server.bat來運行，后面命令運行方式類打開一個新的瀏覽器窗口，并且轉(zhuǎn)到選擇“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:創(chuàng)建一個新的數(shù)據(jù)模型屬性，并且把它綁定到模板上。例如$scope$scope.o= o,更新你的瀏覽器，確保顯示出來“Helo,用一個迭代器創(chuàng)建一個簡單<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中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾ovexiaoba在:51說道：登錄以在step-0的文件夾里面用ovexiaoba在:51說道：登錄以在step-0的文件夾里面用gitcheckout-fstep-0重置之后少了文件就是test/ib/下面的三個測試文件。所以用./scrpts/test-server.sh啟動服務(wù)器測試就有問題。ovexiaoba在:01說道：登錄以為什么我運行./scripts/test.sh 試，沒有出現(xiàn)4下面的結(jié)果。評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門03：迭代器過日gitcheckout-fstepgitcheckout-fstep-模 class="container-<divclass="row-<div<!--Sidebarcontent--Search:<inputng-<div<!--Bodycontent--<ul<ling-repeat="phoneinphones|

碼數(shù)據(jù)綁定：這是AngularJS的一個特性。當(dāng)頁面加載的時候，AngularJS會根據(jù)輸入框的屬性值名字，將其與數(shù)據(jù)模型中相同名字的變量綁定在一起，以確保兩者的同步性。phoneinphones| phoneinphones| 使過濾器：filter函數(shù)使

的值來創(chuàng)建一個只包

記錄的新數(shù)組

測describedescribe('PhoneCatApp',{describe('Phonelistview',function(){{;it('shouldfilterthephonelistasusertypesintothesearchbox',{expect(repeater('.phones 用的是AnguarJS端到端測試器提供的接口。node.js用戶使用其他http服務(wù)器

:[port-訪客 /angular-phonecat/step- 現(xiàn)在我們來看一下我們怎么讓query模型的值出現(xiàn)在HTML的頁面標(biāo)你或許認為像下面這樣在

PhoneGallery:

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

<htmlng-appng-動 <htmlng-appng-

ng- ng-的時候它們已經(jī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:在端到端測試?yán)锩婕右?語句，重新跑一遍。你將發(fā)現(xiàn)測試器暫停了！這樣允許你有機會測試運行過程中查看你應(yīng)用的狀態(tài)。測試應(yīng)用是實時的！你可以更換搜索內(nèi)容來證明。稍有經(jīng)驗?zāi)憔蜁?，這對于在端到端測試中迅速找到問題是關(guān)鍵。：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLicense&&文檔CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門04：雙向綁日gitcheckout-fstepgitcheckout-fstep-你應(yīng)該發(fā)現(xiàn)除了搜索框之外，你的應(yīng)用多了一個下來菜單，它可以允許控制排列的順序。步驟3和步驟4之間最重要的不同在下面列出。你可以在里看到完整的差別。模Search:Search:<inputng-Sort<selectng- <option<ul<ling-repeat="phoneinphones|filter:query|

，這樣我們的用戶就可以選擇我們提然后，

過濾器后面添加一個orderBy過濾器用其來處理進入迭代器的

過濾以一個數(shù)組作為輸入，一份副本，然后把副本重排序再輸出到迭代器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=}我們修屬性來

模型——的數(shù)組——為每一個記錄其增加了一個

屬性。我們會我們在控制器代碼里加了一

的默認

。如果我們不設(shè)置默認值，這個模我們的用戶在下拉菜單選擇一個順序之前一直處于未初始化狀測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-在控制器中，把設(shè)置那條語句刪掉，你會看到AlrJS會在下拉菜單中臨時添加一個空白的選項，并且排序順序是默認排序（即未排序）。模板里面添加一個`{{orderProp}}綁定來實時顯示它的值服務(wù)以及AnguarJS如何使用依賴注入。：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼TheMITLicense&&文檔 CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門05：XHR和依賴注日 injection(DI)）

gitgitcheckout-fstep-數(shù)

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

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

們的

服務(wù)

HTTPHTTPfunctionfunctionPhoneListCtrl($scope,$http)'$'前綴命名習(xí)建服務(wù)，作用域方法，以及一些其他的AngularJSAPI都在名字前面使用一個‘$’前綴。不要使關(guān)于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服務(wù)實例注入到函數(shù)里。這些實例都來自一個注入器，但是這個注入器在每一個測試內(nèi)部都會被重建。這樣保證了每一個測試都從一個的起始點開始，并且每一個測試都和其他測試相互獨立調(diào) 來為我們的控制器創(chuàng)建一個新的作用域函數(shù)和剛創(chuàng)建的作用域作為參數(shù)，傳遞給已注入函數(shù)

將請求服務(wù) 注入到我們的函數(shù)中。這是這個服務(wù)的一個偽版本，這樣做產(chǎn)品環(huán)境中有助于處理所有的HR和JON請求。服務(wù)的偽版本允許你不用考慮原生I和全局狀態(tài)——隨便一個都能構(gòu)成測試的噩夢——就可以寫測試方法來告訴$httpBackend服務(wù)來等待一個HTTP請求，并且告訴它如何對其進行響應(yīng)。注意到，當(dāng)我們調(diào)用$httpBackend.flush方法之前，響應(yīng)是不會被發(fā)出的。it(it('shouldcreate"phones"modelwith2phonesfetchedfromxhr',{ {name:'Motorola在瀏覽器里，我們調(diào)

來清空（flush）請求隊列。這樣

服務(wù)回的prome（什么是promise請參見這里）能夠被解釋成規(guī)范的應(yīng)答。我們設(shè)置一些斷言，來驗證數(shù)據(jù)模型已經(jīng)在作用域里了。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中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門06：與模日 gitcheckout-fstepgitcheckout-fstep-注意到注意到現(xiàn)在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-現(xiàn) ng- 屬性。用像Firebug，ChromeWebInspector這樣的工具，或 ng-者

：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼TheMITLicense&&文檔 CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門07：路由與多視日gitcheckout-fstep-gitcheckout-fstep-

為了增加詳細信息視圖，我們可以拓展index.html來同時包含兩個視圖的模板代碼，但是這

要把

AglrJS中應(yīng)用的路由通過roteProvder來，它是rote服務(wù)的提供者。這項服務(wù)使得控制器、視圖模板與當(dāng)前瀏覽器的RL可以輕易集成。應(yīng)用這個特性我們就可以實現(xiàn)深，它允許我們使用瀏覽器的歷史(回退或者前進導(dǎo)航)和書簽。

者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來定義我們的路由規(guī)則

當(dāng)URL映射段為/phones時列表視圖會被顯示出來。為了構(gòu)造這個視圖，AngularJS會phone-phone- 模板和PhoneListCtrl控制器phone-phone-當(dāng)URL映射段

時詳細信息視圖被顯示出來。這

:phoneId是URL的變量分。為了構(gòu)造詳細視圖，AngulrJS會使用器。

模板

PhoneDetailCtrl我們重用之前創(chuàng)造過的PhoneListCtrl控制器，同時我們的

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

s hone/:phoneId作為一個匹配當(dāng)前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屬性。我們刪除掉的代碼現(xiàn)在被放置在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}}綁定，當(dāng)你在列表視圖上時什么也沒變這是因為orderProp模型僅僅在PhoneListCtrl管理的作用域下才是可見的，這與<divview元素相關(guān)。如果你在phone-list.html模板中加入同樣的綁定，那么這個綁定會按你設(shè)想的：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資文社關(guān)搜登錄*下一篇AngularJS入日模gitcheckout-fstepgitcheckout-fstep- detail.html視圖模板數(shù)除 {"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測：

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

模件

ChromeChrome:RunnerTotal4tests(Passed:4;Fails:0;Errors:0)(3.00Chrome19.0.1084.36MacOS:Run4tests(Passed:4;Fails:0;Errors0)(3.00現(xiàn)在讓我們來下AngularJS內(nèi)置過濾器， ndex.html中加入如下綁定{{"lowercapstring"|uppercase{{{foo:"bar",baz:23}|json{{1304375948024|date{{1304375948024|date:"MM/dd/yyyy@h:mma"我們也可以用一個輸入框來創(chuàng)建一個模型，并且將之與一個過濾后的綁定結(jié)合在一起。在inde.htl中加入如下代碼：<input<inputng-model="userInput">Uppercased:{{userInput|uppercase：：中文文檔AngularJS中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼TheMITLicense&&文檔 CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇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中文社區(qū)&&英文文檔AngularJS官網(wǎng)&&代碼 TheMITLiense&&文檔CCBY3.0furtherLee在入門分類，AngularJS、furtherLee、入門。將本文加入收藏夾評論，您必須先登錄AngularJS中文社區(qū)&&AngularJS英文官網(wǎng)&&代碼TheMITLicense&&文檔CCBY?2012 |PoweredbyWordPress&bbPress|[湘ICP 資資文社關(guān)登搜*上一下一篇AngularJS入門11：REST和定日gitcheckout-fstep-gitcheckout-fstep-模

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

angularjs入門教程AngularJS導(dǎo)言和準(zhǔn)備

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔