如何让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模块路由使用自己的控制器？

回答

相关问题