angular-创建angular模块
Posted web前端知识大全
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular-创建angular模块相关的知识，希望对你有一定的参考价值。
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块.
模块有助于把东西从全局命名空间中隔离.
今天学习如何自定义创建模块:
<div ng-controller="firstCtrl">
<h3>{{name}}</h3>
<h3 ng-bind="message"></h3>
</div>
<script src="../script/lib/angular.min.js"></script>
<script src="../script/lib/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller("firstCtrl",function($scope){
$scope.message = "信息";
$scope.name="名字";
})
</script>
<div ng-app="myApp">:
1. ng-app可以加在任何元素上,表示使用这个模块来管理这个元素中的所有内容,
2. 一个页面里只能有一个ng-app,不能有多个,不同的页面可以运用不同的ng-app模块,但是可以在同一个js里定义多个模块
<body>
<div class="m20" ng-controller="firstCtrl">
<span class="layui-btn" ng-click="doSome()">A</span>
</div>
<div class="m20" ng-controller="secondCtrl">
<span class="layui-btn" ng-click="doSome()">B</span>
</div>
</body>
<script src="../script/lib/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller("firstCtrl",function($scope){
$scope.doSome = function(){
alert("A");
}
});
myApp.controller("secondCtrl",function($scope){
$scope.doSome = function(){
alert("B");
}
})
</script>
3. ng-app="模块名"
然后在js中使用如下方法来扩展模块:
var myAppModule = angular.module('模块名',[]);
angular.module()中的第二个参数是必须是一个数组,用于定义该模块依赖的模块,数组的值是字符串,也就是依赖的模块的名字.一旦写入了依赖的模块,那么该模块也就拥有了依赖的模块的指令,方法,等...
var myApp = angular.module('myApp',["ui.route","oc.lazyLoad","app.lang"]);
以上是关于angular-创建angular模块的主要内容，如果未能解决你的问题，请参考以下文章
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
json 可视代码工作室Angular with Firebase片段