angular中常見的核心理念
一、客戶端模版
在傳統多頁面web應用程序通過組裝和拼接數據來創造HTML(後臺進行相關操作,並形成HTML頁面),並將之發送至瀏覽器進行頁面解析。而某種程度上Ajax應用(即單頁面應用,異步更新)也可以實現對瀏覽器頁面傳送更新(局部)。而Angular則是後臺將數據和模版傳送到瀏覽器,然後再在瀏覽器中進行組裝、解析頁面內容。而這一過程中服務器僅作爲提供頁面靜態資源和所需數據而存在。
在這裏通過一個小小的例子來簡單的描述下
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
下面是controllers.js代碼
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
運行結果:
而當在input中進行輸入時,你會驚奇的發現,Hello字段會即時的更新爲你所輸入的文本內容,而這一些得益於其雙向的數據綁定特性,而其數據綁定通過ng-model和{{}}雙大括號進行綁定(在這裏不做詳細解釋)。
在上述例子中,我們可以很輕易的發現,瀏覽器不是直接輸出Hello,World的字符轉換,而是組織了可以改變的‘Hello",而個人理解是’,World'部分作爲模版中的內容固定不變,而我僅僅去改變我們需要的Hello文本部分內容。
而與我們當前使用的很多方法比較,我們可以發現angualr的一些特別之處:
【1】無需用class或id來區分綁定的事件監聽
【2】在HelloController中設置greet.text爲hello時,並未進行事件的註冊監聽,也沒有寫任何回調函數
【3】HelloController僅作爲一個普通的js類,並未繼承angular提供的任何東西,也無需創建$scope對象來進行數據獲取
二、模型(model)-視圖(view)-控制器(controller)------MVC
【1】MVC核心理念:在的代碼之間 明確分離管理數據(模型),應用程序邏 輯( 控制器),並將數據給用戶視圖
在angular中視圖層就是DOM,控制器js類,模型數據存儲在對象屬性中。
【2】MVC優點:代碼結構組織清晰,易於理解和程序的擴展,維護和測試
三、數據綁定
概念理解: 將頁面中某一部分映射到js屬性,讓其自動同步,數據的移動從一個地方到另一個地方也是大部分自動完成【結合上述例子進行理解】
四、依賴注入(DI):一種軟件設計模式,用來處理代碼間依賴關係
特性:由外接依賴注入,無需主動需要和尋找依賴,即不用通過new來創建對象便可以使用對象,如上例中的$scope對象
五、指令
通過框架核心中包含的DOM轉換引擎,可以進行HTML語法的擴展,而如ng-controller,ng-model均爲其HTML擴展指令。而其自帶的很多標識符也可以幫助我們定義試圖。
六、下面通過借用別人的一張圖來給展示angularjs內核結構各層關係
個人暫時還不能很好理解,所以 不做解釋,待後面理解清楚再做解釋,如果有高手可以幫我這個解答下的話,麻煩不要吝嗇你的評論了哦~~~