6.AngularJS模块化开发
发布在Angular学习之路2015年6月22日view:4587Angularjs
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在一个大项目里面,为了更方便的开发与维护,特别身处一个大团队里面,配合尤其重要,这个时候,我们第一时间想到的,肯定是模块化开发,在前端界里,很多人一说起模块化,肯定想到的是require.js或者sea.js,一方面,模块化避免了一些变量之间的污染,另一面可以做到模块之间的依赖。这个系列文章,咋们来看看AngularJS中的模块化开发的模式。

function a($scope){
    $scope.name="zhou";
}
function b($scope){
   $scope.name="xiao";
}
<div ng-controller="a">
     <p ng-bind="name"></p>
</div>
<div ng-controller="b">
     <p ng-bind="name"></p>
</div>

一开始学习的时候,我们可能会这样子写,在全局的环境下写代码,这必定是一种灾难,在AngularJS中提供了模块化的方法:

var module1 = angular.module(‘app’,[])
module1.controller('a',function(){
    $scope.name = 'zhou'
});

类似于jquery,angular对象是框架向外提供的接口,有一个module方法来定义一个模块,这个module方法接受两个参数,第一个参数是模块的名称,第二个参数是一个数组,数组里面列出所依赖的其他模块,当没有依赖的模块,传入一个空数组就可以了。另外,还记得之前写的ng-app指令吗?如果在AngularJS中使用模块化开发,因为可能会有非常多的模块,这个时候必须在ng-app指定一个模块为初始化的模块的开端,例如ng-app=”app”就可以了。每一个模块对象可以有controller之类的很多的定义方法。还有一定要注意的,是关于压缩处理的,这个问题在第二个系列文章已经讲了,不知道的可以去看下。

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
Angular学习之路

前段时间用了ionic的框架为整个系统运维部门开发了一个webapp,集成了angular框架的,然后这两个月以来一直在开发新项目,也用上了anguarl,自己的博客也在重建当中,把自己之前的记录或者后面遇到的知识点(有基础的,有深入的,有挖坑的,有填坑的,记录方方面面,持续更新),都来分享下,前端需要分享,分享使我们强大!

我的收藏