Ionic 目录:https://blog.csdn.net/dkbnull/article/details/87937179
在我们使用 ionic start HelloWorld tabs 等命令创建一个ionic程序时,系统会自动创建一个controllers.js文件,并且把所有的控制器都写到这个文件中。
当我们的项目比较小的时候,我们还可以把所有的 controllers 写在 controllers.js 文件中,但是当我们的项目比较大的时候,业务逻辑相对复杂,如果我们还把所有的 controllers 写在一个 controllers.js 文件中,那么可能我们的 controllers.js 文件会达到成千上万行代码,这样极不利于我们的开发维护。所以我们需要把单独的 controllers 分离开来。
方法一:直接分离
1、新建一个总的路由模块js, route.js
angular.module('route', [
'login.controller',
'menu.controller',
'trade.controller',
'returns.controller'
]);
上面代码中单引号中的字符串可以根据自己情况随便写,只要保证多个 js 间对应的相同就行。第一个字符串route 是本模块名,login.controller 这些是本模块会加载的模块,也就是我们分离出去的 controller 。
2、在app.js中加载总路由模块 route.js,第一行代码中,中括号部分为 app.js 会加载的模块,这里让 app.js 加载 route 模块即可
angular.module('phonepos', ['ionic', 'route'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
3、开始分离 controller 到单独的 js文件。新建一个 login.js 文件,模块名设置为route.js中设置的相对应的模块
angular.module('login.controller', [])
.controller('loginCtrl', function ($scope, $http, $state, $ionicPopup) {
//相关代码
}
);
其他的controller也做对应处理,这样我们就把不同的controller分离成单独的js文件了。
注意,分离完之后一定要记得在 index.html 中引入所有的 js 文件。
如果分离完之后出现了什么问题,可以 ionic server ,浏览器 F12查看报错,然后做相应处理。
----------------------------------------------------------------手动分割线----------------------------------------------------------------
方法二:使用Require.JS框架分离
这种分离方法很麻烦,还可能会出现问题,不建议使用该方法。
博主把这种方法写在这里,一是记录下还有这种方法可以分离,二是把这个作为Require.JS框架使用教程。
下面我们直接介绍如何利用 Require.JS框架 将ionic程序中不同的controllers分离。
1、新建一个 controllers文件夹,用于存放不同controllers的js文件
我们这里有三个controllers,分别是loginCtrl、menuCtrl、dayoverCtrl。
2、在controllers文件夹下新建三个js文件,命名为login.js、menu.js、dayover.js。
以login.js为例。将controllers.js中loginCtrl相关代码(红框框出来部分)剪切到login.js文件下,并修改为图中所示结构。
3、修改controllers.js为下图所示结构
如果需要拆分services.js,与上述类似。
4、修改app.js文件如下图所示结构
到这里,我们controller的拆分就完成了,下面我们做相关配置,让程序能够正常启动。
5、首先index.html引用require.js并把原来对app.js和controllers.js的引用去掉。并且去掉ng-app="starter"
6、js目录下新建main.js,定义程序的启动入口。
require.config({
baseUrl: 'js', //基目录
deps: [
'bootstrap' //启动文件
]
});
7、js目录下新建bootstrap.js
define(['app'], function (app) {
'use strict';
angular.element(document).ready(function () {
console.log("bootstrap ready");
var startApp = function () {
angular.bootstrap(document, [app.name]);
};
var onDeviceReady = function () {
console.log("bootstrap on device ready");
angular.element().ready(function () {
startApp();
});
};
if (typeof cordova === 'undefined') {
startApp();
} else {
document.addEventListener("deviceready", onDeviceReady, false);
}
});
});
到这里,我们的ionic程序就已实现了controller分离,并且能够正常运行了。