angularjs 學習筆記 -----結構定義

標籤：class   java   http   ext   com   get   

1、  Module使用方法

var APP =angular.module(‘fontApp‘,[‘ngResource‘, ‘ngRoute‘, ‘ngSanitize‘]);

APP為定義的別名，之後的調用都應盡量使用該別名

‘fontApp‘ ng-app="fontApp"

新版本angular中route被分離出來，各個被使用的Providerdou需要在此處聲明。

大型應用應該拆分模組來做，先定義一個服務模組，然後再載入它

angular.module(‘xmpl.service‘,[])

angular.module(‘xmpl‘, [‘xmpl.service‘])

用以下代碼可以實現雙向繫結，功能等同於ng-app

        angular.element(document).ready(function() {

            angular.bootstrap(angular.element(document.getElementById("rootOfApp")));

        });

 

2、  angular全域定義的三種方式

1. 用var定義global全域變數，JS方法，優先順序最高
2. .constant，定義常量，不能被修改
3. .value，定義靜態變數，不能運算，但是可以通過extend修改

此外，還可以通過factory功能來定義變數。

我用以下方式對資料進行了存放：

.constant(‘global‘,{

        version: "0.1",

        DataUrl: {

            testUrl:  DataWeb + "index.asp"

        }

});

存放中的DataWeb是用var定義的全域變數，因為在constant中沒能平級調用成功。

調用時使用了

.service(‘JsonSource‘, [‘$resource‘,‘global‘,

    function($resource,global) {

        return $resource(global.DataUrl.testUrl, {}, { }});

}])

需要調用多個參數時只需要聲明一次‘global‘，缺點是定義部分不夠清晰，如果之後重構時優勢不夠明顯，可能會把constant裡的內容拆分出來一些。

 

 

3、  Service就是【單例對象】在AngluarJS 中的一個別名，保證你每次訪問到的都是同一個執行個體，service總是一個單體，無論是哪種類型的service。

Service包含5類，constant、value、factory、service、provider。

定義service有2種方式

myModule.factory(‘serviceId’,function() {});

或

angular.module(‘myModule’,[],function($provide) {

$provide.factory(‘serviceId’,function() {})

})

factory會直接執行個體化

service會延遲執行個體化，被依賴或請求之後才執行個體化

Provider是factory的加強,一個provider中應當由一個$get函數,注入一個控制器時，我們實際上注入的是$get函數。我們可以在config階段配置一個provider。

$provide是Angular用來建立service的介面，$provide有一個函數，decorator，也用來裝飾service，在回呼函數中接收一個$delegate來代表我們實際上的service執行個體。

 

4、  聲明依賴

使用array notation

function myModuleCfgFn ($provide) {

       $provide.factory(‘myService’,[‘dep1’,’dep2’,function(dep1,dep2){}]);

}

使用$inject屬性

    function myModuleCfgFn($provide) {

           var myServiceFactory = function(dep1, dep2) {};

           myServiceFactory.$inject = [‘dep1‘, ‘dep2‘];

           $provide.factory(‘myService‘, myServiceFactory);

    }

使用隱式DI（不相容壓縮混淆的代碼）

function myModuleCfgFn($provide) {

　　$provide.factory(‘myService‘, function(dep1, dep2) {});

}

對所使用的service類,都需要聲明依賴，隱式DI是實驗屬性，盡量不要使用。

調用時的參數名可以隨意，但順序要和聲明保持一致。

 

5、  template

Directive - 一個擴充現有DOM元素或者代表一個可複用的DOM組件的屬性或者元素，即控制項。

           Directive有駝峰式（camel cased）的風格的命名。但directive也可以支蛇底式的命名（snake case）

           compiler通過$interpolate服務匹配文本與屬性中的嵌入運算式（如{{something}}）。這些運算式將會註冊為watches

compile function用於處理DOM模版的轉換。一般是那種需要轉換DOM模版的（如ngRepeat），或者是需要非同步載入內容的（如ngView）。compile function 可以有一個傳回值，類型可以是function或者object。

link function負責註冊DOM事件監聽器，也可以進行DOM的更新操作。link function會在模版複製操作完畢之後執行。這裡存放著directive大多數的邏輯。

attribute object - 在link()或compile()中作為參數

Markup - 通過雙大括弧標記法{{}}來綁定運算式到元素中，是內建的angular標記。

