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分离，并且能够正常运行了。