在我們使用 ionic start HelloWorld tabs 等命令建立一個ionic程式時，系統會自動建立一個controllers.js檔案，並且把所有的控制器都寫到這個檔案中。

        當我們的專案比較小的時候，我們還可以把所有的 controllers 寫在 controllers.js 檔案中，但是當我們的專案比較大的時候，業務邏輯相對複雜，如果我們還把所有的 controllers 寫在一個 controllers.js 檔案中，那麼可能我們的 controllers.js 檔案會達到成千上萬行程式碼，這樣極不利於我們的開發維護。所以我們需要把單獨的 controllers 分離開來。

方法一：直接分離。

        我們先新建一個總的路由模組js， route.js

        angular.module('route', [
          'login.controller',
          'menu.controller',
          'trade.controller',
          'returns.controller'
        ]);

        上面程式碼中單引號中的字串可以根據自己情況隨便寫，只要保證多個 js 間對應的相同就行。第一個字串route 是本模組名，login.controller 

        然後在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();
      }
    });
  });
 

        然後我們開始分離 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分離。

        首先我們新建一個 controllers資料夾，用於存放不同controllers的js檔案。

        我們這裡有三個controllers，分別是loginCtrl、menuCtrl、dayoverCtrl。

        我們在controllers資料夾下新建三個js檔案，命名為login.js、menu.js、dayover.js。

        以login.js為例。將controllers.js中loginCtrl相關程式碼（紅框框出來部分）剪下到login.js檔案下，並修改為圖中所示結構。

        修改controllers.js為下圖所示結構。

        如果需要拆分services.js，與上述類似。

        修改app.js檔案如下圖所示結構

        到這裡，我們controller的拆分就完成了，下面我們做相關配置，讓程式能夠正常啟動。

        首先index.html引用require.js並把原來對app.js和controllers.js的引用去掉。並且去掉ng-app="starter"

        js目錄下新建main.js，定義程式的啟動入口。

	require.config({
  		baseUrl: 'js',	//基目錄
  		deps: [
   			 'bootstrap'	//啟動檔案
  		]
	});

        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分離，並且能夠正常運行了。