angularjs代碼筆記01,angularjs簡介

本文目錄一覽：

• 1、請問誰有混淆Angularjs代碼的經驗
• 2、如何使用angularjs處理動態菜單
• 3、如何看angularjs源代碼
• 4、下回來的angularJs+bootstrap模板怎麼用?

請問誰有混淆Angularjs代碼的經驗

由於AngularJS是通過控制器構造函數的參數名字來推斷依賴服務名稱的。所以如果你要壓縮控制器的JS代碼，它所有的參數也同時會被壓縮，這時候依賴注入系統就不能正確的識別出服務了。

假如我們的Controller的名稱為：BookCtrl，壓縮前的代碼為：

var BookCtrl = function($scope, $http) { /* constructor body */ };

為了克服壓縮引起的問題，只要在控制器函數裡面給$inject屬性賦值一個依賴服務標識符的數組：

BookCtrl.$inject = [‘$scope’, ‘$http’];

另一種方法也可以用來指定依賴列表並且避免壓縮問題——使用Javascript數組方式構造控制器：把要注入的服務放到一個字符串數組（代表依賴的名字）里，數組最後一個元素是控制器的方法函數：

var BookCtrl = [‘$scope’, ‘$http’, function($scope, $http) { /* constructor body */ }];

上面提到的兩種方法都能和AngularJS可注入的任何函數完美協作，要選哪一種方式完全取決於你們項目的編程風格，建議使用數組方式

如何使用angularjs處理動態菜單

angularjs處理動態菜單的實現方法：

1、核心angularjs代碼：

var testImg=angular.module(“appTest”,[“ms.leafMenu”])

.controller(‘testCtr’,[‘$scope’,function($scope){

$scope.data=[{“id”:”1″,”pid”:”0″,”name”:”第一行”,”children”:[{“id”:”3″,”pid”:”1″,”name”:”第一行1.1″},{“id”:”4″,”pid”:”1″,”name”:”第一行1.2″}]},{“id”:”2″,”pid”:”0″,”name”:”第二行”,”children”:[{“id”:”5″,”pid”:”2″,”name”:”第二行2.1″}]}];

}]);

angular.module(“ms.leafMenu”,[])

.directive(‘msLeafMenu’,[‘$compile’,function($compile){

return {

restrict:’EA’,

transclude: true,

replace: false,

//template:”li/li”,

scope:{

data:’=?’,

id:’@?’,

pid:’@?’,

pvalue:’@?’,

showname:’@?’,

isstandard:’@?’

},

link:function(scope,element,attrs,leafController){

創建節點數據的方法：

function createTreeData(id,pid,pvalue){

var newData=[];

angular.forEach(scope.data,function(item,index){

if(item[pid]==pvalue){

var children=createTreeData(id,pid,item[id]);

if(children children.length0){

item.children=children;

}

newData.push(item);

}

});

return newData;

}

if(!scope.isstandard){

scope.data=createTreeData(scope.id,scope.pid,scope.pvalue);

}

//向節點增加數據

element.append($compile(‘ul class=”ms_leaf_menu_group”li ng-repeat=”row in data” ng-class=”{ms_parent_item:(row.children row.children.length0),ms_child_item:(!row.children || row.children.length=0)}”div ng-click=”toogle($index)”a {{row[showname]}}/aspan class=”glyphicon” ng-class=”{\’glyphicon-chevron-right\’:(row.children row.children.length0 !row.isopen),\’glyphicon-chevron-down\’:(row.children row.children.length0  row.isopen)}”  aria-hidden=”true”/span/divdiv ng-show=”row.isopen”ms-leaf-menu data=”row.children” id=”id” pid=”pid” showname=”{{showname}}” pvalue=”{{row[id]}}”/ms-leaf-menu/div/li/ul’)(scope));

//此處是關鍵，調用入口處，需要找到index

scope.toogle=function(index){

scope.data[index][“isopen”]=!scope.data[index][“isopen”];

}

}

}

}]);

/script

2、html代碼：

body ng-app=”appTest”

div ng-controller=”testCtr” style=” width:200px; margin-left:auto; margin-right:auto;”

    ms-leaf-menu data=”data” id=”id” pid=”pid” showname=”name” pvalue=”0″/ms-leaf-menu

   /div

/body

3、效果圖

如何看angularjs源代碼

查看angularjs源代碼方法如下

大部分JS框架的源代碼都可以在Github中找到，angular.js也可以在裡面查找，要想在Github中找到相應的源代碼，步驟如下：

在瀏覽器中訪問github.com

在右上角的搜索框中輸入想要查找的源代碼（輸入angular.js），按回車搜索

在查詢結果中，一般來說第一個結果就是對應的源代碼（angular.js）

點進去後，可以在線查看，亦可以點擊綠色下拉按鈕“Clone or download”，用git複製地址同步源代碼到本地，或者打包成zip壓縮包下載都本地。

下回來的angularJs+bootstrap模板怎麼用?

用angular渲染bootstrap中的tab切換的

思路：先加載scope中的tabs，然後利用後台bootstrap渲染即可。

1、angularjs代碼：

angular.module(‘TabsApp’, [])

.controller(‘TabsCtrl’, [‘$scope’, function ($scope) {

$scope.tabs = [{

title: ‘One’,

url: ‘one.tpl.html’

}, {

title: ‘Two’,

url: ‘two.tpl.html’

}, {

title: ‘Three’,

url: ‘three.tpl.html’

}];

$scope.currentTab = ‘one.tpl.html’;

$scope.onClickTab = function (tab) {

$scope.currentTab = tab.url;

}

$scope.isActiveTab = function(tabUrl) {

return tabUrl == $scope.currentTab;

}

}]);

2、渲染效果：