學習 AngularJS (二)

時間 2019-11-06

原文原文鏈接

繼續學習(瞭解)AngularJS. php

看例子, 分明是一種模板語法: css

<body ng-controller='PhoneListCtrl'>
  <ul>
    <li ng-repeat='phone in phones'>
      {{phone.name}} <p> {{phone.snippet}}</p>
    </li>
  </ul>
</body>

{{...}} 裏面是 angular expression, 就是簡單表達式, 估計支持一些模式, 不支持一些模式. html

ng-repeat 至關於 foreach 循環. 估計是 directive, 估計還能夠定製(本身寫一個新的). 前端

function PhoneListCtrl($scope) {
  $scope.phones = [
    {name:'蘋果', snippet:'土豪金' },
    {name:'安卓', snippet:'...'},
    ...
  ];
}

看起來控制器的形式是一個函數, 此簡單例子中提供 view 一個數據 phones, 即 M-V 之間的數據綁定. git

<input ng-model="query">
<li ng-repeat="phone in phones | filter:query"> 這裏用 $filter 函數來處理 ngRepeat 指令的輸入. angularjs

測試語義例子: github

... it('應該xxx', function() {
       input('query').enter('蘋果');   --- 在輸入框 query 中輸入 '蘋果'
       expect( repeater('.phones li').count == 1 );   --- 指望(斷言)重複器 phones 項目數爲 1.
   }); web

以上主要是界面 MVC 模式例子, 測試. ajax

菜鳥學習 AngularJS 教程網頁:
http://www.runoob.com/angularjs/angularjs-tutorial.html express

模塊定義:
var app = angular.module('myApp', ...);
控制器:
app.controller('myCtrl', function($scope) { ... } );

AngularJS 指令: 擴展的 HTML 屬性, 帶有前綴 ng-. 如 ng-app, ng-init, ng-model 等.
重複 ng-repeat, 控制器 ng-controller, 控制器是 js 對象, 用 js構造函數建立.

過濾器: 使用管道字符 | 添加到表達式, 指令中, 可用於轉換數據.
   如 currency 過濾器格式化數字爲貨幣格式. filter 選擇子集; orderBy 排序等.
   可多個過濾器組合.
   (本質上可看作: 對象至關於 input, 經 filter 產生 output, 多個過濾器組合可看作是一種鏈式調用.
     過濾器參數看作是調用的參數).

顯示錶格: 相似於重複 li, 在 tr 上添加 ng-repeat, 在 td 中添加 {{ }} 表達式.

ng-click 指令: <button ng-click='count = count+1'> 看起來像寫了一個內嵌的 js 腳本, 或 lambda 表達式.

輸入驗證: 使用 ng-show 設置校驗提醒 span 在校驗出錯狀況下可見, 如 username.$dirty && $invalid.

指令 ng-include 包含 HTML 內容. 如 <div ng-include='my-list.html'></div>

AngularJS 在 DOM onload() 事件中自動開始, 查找 ng-app 指令, 加載模塊, 編譯.
若是 ng-app 指定的頁面一小部分, 則會更快編譯和執行.

剩下的參考教程的手冊: http://www.runoob.com/angularjs/angularjs-reference.html

=== 下面應主要關心一下 angular 提供的有用的服務 =====

$http 用於讀取 web 服務器上的數據. 如 $http.get(url);

跨域訪問解決方案參考: PHP Ajax 跨域問題最佳解決方案。
(經過設置 Access-Contorl-Allow-Origin 來實現跨域)

AngularJS 的首選樣式表是 Twitter Bootstrap, 其是當前最受歡迎的前端框架. (引用 bootstrap.min.css)

Service 都是單例的, 在一個應用中只會實例化一次(用 $injector 服務), 主要負責提供一個接口把特定函數
須要的方法放在一塊兒.

咱們能夠輕鬆地建立本身的service, 僅僅註冊 service 便可. 最多見的常見方法:

angular.module('myapp.service', [])
  .factory('foobar_service', function() {
    var service_instance = {
      // ... 
    };
    return service_instance;
  });

建立一個 service 就是簡單的返回一個函數, 這個函數返回一個對象, 在應用建立的時候(函數被調用)從而
建立出單實例的服務對象.

服務傳遞給 controller 的方式, 把 service 的名字做爲參數傳遞:

app.controller('my_controller', ['$scope', 'my_service', 
  function() {$scope, my_service) {
    ...
  }]
);

(看起來像寫出此 controller 依賴的模塊/服務, 而後 angular 找到這些模塊/服務, 而後注入 controller)
這是依賴注入的寫法... 另外一個例子使用 $timeout 服務的例子:
http://developer.51cto.com/art/201311/415900_1.htm

app.controller('ServiceController', ['$scope', '$timeout', 'githubService',     
  function($scope, $timeout, githubService) { 
    // ...
  }]
);

(angular 依賴注入有規範...)

(因爲 service 是單實例, 應用生命週期的, 因此) Services 能夠在多個 controller 之間共享數據.

(就這麼簡單? 主要是依賴注入支持?)

=== Routing 路由 ===

在單頁面應用中, 視圖之間的跳轉就顯尤其重要. 須要方法來精確控制何時該呈現什麼頁面給用戶.

方法: 把視圖打散成 layout 和模板視圖, 而後將這些 "碎片" 在佈局模板中拼接起來.
angularjs 經過 $routeProvider 上聲明 routes 來實現上面的構想.

第一步: 佈局模板

<header>   
  <h1>Header</h1>  --- 這樣每頁面都有 header
</header> 
<div class="content">   
  <div ng-view></div>   --- ng-view 告訴 $routeProvider 在這裏渲染模板
</div> 
<footer> <h5>Footer</h5> </footer>

第二步: 配置路由信息

兩種方法: when, otherwise. (看起來像 switch 語句...)

(前面略) 添加路由例子:

..config(['$routeProvider', function($rp) {
    $rp.when('/', {     // url 還能夠寫某種匹配/key, 假設當作正則看...
      controller: 'home_page_controller',
      template: '...We are homepage...'
    })
    .otherwise({
      ... 不在主頁的處理方式
     });
  }]);  --- 這麼多配對的各類括號, 看着很辛苦, 要是都省略掉... ...

(看着像寫了一個 when-each-case-and-otherwise 的語句...)

這裏介紹數種過濾器, 可加深對 angular 過濾器功能/用途的印象:
http://developer.51cto.com/art/201310/414163_2.htm

建立自定義的過濾器:
把它配置到 module 下便可.

angular.module('custom.filters', [])
  .filter('大寫化', function() {
    return ...具體大寫字符串實現...
  });

使用:

<div> UpperCase is: {{ 'hello world' | 大寫化 }} </div>
  --> 結果應該是 '上面函數處理的結果'

還有不少知識點未及談到的:
* Promises(可讓多個異步請求更加的有條理)
* 自定義指令; *$resource 服務; *單元測試(尤其重要, 推薦jasmine)
* end-to-end testing; *midway testing; *i18n *auth & customize xhr req
* $provider -> custom service; * forms and validation; * ie compatiable;

原文連接: http://blog.jobbole.com/50533/

=======

如今彷佛對 angluarjs 略知一二了, 先試着看看程序, 有須要再回頭學.