DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> AngularJS學習手冊
AngularJS學習手冊
編輯:WEB前端代碼     

看書和視頻結合是學習的最高效方式,看了這本書之後對angularjs才算是有一定的理解了。這本書以搭建一個博客為線索講解了angularjs的知識點和實際項目開發流程。非常適合初學者!下面是我的讀書筆記。

 

一、傳統與AngularJS開發模式對比

傳統的web框架如Apache  Struts、SpringMVC等mvc框架是主流。web mvc框架完全在服務器運行,所有功能,比如說訪問數據庫、業務邏輯、顯示邏輯和UI活動都在服務器中完成,因此要消耗服務器的內存和資源。

傳統web框架通常會是在服務器端使用PHP、ASP、JSP等腳本渲染頁面,但是這樣會帶來很多維護方面的問題。不過這不是傳統方式最嚴重的問題,最嚴重的問題是傳統web框架在移動設備中大都運行緩慢,而與桌面用戶相比,移動設備的用戶更加不能忍受系統延遲和加載緩慢。因為所有的視圖、模型、控制數據庫都在後端,而用戶的硬件只起到了展示網頁的功能。

AngularJS是在移動設備高速普及的情況下,順應未來趨勢而生的客戶端js框架,它比起傳統的方式,整個Angularjs都運行在用戶的硬件中,而後端使用REST web服務處理業務邏輯,REST可以運行在任何地方,也可以使用任何編程語言編寫,流行使用JAVA的spring框架或者node.js平台下的Expressjs開發。Angular充分利用了用戶的硬件,完全解放了服務器,或者只讓服務器處理業務邏輯和數據存儲。能夠讓應用在任何設備下都能良好運行。

 

二、Angularjs的控制器

1、創建控制器

下面我創建了一個名為myApp的模塊,並且為這個模塊加上一個名為myAppctrl的控制器

var myApp = angular.module('myApp',[]);
//在angular對象上調用module方法創建了一個名為myApp的模塊。
myApp.controller('myAppctrl', ['$scope','$checkCreds','$location','$http', 
	//在剛剛創建的myApp的模塊上又調用了controller方法,定義此控制器的名字為
	//myAppctrl。並且[]為這個控制器的依賴,在angular中這稱為依賴注入
	function (){
	//回調函數
}]);

2、控制器的作用

控制器有兩個職責,第一個是初始化作用域中的模型屬性。創建控制器並將其附加到DOM中之後,會創建一個子作用域,子作用域中保存著一個所屬控制器專用的模型。子作用域可以通過$scope對象獲取。

我在控制器myAppctrl上添加了兩個屬性到作用域中name和number

var myApp = angular.module('myApp',[]);
//在angular對象上調用module方法創建了一個名為myApp的模塊。
myApp.controller('myAppctrl', ['$scope','$checkCreds','$location','$http', 
	//在剛剛創建的myApp的模塊上又調用了controller方法,定義此控制器的名字為
	//myAppctrl。並且[]為這個控制器的依賴,在angular中這稱為依賴注入
	function myAppctrl($scope){
	//回調函數
	$scope.name = "lq";
	$scope.number = "123";
}]);

接下來就可以在視圖模板中訪問剛剛添加的兩個模型屬性,訪問方法為雙花括號

<div><b>name:</b>{{name}}</div>
<div><b>name:</b>{{number}}</div>

控制器的第二個作用是把行為附加到$scope對象上。附加行為的方式是,在$scope對象上添加方法,在$scope對象上添加了一個changeName的方法

$scope.changeName = function(){
        $scope.name = $scope.cName;
        $scope.number = $scope.cNumber;
    }

那我們在視圖模板中怎麼使用這個方法呢?

我們使用ng-model="cName",ng-model="cNumber"向模型中添加兩個新屬性,然後使用ng-click="changeName();"調用剛剛添加到changeName方法。

<form>
    <div>
        <input type="text" ng-model="cName" required/>
    </div>
    <div>
        <input type="number" ng-model="cNumber" required/>
    </div>

    <div><button ng-click="changeName();">change Name</button></div>
</form>

 

三、Angular視圖

視圖由html代碼構成,外加一些指令。它是在運行時動態構建視圖,合並多個模板,渲染通過$scope對象傳入模板的屬性。渲染視圖的結果是純樣的html綁定在ng-view指令上。ng-repeat是十分常用的表現方式,它相當於是一個for循環,比如說你在控制器中的$scope對象上添加了一個存儲數據的json對象list,就可以采用ng-repeat指令來循環這個json對象並把它展現出來。

 

四、Angular模型

Angular模型保存在$scope對象中,$scope用於訪問某個控制器對應的模型。$rootScope是父級作用域,用於保存和訪問在多個控制器中使用的模型屬性。不過不建議使用$rootScope對象,一個應用中只有一個$rootScope對象,$scope對象是$rootScope對象的子作用域。在開發中我們只要在作用域定義好模型屬性,這些屬性就可以在視圖中訪問了,而不需修改視圖。

 

五、Angular的REST服務

rest服務(REpresentational state transfer)表現層狀態轉化服務的目的是“分離關注點”它是無狀態的。REST不能在會話中保存數據。REST服務所需的任何信息都應該放在客戶端傳給服務的請求和首部中。任何狀態都應該保存在客戶端,而不能保存在服務器,在Angular中保存狀態的方式很多,例如本地存儲、cookie或緩存。只有滿足以下條件的web服務才稱得是REST式服務:

  1、能通過URL訪問

  2、使用某種互聯網媒介類型如json交換數據

  3、使用標准的HTTP請求方法get post put delete

 

angularjs通過ajax請求異步調用rest服務,這種ajax請求基於$q服務的Promise對象和deferred對象實現。在angular中創建並注冊服務有三種方式

  1、使用service函數。  2、使用provider函數      3、使用factory函數(最常用)

 

angularjs與rest服務通信的方式:

  1、$http服務,這個服務通過浏覽器的XMLHttpRequest對象實現與rest服務的低層交互  2、$resource對象 這個對象提供與rest服務交互的高層方式,極大簡化了通信過程。

下面我定義了一個與rest服務交互的angularjs服務

var blogServices=angular.module('services',['ngResource']);
blogServices.factory('BlogPost', ['$resource', function($resource){
    return 
    $resource(url, paramDefaults, actions)
}])

 

六、服務和業務邏輯

不是所有業務邏輯都在rest服務中,這些業務邏輯通常要在多個控制器中使用,這個時候非rest服務就有用了。比如:

1、認證用戶,由於rest服務不能保存狀態,而且在服務器的會話中保存用戶的認證憑證有安全隱患,所以這時使用angularjs服務最好。

 

七、Angularjs指令

從用戶的角度,指令directive就是在應用的模板中使用的自定義html標簽。angularjs的html編譯器會解析指令,增強模板的功能。而這個編譯器不是正在意義的編譯而是搜索DOM樹,找出與指令關聯的html元素,找到所關聯的元素後,編譯器會構建模板,把事件附加到模板中的這些元素上。當然我們也可以自定義指令。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved