AngularJS開發下一代Web應用筆記(一)

1、寫在最前html

 

 

 

 

 

 

AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好而且可擴展的服務,包括數據綁定、DOM操做、MVC設計模式和模塊加載等。前端

如今網上JS框架茫茫多,真不知道是到底要學習什麼框架,學習了這個框架,說不定還沒用在項目,又有更好的js框架出來了。前端就是不斷折騰新東西,生命在於折騰~web

是的,這麼多的前端框架,是否是真的都要學習??答案固然不是,看所要完成的項目。這是帶個人前端前輩告訴我,具體使用什麼框架仍是不用框架,ajax

看項目需求,一切都以按時按質完成做爲選擇的標準。可是新的東西要學習,不學習就落後。後端

2、AngularJS的幾個重要概念有什麼設計模式

客戶端模板   舉個栗子:hello.html數組

模型/視圖/控制器(MVC)瀏覽器

數據綁定前端框架

依賴注入服務器

路由管理

指令(Angular的靈魂)

示例:購物車(源碼在最後

3、對這些概念的理解  

插個曲,Angular最適合用來作單頁web應用。在百度上查了單頁web應用的概念。如表:

單頁web應用(qq音樂)

單頁Web應用(single page web application,SPA),就是隻有一張Web頁面的應用。

單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

瀏覽器一開始會加載必需的HTML、CSS和JavaScript,全部的操做都在這張頁面上完成,都由JavaScript來控制。所以,對單頁應用來講模塊化的開發和設計顯得至關重要。

優勢:
1).良好的交互體驗(用戶不須要從新曬新頁面,獲取數據都是經過ajax異步獲取)
2).良好的先後端分離
3).減輕服務器壓力(服務器只用出數據, 不用管展現邏輯和頁面合成,吞吐能力會提升幾倍)
4)..共用一套後端程序代碼(不用修改後端程序代碼就能夠同時用於Web界面、手機、平板等多種客戶端)
缺點:
1).SEO難度較高
2).前進、後退管理( 全部的頁面切換須要本身創建堆棧管理)
3).初次加載耗時多(代碼合併、CDN)

像遊戲開發,頻繁操做DOM也不適合使用Angular
 
客戶端模板  
多頁面 單頁面
經過裝配和連接服務器上數據來建立HTML,而後將構建好的HTML頁面發送到瀏覽器。 Angular將模板和數據推送到瀏覽器中裝配他們,而後服務器角色只是爲模板提供靜態資源以及爲模板提供數據
 
 
模型/視圖/控制器(MVC)  

代碼中清晰的分離數據管理 (模型 )

及給用戶呈現數據 (視圖 )

C  應用程序邏輯 (控制器 )

Angular中的
M  模型中的數據即是存儲在對象中的屬性 (屬性值
V   文檔對象模型 (DOM)
C   控制器是 JavaScript
 
C和V之間的紐帶就是$scope
 
 
數據綁定 雙向綁定
ng-model 所謂的雙向綁定,無非是從界面的操做能實時反映到數據,數據的變動能實時展示到界面。
 
 
依賴注入 舉個栗子
程序運行過程當中,如需另外一個對象協做(調用它的方法、訪問他的屬性)時,無須在代碼中建立被調用者,而是依賴於外部容器的注入


在HelloController控制器中,$scope對象會把數據綁定自動傳遞給咱們;咱們不須要經過調用任何函數來建立他。只是經過將他防止在控制器的構造器中來請求它。

 
 
控制器helloController單詞首字母大寫
數據綁定  
該過程,沒有在輸入字段上註冊一個改變值的事件監聽器。
 
 
指令 Angular之能夠能夠編寫模板如HTML同樣,是由於框架核心包含了一個強大的DOM解析引擎。
擴展指令 例如:ng-controller。在HTML模板看到不屬於HTML規範的新屬性,這稱爲HTML擴展指令
自定義指令  本身定義本身須要的指令(聽說指令是Angular的靈魂)
 
 
附購物車源碼:
 
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    
</head>
<body ng-controller="CartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
        <span>{{item.title}}</span>
        <input ng-model="item.quantity">
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove($index)">Remove</button>
    </div>

</body>
<script src="../assets/js/angular-1.3.0.js"></script>
<script>
function CartController($scope){

    // currency是過濾器,用來轉換文本

    // $index參數   包含了它在ng-repeat的索引值

    //splice()   arrayObject.splice(index,howmany,item1,.....,itemX)

    // 定義一個一維數組存放對象
    $scope.items = [
        {title: 'Paint pots',quantity:8,price:3.95},
        {title: 'Polka dots',quantity:17,price:12.95},
        {title: 'Pebbles',quantity:5,price:6.95}
    ];

    $scope.remove = function(index){
        $scope.items.splice(index,1);
    }

}
</script>
</html>
View Code

 

 運行後結果:
 
 
 
 
 
 
 
 
 
 
 
自定義指令的圖解:
相關文章
相關標籤/搜索