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

$routeProvider not working properly in AngularJS (crashing the website)

本文关键字：工作 崩溃 网站 常工作 AngularJS routeProvider      更新时间：2023-09-26

我遵循了一些关于使用Angular的$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"有问题，但如果我知道的话，我会大吃一惊。这是我的代码：

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>

有人能告诉我怎么了吗？

编辑

安蒂加回答后，我得到它加载页面。除了要加载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>

您没有包括路由模块。

在这里阅读，以便您首先真正理解：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']).

好吧，我在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);
    };
});
相关文章：