AngularJS 筆記

jopen 10年前發布 | 37K 次閱讀 Web框架 angularjs

Module

ng-app 可以不必賦值：<div ng-app> 即合法
Module :app 的不同組件——controllers，services，filters，directives 的容器
module 的構造函數有兩個參數：第一個字符串是本 module 的名字，第二個參數是其依賴的其他 module
一個 html 文檔只有第一個 ng-app 能自動載入（auto-bootstrap），其他 app 要手動 angular.bootstrap，ng-app 不可嵌套。一般可以使用注入依賴添加其他 module，除非明確需要載入多個 app 的話。

Dependency Injection

注入依賴是一種用于處理對象和函數如何被創建以及它們如何獲取依賴的軟件設計模式。angular 的一切組件都由注入依賴創建并連接在一起。angular 中，DI 的容器名為 injector
依賴這個概念近似于父類，注入依賴類似于 多重繼承

Model

ng-model 和 ng-bind 分別為數據綁定的設定和取值 (于 $scope 內)
```
<input ng-model="foo" />
<p ng-bind="foo" />
```
{{ variable }} 的效果和 ng-bind 相同，使用 ng-bind 的一個好處在于可以避免與其他（如 django）模板系統的沖突。

Controller

controller 是一個以 $scope 為參數的函數。他通過修改 $scope.var 來實時改變視圖。

也可以添加方法：

$scope.double = function(num) {return num*2 ; } ;

lang:html
<input ng-model="num" />{{ double(num) }}

<ng-controller=""> 的 controller 內容會在該 html 元素被加載時阻塞式執行，也有可能是在 module 被加載時執行

標準的 controller 聲明方式為使用數組符號：

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
...
}
...
}]);

Service

把 controller 中與 view 無關的業務邏輯，拿出來做成可復用的獨立 module，就是 service。如 Ajax
要想在一個 module 中使用另一個 module 的 service，就要把 service 放進第二構造函數的那個列表中，這個過程也被稱為 依賴注入
每個依賴于 service 的組件都能得到一個專屬的 service 實例，該實例是由 service factory 生成的
service 通常以 $ 開頭
凡是被注入的依賴都要按順序出現在函數的參數列表中，否則不能使用。也可以給他們起別名，如下例 win 代表 $window。
```
.controller('aCtrl',['$scope', '$window', function($scope,win){
    win.alert("test")
}])
```

通過 provide 在 module 的 config 函數內注冊一個 service：

angular.module('myModule', []).config(function($provide) {
$provide.factory('serviceId', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});
});

Scope

$scope 在 DOM 結構中是可繼承的。每一次 ng-controller 指令都會新建一個子scope。子scope可以訪問上層 DOM 中指定的 $scope 屬性。
$scope 其實是一個 angular 內建 service

Template

view 就是 DOM，是 controller 數據在 html 上的投影。

Filter

過濾器的機制都是創建一份副本，處理之，然后返回該副本

Ajax

$http.get("url").success(function(data){})
$http.post('/someUrl', {msg:'hello word!'})

POST 方法的默認編碼方式是：Content-Type: application/json ，而非 jquery 的 Content-Type: x-www-form-urlencoded 。因此基于后一種編碼方式的后臺框架，如 django，就無法在 request.POST 中正確提供 POST 數據。因為真正的數據被按照 JSON 格式編碼在了 request 的 body 里面。解決方法要么在 ajax 參數里顯示指定編碼格式，要么在后臺 json.loads(request.body) 但后一種方法要做額外的參數檢查，所以最好還是在前段改變編碼格式。

UI Bootstrap 的 tab 和 dropdown

UI Bootstrap 提供了幾個便捷的推ter bootstrap 組件封裝，其中包含 tab 和 dropdown 。但新組件的接口都還比較簡單，如 tabset 就默認不包含 dropdown 。

tabset/tab 組件的實際行為，其實還是將標簽自動轉換為 bootstrap 的傳統格式，因此仍可以通過傳統方式創建 dropdown 標簽：

<tabset>
    <tab></tab>
    ...
    <li class="dropdown">
        <a class="dropdown-toggle">更多</a>
        <ul class="dropdown-menu">
            <tab></tab>
            ...
        </ul>
    </li>
</tabset>

但這種方式會有一個小問題就是：點擊下拉菜單中的標簽頁后，下拉菜單不會自動關閉。這時候就要使用 dropdown 組件的自帶接口來實現了，只需改一下 <li class="dropdown"> 標簽:

<li dropdown is-open="dropdown_open">
    <a class="dropdown-toggle">
        更多 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <tab ng-click="dropdown_open=!dropdown_open"></tab>
        ...
    </ul>
</li>

這里使用 is-open 屬性的前提是添加 dropdown 指令，并且要注意去掉 class="dropdown" 屬性，否則會報錯。

多大程度上使用動態頁面和異步請求。

異步請求僅用在非首頁標簽頁或首頁標簽頁中體積較大的內容，如廣告和內容圖片，logo 最好也同步加載，可以做圖片優化
異步請求不要用在用戶的第一目標元素上，不論加載快慢，否則會影響用戶體驗，比如淘寶提交退貨申請后的頁面，顯示對方還有 XX 時間做出反應的元素就使用了異步請求，導致用戶會看到 {{}} 模板標簽。
動態/靜態頁面的選擇取決于頁面本身的屬性，一個確認標準為，頁面之間是否有明確的繼承結構。從屬關系會導致用戶本能地使用后退按鈕，動態內容應盡可能用于小元素，或用于頁面級元素（如標簽頁）時，保證不同頁面之間在結構上是平級的。

來自：http://my.oschina.net/lionets/blog/345365

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1416277616242.html

Web框架 angularjs