[AngularJS] Route 和 controller 分開存至不同的JS檔－Kenneth的部落格

AngularJS Route 和Controller 分開存至不同的js檔案，Route應該只有一個但是Controller會有很多個,通通放在一個檔案就很整理和看。

這個範例主要有 index.html 然後再Home.html 和 HomeCtrl.js 一組,Alan.html,Bill.html和MemberCtrl.js一組。

先建立Home.html, HomeCtrl.js,Alan.html,Bill.html和MemberCtrl.js

Home.html

<h2>Kenneth's Home<h2>
{{ message }}

HomeCtrl.js


var HomeApp = angular.module('HomeApp',[]);

HomeApp.controller('HomeCtrl',function($scope){
   $scope.message='Welcome!! this is Kenneth\'s home';
});

Alan.html

<h2>Alan<h2>
My name is {{ name }}

Bill.html

<h2>Bill<h2>
My name is {{ name }}

MemberCtrl.js


var HomeApp = angular.module('HomeApp',[]);

HomeApp.controller('AlanCtrl',function($scope){
      $scope.name='Alan';
});
HomeApp.controller('BillCtrl',function($scope){ 
      $scope.name='Bill';
});

主頁 -- index.html

重點是紅色的字，要注意的是js檔載入的順序controller要先載入最後在Router

<!DOCTYPE html>
<html lang="en">
<head>

<title>AngularJS Routing example</title>

</head>

</div>

</div>

App.js

要把兩個controller的模組inject進去這樣才能運作，但是

var sampleApp = angular.module('sampleApp', ['HomeApp','MemberApp']);
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/Alan', {
	templateUrl: 'templates/Alan.html',
	controller: 'AlanCtrl'
      }).
      when('/Bill', {
	templateUrl: 'templates/Bill.html',
	controller: 'BillCtrl'
      }).
	 when('/', {
	templateUrl: 'home.html',
	controller: 'HomeCtrl'
      }).
	   when('/Home', {
	templateUrl: 'Home.html',
	controller: 'HomeCtrl'
      }).
      otherwise({
	redirectTo: '/'
      });
}]);

如果兩controller的JS檔取一樣的module名稱會如何呢?

答案: 後一個會把前一個蓋掉 ,以我的案例HomeCtrl.js 會被MemberCtrl.js蓋掉會出現如下圖的