【问题标题】:$routeProvider error with angularJSangularJS 的 $routeProvider 错误
【发布时间】:2014-06-12 05:58:16
【问题描述】:

我今天开始学习 AngularJS,我被 “路由” 部分困住了。我创建了一个控制器和一个视图(见下文),但是当我尝试在本地服务器上运行它时,出现以下错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module AMail due to: 
Error: [$injector:unpr] Unknown provider: $routeProvider

如果 ngRoute 服务内置在 Angular 中,为什么错误提示它是未知的?

controller.js

var aMailServices = angular.module('AMail', []);
// Set up our mappings between URLs, templates, and controllers
    function emailRouteConfig($routeProvider) {
        $routeProvider.
        when('/', {
           controller: ListController,
           templateUrl: 'list.html'
        }).
        when('/view/:id', {
           controller: DetailController,
           templateUrl: 'detail.html'
        }).
        otherwise({
           redirectTo: '/'
       });
   }

// Set up our route so the AMail service can find it
aMailServices.config(emailRouteConfig);

messages = [{
       id: 0, 
           sender: 'jean@somecompany.com', 
           subject: 'Hi there, old friend',
       date: 'Dec 7, 2013 12:32:00', 
           recipients: ['greg@somecompany.com'],
           message: 'Hey'
       }];

// Publish our messages for the list template
function ListController($scope) {
    $scope.messages = messages;
}

// Get the message id from the route (parsed from the URL) and use it to
// find the right message object.
function DetailController($scope, $routeParams) {
    $scope.message = messages[$routeParams.id];
}

index.html

<html ng-app="AMail">
  <head>
  </head>
  <body>
    <h1>A-Mail</h1>
    <div ng-view></div>
    <script src="angular.js"></script>
    <script src="controller.js"></script>
  </body>
</html>

【问题讨论】:

    标签: javascript angularjs ngroute


    【解决方案1】:

    需要声明对ngRoute的依赖:

    var aMailServices = angular.module('AMail', ['ngRoute']);
    

    【讨论】:

    • 还需要在页面上包含angular-route.js
    • 但书上没有。我正在向 O'Rileys AngularJS 学习。好的,谢谢。我认为路由是使用标准 Angular 发布的代码构建的指令。
    • @user3283104 它曾经是主库的一部分,但他们决定在版本 1.01.2 之间的某个地方将其解耦 - 如果您使用的是旧版本,您可能会发现此链接很有用书:docs.angularjs.org/guide/migration
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多