個人AngularJS 學習之旅(二)

時間 2019-11-08

標籤個人 angularjs 學習之旅欄目 AngularJS 简体版

原文原文鏈接

記得某位大神說過,"時間就像海綿裏的水，擠擠老是有的."。大多時候，與其說我是很忙而沒時間去作本身想作的事, 倒不如說是懶得去作罷了。html

廢話很少說，接前一篇繼續吧程序員

3.3 指令(Directives)angularjs

Angular 最強大的功能之一就是，你能夠把模板編寫成HTML的形式。

[備註：Angular引入了一款強大的DOM轉換引擎，可用它來擴展HTML的語法]

經常使用的內置指令;設計模式

{{ greeting }} 單向數據綁定api

ng-model 雙向綁定架構

3.4 過濾器(Filters)app

過濾器用來格式化表達式中的值。它能夠用在視圖模板(templates)、控制器(controllers)或者服務(services)中。咱們很容易就能自定義過濾器。

在模板中使用過濾器

過濾器能夠應用在視圖模板中的表達式中，按以下的格式：{{ 表達式 | 過濾器名 }}框架

example:函數

例如，在"{{ 12 | currency }}"標記中格式化了數字12做爲一種貨幣的形式來顯示，它使用了currency過濾器。post

格式化以後的結果是"$12.00"。

過濾器能夠應用在另一個過濾器的結果之上。這叫作「鏈式」使用，按以下格式：

{{ 表達式 | 過濾器1 | 過濾器2 | ... }}過濾器能夠擁有（多個）參數，按以下格式：

example:

例如，在「{{ 1234 | number:2 }}」的標記中格式化顯示了數字1234爲小數點後兩位，使用了 number過濾器。顯示的結果爲"1,234.00"。

3.5 依賴注入

依賴注入（DI）是一種讓代碼管理其依賴關係的設計模式。

深度理解依賴注入（Dependence Injection）

DI簡介

對象或函數能夠經過三種方式得到所依賴的對象（簡稱依賴）：

1.建立依賴，一般是經過 new 操做符

2.查找依賴，在一個全局的註冊表中查閱它

3.傳入依賴，須要此依賴的地方等待被依賴對象注入進來

第三種方式是最理想的，由於它免除了客戶代碼裏定位相應的依賴這個負擔，反過來，依賴老是可以很簡單地被注入到須要它的組件中。

這裏仍是以一個經典的例子來解釋

example:

function SomeClass(greeter) {
    this.greeter = greeter;
  }
  
  SomeClass.prototype.doSomething = function(name) {
    this.greeter.greet(name);
  }

上述例子中，SomeClass 沒必要在乎它所依賴(只要A類型中用到了B類型實例，A就依賴於B)的greeter對象是從哪裏來的，只要知道一點：在運行的時候，greeter 依賴已經被傳進來了，直接用就是了。

這個例子中的代碼雖然理想，可是它卻把得到所依賴對象的大部分責任都放在了咱們建立 SomeClass 的客戶代碼中。

爲了分離「建立依賴」的職責，每一個 Angular 應用都有一個 injector對象。這個injector 是一個服務定位器，負責建立和查找依賴。（譯註：當你的app的某處聲明須要用到某個依賴時，Angular 會調用這個依賴注入器去查找或是建立你所須要的依賴，而後返回來給你用）

四、Angular與其餘框架的兼容性

ng-app 聲明Angular邊界

純Angular應用

      <html ng-app>
      //some code here
      ….      
      </html>

若是是一款現有應用,該應用已經使用其餘技術(如Java/Rails)來管理DOM,那麼你可讓Angular只管理頁面的一部分

<html>      
  <div  ng-app> 
      …      
     </div>
</html>

五、小結

咱們選擇一個框架必定是看中了他的一些優點，固然沒有萬能的框架。和傳統框架相比,Angular有本身的獨特的優點:

①解決了界面展現和相關的業務混合在一塊兒的問題

②Angular 中咱們能夠編寫包含業務邏輯的控制器,而無需引用DOM

固然,對於像我這樣的初學者來講,Angular有不太好的地方,一方面相對來講資料比較少,另外就是調試較爲複雜，可能對你來講，不是問題的問題，定位它,都會耽誤太多時間。

6.綜合型的demo

和大多數程序員同樣，學習一個東西，筆者很急切將他們應用到項目中去，並逐漸能使用它搭建一個比較完善的項目架構。

在客戶端對JS的組織架構以下

這裏以home模塊爲例，分別包含homeModule主模塊，homeCtrl,editCtrl,detailCtrl,lstCtrl控制器以及一個peopleservice服務

這裏其實就是實現了簡單的增刪改查功能

運行起來的效果以下：

這裏使用的是ASP.NET MVC 5 結合的angular，代碼部分，筆者正在整理中。。。

參考資料:

AngularJS中文社區

《用AngularJS 開發下一代Web應用》

深度理解依賴注入（Dependence Injection）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。