2018-06-21 angular.js 下的controller分模块化

angular.js
下的controller分模块化

以实际项目 upcpSponsor 为例

js 下
app.js 为所有js入口
在index.ejs中 我们只引入了该js

在index.ejs中 引关于angular.js的一切文件

angular.bootstrap(element, [modules], [config]);

•   element(必需)。要启动angular的根节点，一般为document，也可以是其他的的html的dom。
  

•   modules(数组，可选)。依赖的模块。
  

•   conifg(object,可选)。配置项，目前只有strictDi一个可配置项，默认为false,是否开启辅助debug。
  

用来启动angular项目

angular.bootstrap(document, ["app"]);
2.看app.js

angular.module('myApp', []);
在AngularJS中，模块是定义应用的最主要方式。
模块包含了主要的应用代码。一个应用可以包含多个模块，
每一个模块都包含了定义具体功能的代码。

在AngularJS中，模块是定义应用的最主要方式。
模块包含了主要的应用代码。
一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

angular.module('myApp', []);
这个方法相当于AngularJS模块的setter方法，是用来定义模块的。

在app.js中,我们定义了
var app = angular.module("app", [ "ui.router", "ui.bootstrap", "oc.lazyLoad", "ngSanitize"]);

// 这个方法用于获取应用
angular.module('myApp')

本着主要就说一个
当我们定义完模块之后 如何将controller 模块化
就不扯那些没用的了

重点在于路由配置

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
})

在该方法中进行路由配置

$stateProvider.state('mxReport', {
url: "/mxReport",
templateUrl: "view/mxReport.html",
controller: "MxReportController",
resolve: { ats:'actives',
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([
{
insertBefore: '#ng_load_plugins_before', files: [
'//cdn.baifm.cn/assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css',
'//cdn.baifm.cn/assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js',
]
},
{
files: [
'js/MxReportController.js'
]
}
]);
}]
}})
deps 依赖于某个controller files文件中进行添加即可