Ionic程序分离不同controller

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