如何讓AngularJS模塊路由使用自己的控制器？

我試圖學習AngularJS的視圖和路由機制，跟在AngularJS' own tutorial之後。如何讓AngularJS模塊路由使用自己的控制器？

我的問題是該教程聲稱其所有的控制器在全球範圍內，並且我相信這是一個不好的做法，因爲我們污染它作爲我們添加更多的控制器。

這是一個快速的工作頁面，我已經能夠打造繼上述教程（有a fiddle, too）：

<!doctype html> 
<html> 
    <head> 
     <title>Test</title> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js"></script> 
     <script> 
      "use strict"; 

      var MyFirstController = function ($scope) { 
       // Do something here. 
      }; 

      var MySecondController = function ($scope) { 
       // Do something here. 
      }; 

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

      myModule.config(["$routeProvider", function ($routeProvider) { 
       $routeProvider.when("/first-page", { 
        template: "<p>My first controller.</p>", 
        controller: MyFirstController 
       }); 

       $routeProvider.when("/second-page", { 
        template: "<p>My second controller.</p>", 
        controller: MySecondController 
       }); 
      }]); 

      $(document).ready(function() { 
       angular.bootstrap(document, ["MyModule"]); 
      }); 
     </script> 
    </head> 
    <body> 
     <h1>Test</h1> 
     <div data-ng-view></div> 
     <p><a href="#/first-page">Click me!</a></p> 
     <p><a href="#/second-page">Click me too!</a></p> 
    </body> 
</html>

天真，我試圖移動模塊內部的控制器：

myModule.config(["$routeProvider", function ($routeProvider) { 
    $routeProvider.when("/first-page", { 
     template: "<p>My first controller.</p>", 
     controller: MyFirstController 
    }); 

    $routeProvider.when("/second-page", { 
     template: "<p>My second controller.</p>", 
     controller: MySecondController 
    }); 
}]); 

myModule.controller("MyFirstController", ["$scope", function ($scope) { 
    // Do something here. 
}]); 

myModule.controller("MySecondController", ["$scope", function ($scope) { 
    // Do something here. 
}]);

唉，它不（很明顯）的工作，拋出一個例外ReferenceError: MyFirstController is not defined。

我該如何讓AngularJS模塊在自己的路由配置中使用自己的控制器？

來源

2013-03-08 Albireo

一旦你知道的解決方案，它真的很簡單：只需指定控制器作爲字符串而非對象：

myModule.config(["$routeProvider", function ($routeProvider) { 
    $routeProvider.when("/first-page", { 
     template: "<p>My first controller.</p>", 
     controller: "MyFirstController" 
    }); 

    $routeProvider.when("/second-page", { 
     template: "<p>My second controller.</p>", 
     controller: "MySecondController" 
    }); 
}]);

這樣AngularJS將解決控制器的名字你已經在模塊內部定義的。

它也是安全的！

我創建了a fiddle demonstrating it。

來源

2013-03-08 09:41:34 Albireo

太棒了，我正在盡我所能讓它工作成功...... – 2013-08-21 12:30:58

如何讓AngularJS模塊路由使用自己的控制器？

回答

相關問題