为什么叫模式?我没有找到更好的方式来描述这种情况,先来看一张图:
1.功能模块划分
1.1 APP
我们知道angularjs是基于APP的一种应用,也就是在html中需要对应一个APP,该APP作为整个项目或者某个模块的入口点,就行java的main方法作为整个程序的主入口。当然你可以某一个模块作为一个APP,但是我们一般不会这么处理,因为你多个APP间进行通信的时候会碰到很大的麻烦,如果用过angularjs的人知道,在同一个APP下,各模块间的数据共享,数据通信可以通过service来共享数据,而当多个APP之间进行数据通信的时候我们势必会需要更多的全局变量或者使用document客户端的一些属性来绑定到数据上,这样就会使得angularjs的全局空间受到污染,我们知道angularjs是不希望你定义自己的全局变量来在各模块之间记性数据交互的。因为只要我们严格遵守angularjs的定义使用方式,就可以规避和解决我们在应用中的各种问题。所以我们建议使用一个APP或者最多使用两个APP。因为两个就已经足够用了,一般这种情况会出现在有两个应用,比如项目如果划分的详细,登录可以是一个单独的APP,而登陆之后的主页面可以作为一个大的APP。这样两个APP就足以支持我们的管理系统的项目。
虽然是这么说,但我们还是需要知道怎么在两个或者多个APP之间进行数据通信的。你比如我登录的用户名密码可能需要在主页面(另一个APP)中使用,那使用普通方法就无法记录该对象,我们只有使用window.localStorage.xxx,来记录数据,比如在登录的时候我可以使用window.localStorage.loginName = "xxxx",而在另一个APP中使用$scope.loginName = window.localStorage.loginName来获取。
1.2APP定义
<!DOCTYPE html > <html ng-app="login" ng-controller="loginCtrl"> <head> </head> <body> </body> </html>定义了一个APP来作为angularjs的主入口,在js中定义该login APP:
angular.module('login',["ui.bootstrap","ui.router","pascalprecht.translate","ngCookies","toastr" ])
我们在这里定义了login APP,并注入了我们该应用下所使用的一些服务和组件,比如路由,国际化,cookie等。在使用angularjs时有个很重要的东西叫"依赖注入",简答的说就是你在angularjs中定义了一堆或者它本身提供的一些服务,你需要使用这种东西,那好,angularjs说你使用可以,但是你得先注入,先引用。
每个APP或者module的使用方式有且只能使用一次angular.module("login",[]),这种后面带数组的形式,否则angular会觉得你定义了两个相同的login,这不符合angular的定义规则。我们针对某一个APP会定义多个module或者多个js文件,每个js文件都必须阐述或者标注该js是属于login或者其他应用的,比如我有多个js文件,一个用于controller控制层的js,负责一些数据的定义,数据的处理。同时我还会需要一个config.js来做一些配置,做一些服务来达到配置和数据共享,那么这两个js文件都属于同一个login APP,那么这是我就可以这么定义:
config.js
angular.module('login',"toastr" ])controller.js
angular.module('login')
2.Module
angular.module('main',"toastr","nvd3ChartDirectives","toggle-switch","angularFileUpload","user.management","device.management",])定义module:
angular.module('user.management',[])定义的形式跟APP的定义是一样的,这样module就注入了,你可以在module中进行一番作为了。