angularjs入門學習一【核心理念】

                                                                                                          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內核結構各層關係



個人暫時還不能很好理解,所以 不做解釋,待後面理解清楚再做解釋,如果有高手可以幫我這個解答下的話,麻煩不要吝嗇你的評論了哦~~~


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章