angularjs 學習筆記(二) ----- bootstrap架構

標籤：style   class   color   使用   檔案   資料   

1、  下載新的jquery-1.11.1檔案。

2、  下載新的bootstrap檔案。

3、  選擇流式布局的模板填充入index.html檔案。

4、  將top、foot轉為nginclude檔案

nginclude必須使用$scope對象，因此需要設定一個全域的mainctrl來將字串或全域變數注入$cope中。

$rootScope.global =global;

直接將全域變數global賦值給$rootScope，並且之後的子$Scope會獲得繼承，靜態定義與ctrl分開。

5、  將靜態menu轉換為資料調用模式

1、  嘗試將global注入router，獲得成功，constant可以定義router的內容

.config([‘$routeProvider‘,‘global‘, function($routeProvider,global) {

$routeProvider.when(‘/view1‘, {templateUrl: global.RouterMap.view2, controller: ‘MyCtrl1‘});

$routeProvider.when(‘/view2‘, {templateUrl: global.RouterMap.view1, controller: ‘MyCtrl2‘});

$routeProvider.otherwise({redirectTo: ‘/view1‘});

}]);

之後嘗試將global從constant轉為value，發生錯誤，router不能通過動態讀取後設定路由，menu資料僅用來顯示，不涉及路由選擇。

 

2、  在後端建立menu.asp檔案,並在其中產生3*5的導航結構

3、  實驗修改資料讀模數塊

增加參數項$resource(“path/:url”, {url:"@url"},action)

調用方法. action ({url: testUrl},function(result){})

實際使用時仍然將路徑設定在service中

Service若帶參數，需以調用方法修改內部變數

4、  欄目設定active標誌

在$scope中設定當前標誌位，並與資料中標識進行對比

ng-class="{‘active‘:menusubitem.id==ActiveItem}"

ng-repeat為自迴圈，直接添加在想要迴圈的對象上，不需要在外面設定容器。

路由中不帶返回函數，需要在調用的ctrl中設定標識。

6、  調用bootstrap的輪播（Carousel）組件

1、  複製Carousel代碼和圖片

2、  Carousel的調用方式為href，這與angular的route會發生衝突，修改bootstrap.js中的相應部分，添加data-href的匹配模式，並將調用方式改為data-href。

3、  Carousel的原始結構包含了圖片本身和控制按鍵，將其最佳化為標準的angurla的directive

4、  在directive中用template來裝載Carousel，其中carousel-inner圖片部分作為HTML輸出部分，並賦予directive名app-carousel,並使用transclude屬性調用。

5、  在template中的carousel-indicators為圖片數字顯示，為需要修改的部分，這部分使用ng-repeat來迴圈，所調用的內容需要使用link中對scope進行設定，而不能直接用scope參數設定。

6、  通過jQuery的$(element).find(".item").size()獲得圖片數量

7、  為第一張圖片賦予啟用狀態，$(element).find(".item:first").addClass("active");

8、  為圖片添加資料後發現，無法通過directive來調用ng-repeat的資料，應該是因為非同步讀取尚未完成，而先構建了組件，因此棄用transclude，將資料讀取部分也轉移到directive內部完成。(發現了資料互動的方式，因此進行了修改，這部分作廢)

9、  資料互動需要用到scope,之後在link中使用$watch來綁定資料

scope : {isize:"=itemSize"},

scope.$watch(‘isize‘, function(n, o) {

  if (typeof(scope.isize) != "undefined") {

   }

});

其中需要判斷是否已被綁定。 

10、  整理成壓縮檔angularjs-0.1-20140618-bootstrap.zip。