在ngRoute內工作的多個控制器

我有一個小的ngRoute示例我試圖使用多個應用程序和控制器。第一個應用程序/控制器用於主頁面，而第二組應用程序/控制器用於按下按鈕後ngRoute加載的html。但是，它似乎並沒有工作。下面的代碼：在ngRoute內工作的多個控制器

主模塊

var app = angular.module("MainModule", ["ngRoute"]);

主控制器

app.controller("MainController", function ($scope) { 

}); 

app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/customers', { 
      templateUrl: "customers.html", 
      controller: "CustomerController" 
    }) 
});

客戶模塊

var CustomerModule = angular.module("CustomerModule", []);

客戶控制器

CustomerModule.controller("CustomerController", function ($scope) { 

$scope.Test = "Hey"; 

$scope.CustomerArray = [ 
    { "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman"  }, 
    { "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" } 
    ] 
});

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <script src="scripts/MainModule.js"></script> 
    <script src="scripts/MainController.js"></script> 
    <link rel="stylesheet" type="text/css" href="MyCSS.css"> 
</head> 
<body> 


    <div ng-app="MainModule"> 
     <div id="TopDiv">Main Module</div> 
     <a href="#/customers"><input type="button" value="Load Customers" /> </a> 

     <div ng-view></div> 

    </div> 

</body> 
</html>

customers.html客戶的代碼有

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script src="scripts/CustomerModule.js"></script> 
    <script src="scripts/CustomerController.js"></script> 
</head> 
<body> 
    <div ng-app="CustomerModule" ng-controller="CustomerController"> 
     {{Test}} 

      <ul> 
       <li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li> 
      </ul> 

    </div> 
</body> 
</html>

龍位，但希望簡單的代碼。當我按下「加載客戶」按鈕時的輸出字面上是{{Test}}，沒有數組數據可以跟隨。

我只是現在正在學習角度，所以任何幫助這個問題，我將不勝感激。我只是爲了好玩而嘗試學習。所以我想這個問題並不緊迫。：）謝謝！

來源

2016-08-24 Johnny_Orion

這裏的問題是，NG-路線預計到* parial *加載到NG-' view'，但您的customers.html文件不是部分文件，它包含它自己的'ng-app'。同樣，'$ routeProvider'中的'controller'參數實例化了一個與'$ routeProvider'配置的模塊相同的控制器對象，但是你的'CustomerController'是一個完全不同的模塊。最重要的是，你不應該同時在JavaScript和'ng-controller'中使用'controller'，因爲它們都加載了控制器的唯一實例。 – Claies

換句話說，這裏有很多錯誤。我可以整理一份工作樣本，但這需要一些時間。 – Claies

非常感謝您的時間和您的評論。我從發佈這個例子中學到了很多我的錯誤。如果你能夠提供一個工作樣本，那就太棒了！如果沒有，那也沒關係，因爲我知道這是很多努力。這只是代表我學習和嘗試。再次感謝你。 –

我寫了一個使用問題代碼作爲基礎的工作示例。有很多調整，所以我會列出一些解釋。

每個「頁面」都沒有必要擁有自己的模塊。然而，這不是一個壞習慣。爲了支持你在這裏每個視圖一個模塊的設計，我進行了如下修改：

附上CustomerModule作爲MainModule（MainModule.js）的依賴：

var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);

負載ALL腳本中的index.html：

<script src="scripts/MainModule.js"></script> 
<script src="scripts/MainController.js"></script> 

<script src="scripts/CustomerModule.js"></script> 
<script src="scripts/CustomerController.js"></script>

有了這些變化，$routeProvider能夠找到CustomerController以及路線的變化過程中實例化。 customers.html現在不必創建控制器，並且可以將其分解爲完整的部分。另外，customers.html中使用的表達式需要進行更改，並分解爲每個屬性的單個表達式。

最後customers.html客戶：上plnkr.co

{{Test}} 

<ul> 
    <li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li> 
</ul>

完整的工作示例：http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview

來源

2016-08-25 16:45:02 Claies

這工作完美。非常感謝你！清晰簡潔，一切都分成單獨的文件，這似乎是長期編碼的最佳想法。那個例子很棒！好樣的！ –

我不確定，但問題出在您的MainModule中。它應該是這樣的左右：

var app = angular.module("MainModule", ["ngRoute"]);

當你只有一個參數調用angular.module - 它只是試圖獲取模塊，而不是創造。

而且customers.html客戶應該只包含了你部分HTML，不完整：

完全customers.html客戶

{{Test}} 

<ul> 
    <li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li> 
</ul>

並添加移動客戶的js文件index.html的：

<script src="scripts/MainModule.js"></script> 
<script src="scripts/MainController.js"></script> 
<script src="scripts/CustomerModule.js"></script> 
<script src="scripts/CustomerController.js"></script> 
<link rel="stylesheet" type="text/css" href="MyCSS.css">

希望它有幫助。

來源

2016-08-25 00:08:07 vedmaque

謝謝你的時間和你的評論。你對MainModule系列有所瞭解，這是我的錯誤！可悲的是，隨着你的建議變化，結果仍然是一樣的。這似乎不應該是這樣的困難！再次感謝。 –

在ngRoute內工作的多個控制器

回答

相關問題