Filter - 用于格式化我們給使用者看的資料。

Form controls - 讓我們驗證使用者輸入。

雙向資料繫結的關鍵directive是ngModel。

 

6、  Scope

scope是一個指嚮應用model的object。它也是expression的執行內容。scope被放置於一個類似應用的DOM結構的階層中。scope可以監測（watch,$watch）expression和傳播事件。

每一個angular應用有且只有一個root scope，但可以擁有多個child scope。

當angular對{{username}}求值時，它首先查看與當前元素關聯的scope的username屬性。如果沒有找到對應的屬性，它將會一直向上搜尋parent scope，直到到達root scope。在javascript中，這個行為被稱為“原型繼承”，child scope典型地繼承自它們的parent。

在debugger中查看scope：在console中輸入：angular.element($0).scope()

當瀏覽器在angular執行環境外調用javascript代碼時，這意味著angular是不知道model的改變的。要正確處理model的修改，這個命令必須通過使$apply方法進入angular執行環境。

 

 

7、  Controller

在angular中，controller是一個javascript 函數（type/class），被用作擴充除了root scope在外的angular scope的執行個體。

angular將一個新的scope對象應用到controller建構函式（估計是作為參數傳進去的意思），建立了初始的scope狀態。這意味著angular從不建立controller類型執行個體（即不對controller的建構函式使用new操作符）。建構函式一直都應用於存在的scope對象。

controller不應該嘗試做太多的事情。它應該僅僅包含單個視圖所需要的商務邏輯（還有點沒轉過彎了，一直認為Controller就是個做轉寄的……）。

保持Controller的簡單性，常見辦法是抽出那些不屬於controller的工作到service中，在controller通過依賴注入來使用這些service。

ng-controller完成了一下功能

var injector = angular.injector([‘OtherModule‘,‘ng‘]);

injector.instantiate(MyController);

 

8、  Internet Explorer Compatibility

為了讓我們的angular應用在IE上工作，請確保：

按需引入JSON.stringify（IE7或以下的都需要這玩意）。我們可以使用JSON2（https://github.com/douglascrockford/JSON-js）或者JSON3（http://bestiejs.github.com/json3/）。

不要使用自訂標籤，諸如<ng:view>（用屬性版代替，如<div ng-view>）。如果還是想使用，則請看第3點。

如果你確實想使用自訂標籤，那麼你必須做以下步驟，讓老IE認識你的自訂標籤。

<!--[if lte IE 8]>

<script>

    document.createElement(‘ng-include‘);

    document.createElement(‘ng-pluralize‘);

    document.createElement(‘ng-view‘);

 

 

    // Optionally these for CSS

    document.createElement(‘ng:include‘);

    document.createElement(‘ng:pluralize‘);

    document.createElement(‘ng:view‘);

</script>

<![endif]-->

 

9、  $location服務

$location服務分析瀏覽器地址欄中的URL（基於window.location），讓我們可以在應用中較為方便地使用URL裡面的東東。在地址欄中更改URL，會響應到$location服務中，而在$location中修改URL，也會響應到地址欄中。

$location 服務為唯讀URL部分（absUrl，protocol，host，port）提供getter方法，也提供url，path，search，hash的getter、setter方法。

所有setter方法都返回同一個$location對象，以實現鏈式文法。

如果我們想讓我們的Ajax應用能夠被索引，我們需要在head中增加一個特殊的meta標籤：<meta name="fragment" content="!" />

$location服務僅僅允許我們改變URl；它不允許我們重新載入頁面（reload the page）。當我們需要改變URL且reload page或者跳轉到其他頁面時，我們需要使用低級點得API，$window.location.href。

$location知道angular的scope life-cycle。當瀏覽器的URL發生改變時，它會更新$location，並且調用$apply，所以所有$watcher和$observer都會得到通知。

angular compiler當前不支援方法的雙向繫結。如果我們希望對$location對象實現雙向繫結（在input中使用ngModel directive），我們需要指定一個額外的model屬性（例如：locationPath），並加入兩個$watch，監聽兩個方向上的$location更新，例如：

<input type="text" ng-model="locationPath" />

// js - controller

$scope.$watch(‘locationPath‘, function(path) {

    $location.path(path);

);

$scope.$watch(‘$location.path()‘, function(path) {

    scope.locationPath = path;

});