Question

我正在关注使用Angular＆＃39; $routeProvider的随机YT教程，结果 - 与视频相反 - 对我不起作用。相反，我得到的是崩溃的网站，这个错误记录在Chrome的控制台中：Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=site&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249)通过跟踪，我发现`$ routeProvider＆＃39;有什么问题，但是节拍我，如果我知道什么。这是我的代码：

var site = angular.module('site', []).
config(function($routeProvider){
    $routeProvider.
        when('/home', {template:'/pages/home.html'}).
        when('/', {template:'/pages/home.html'}).           
        when('/in-play', {template:'/pages/in-play.html'}).
        when('/popular', {template:'/pages/popular.html'}).
        otherwise({redirectTo:'/home', tempalte:'/pages/home.html'});
});

function MainCtrl($scope, $location) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
};

以下是所有HTML（我也与ng-include合作）：

<!DOCTYPE html>
<html ng-app="site">
<head>
    <link rel="stylesheet" href="css/style.css">    
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>    
    <script src="scripts/app.js"></script>

    <title>Pre-Demo</title> 
</head>
<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'">  </div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col" ng-controller="mainCtrl">
            <div class="wraper" ng-view ng-controller="jsonCtrl"></div>                     
        </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>  
</body>
</html>

//included page that has the call for $routeProvider

<div class="events">
    <div class="bullet">
        <div class="bullet-padding">
            <div ng-click="setRoute('in-play')" class="bullet-link">In-Play Links</div>
        </div>  
    </div>
</div>

有人可以告诉我出了什么问题吗？

修改

在Antiga的回答之后，我得到它来加载页面。除了要加载ng-view且为$routeProvider加载的内容之外的所有内容都是首先设置的。这是更新后的代码：

var site = angular.module('site', ['ngRoute']).
    config(function($routeProvider){
        $routeProvider.
            when('/home', {templateUrl:'/pages/home.html'}).
            when('/', {templateUrl:'/pages/home.html'}).            
            when('/in-play', {templateUrl:'/pages/in-play.html'}).
            when('/popular', {templateUrl:'/pages/popular.html'}).
            otherwise({redirectTo:'/home', tempalteUrl:'/pages/home.html'});
    });

site.controller('mainStaysCtrl', function($scope) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
});

和HTML

<body  ng-controller="mainStaysCtrl">   
    <header class="header" ng-include="'pages/header.html'"></header>
    <nav class="nav" ng-include="'pages/nav.html'"></nav>
    <div class="main">
        <div class="left-col">
            <div class="quick links" ng-include="'pages/quick_links.html'"></div>
            <div class="quick-inplay links" ng-include="'pages/quick_inplay_links.html'"></div>
            <div class="winner links" ng-include="'pages/winner_links.html'"></div>
        </div>
        <div class="center-col">
            <div class="wraper" ng-view ></div>
            </div>
        <div class="right-col">
            <div class="expert-mixer" ng-include="'pages/mixer.html'"></div>
            <div ng-include="'pages/twitter.html'"></div>
        </div>
    </div>

Answer 1

您不包括路由模块。

请在此处阅读此内容，以便您首先了解它：https://docs.angularjs.org/api/ngRoute

在您加入angular.min.js之后添加此内容：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

然后在主应用模块中包含依赖项：

var site = angular.module('site', ['ngRoute']).

Answer 2

好的，我的工作超出了Antiga的帮助。

很少（但很小）的问题。我必须扩展templateUrl路径以包含项目文件夹。

when('/home', {templateUrl: '/ProjectName/pages/home.html', controller: 'mainStaysCtrl'}).

其他的事情是我忘了在控制器中包含$location。

site.controller('mainStaysCtrl', function($scope, $location) {
    $scope.setRoute = function(route) {
        $location.path(route);
    };
});

$ routeProvider在AngularJS中无法正常工作（崩溃网站）

2 个答案: