課件筆記壓縮day_第1頁
課件筆記壓縮day_第2頁
課件筆記壓縮day_第3頁
課件筆記壓縮day_第4頁
全文預覽已結(jié)束

下載本文檔

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

文檔簡介

1、復習:AngularJS 是一個 JS 框架,主要思路不是傳統(tǒng)的“先查找再操作 DOM 元素”,而是“以數(shù)據(jù)為中心”。適用于以數(shù)據(jù)操作為主的 SPA 應用。Angular 四大特性:(1)MVC 模型M:模型,即業(yè)務數(shù)據(jù),端應用中就是保存在特定范圍的 JS 變量View:視圖,即業(yè)務數(shù)據(jù)在用戶面前的呈現(xiàn),端應用中就是HTMLController:控制器,負責業(yè)務數(shù)據(jù)的獲取、修改、刪除等, (2)雙向數(shù)據(jù)綁定依賴注入模塊化(Module)設(shè)計體現(xiàn)“高聚合低耦合”設(shè)計原則端應用中由function 來擔當。學習目標:復習并擴展MVC 模型雙向數(shù)據(jù)綁定重點&偏難 (3)依賴注入次重點&簡單復習 MV

2、C 模型在一個Angular 應用中可以某個模塊可以依賴于其他的模塊多個模塊(module)(3)有一個模塊必須 (4)一個模塊中可以 1)controller 2)directive3)service 4)filter 5).給ngApp 指令啟動模塊多種組件,如:2.控制器的作用范圍/作用域面試題: AngularJS 與jQuery 的關(guān)系?jQuery 操作思路:先找元素,再操作元素$().();AngularJS 操作思路:創(chuàng)建業(yè)務數(shù)據(jù)、綁定數(shù)據(jù)、數(shù)據(jù)AngularJS 已經(jīng)把底層/低級的DOM 操作,為開發(fā)者封裝起來了AngularJS 在加載時會查看當前頁面是否已經(jīng)加載了 jqu

3、ery.js(就是判斷 window.jQuery 是否存在),若存在則所有的DOM 操作全都使用jQuery 提供的方法;若不存在,則 anglarJS 會使用自定義的jQuery精簡版本jqLite只有 jQuery 的 方法。每次調(diào)用ngController 都會創(chuàng)建一個新的Controller 對象每個Controller 對象都有唯一的$scope 對象$scope 就表示當前控制器對象的有效范圍/作用域(4)在某個$scope 中模型數(shù)據(jù),一般情況下不能被其他的控制器所使用。(5)若想在多個控制器間共享/傳遞數(shù)據(jù),可以 (ngApp)只有一個唯一的$rootScope 對象在根作用

4、域中$rootScope每個 Angular 應用(6)控制器的本質(zhì)用途:用于劃分一個大型頁面中的不同的 DIV 塊每個這樣的塊中都有自己數(shù)據(jù),以及可以與其他塊共享的數(shù)據(jù)。的3.AngularJS 四大特性之二雙向數(shù)據(jù)綁定偏難&重點!(1)方向 1:M綁定到View,此后不論何時只要M發(fā)生改變,View 會自動立即同步更新。實現(xiàn)方法: 、ngBind、ngIf、ngRepeat、ngShow、ngChecked . 等等幾乎所有的顯示數(shù)據(jù)的指令都實現(xiàn)了方向 1 的綁定。練習:1)創(chuàng)建一個點擊計數(shù)器,有一個按鈕,只要點擊一次,立即顯示出點擊次數(shù)。2)仿寫輪播中的“前進/后退”按鈕,提示:忘掉傳統(tǒng)

5、的輪播!注意 img 的 src 屬性值可以賦值為一個M數(shù)據(jù),而此數(shù)據(jù)可以使用模型函數(shù)進行修改。(2)方向 2:View 綁定到M,把視圖中用戶可以修改的 HTML 元素即表單控件的值綁定到一個M變量上。此后,不論何時只要用戶修改了表單控件的值模型變量的值會立即隨之改變。變量真的被改變了, 可以使用實現(xiàn)方法: 只有 ngM$scope.$watch()函數(shù)對 M指令可以! 為了監(jiān)視到 M數(shù)據(jù)的值進行監(jiān)視。單行文本輸入域,ngMode 可以把value 屬性值綁定到M變量復選框,ngM單選框,ngM下拉框,ngM練習:可以把true/false 值綁定到M變量可以把當前選中的單選框的value

6、值綁定到M可以把當前選中的option 的value 值綁定到M變量變量1)實現(xiàn)一個簡易版的購物車計算器2)用戶“同意本站使用條款”則顯示“”按鈕;否則“”按鈕3)下拉選擇用戶頭像的名稱,旁邊立即顯示用戶選擇的頭像4)表格外勾選“全部選擇”復選框,則表格內(nèi)的所有復選框全部選擇4.ng 模塊中提供的service 組件(1)$rootScope (2)$erval (3)$timeout用于在所有的控制器間共享數(shù)據(jù)的服務周期性定時器服務定時器服務ng 模塊提供的directive 組件ngApp (2)ngInit (3)ngBind (4)ngIf (5)ngRepeatngClick: 為元

7、素綁定單擊事件的不能是全局函數(shù)ngMouseOver .函數(shù)只能是 M函數(shù)($scope.函數(shù)名=function(),(8)ngSrc: 為IMG指定src 屬性,但可以防止 404 請求錯誤(9)ngShow: 若賦值為true,則display:block;否則 display:none; (10)ngHide: 若賦值為true,則display:none;否則 display:block;如何壓縮 js 文件?Yahoo Usererface,YUI 項目中提供了一個很好用的壓縮程序:pressor可用于壓縮CSS、JS 文件。使用步驟:安裝Java 運行環(huán)境編寫JS/CSS 文件,用于壓縮運行pressor 工具,執(zhí)行壓縮提示:可以把pressor 配置為WebStorm 中的 FileWatcher,監(jiān)視 js/css 文件,實現(xiàn)自動的

溫馨提示

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

評論

0/150

提交評論