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、渲染效果：