AngularJS：ngRoute，否则不工作答案

【问题标题】：AngularJS: ngRoute, otherwise not workingAngularJS：ngRoute，否则不工作
【发布时间】：2014-06-15 10:14:41
【问题描述】：

我有一个非常奇怪的错误，我已经设置了路线和控制器。现在我只有一个没有错误的空白页？

index.html;

<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
    <head>
        <title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
        <!-- Stylesheets -->
        <link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
        <!-- AngularJS -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
        <!-- Controllers -->
        <script src="/app/front/controllers/controller.js"></script>
        <!-- Router -->
        <script src="/app/front/router.js"></script>
    </head>

    <body ng-view></body>
</html

Controller.js：

/**
*  RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);

RekenTalent.controller('rekenCtrl', ['$scope', function($scope){

}]);

Router.js：

var RekenTalent = angular.module('RekenTalent', [
    'ngRoute', 'RekenTalentControllers'
]);

RekenTalent.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: '/templates/index.html',
        controller: 'rekenCtrl'
    }).
    otherwise({
        redirect: '/index'
    });
}]);

而 /templates/index.html 只会说“嗨”。有谁知道为什么我得到一个空白页？它应该将我重定向到 /index.html 并且 /index.html 应该使用 /templates/index.html 作为模板。什么问题和解决方法？

更新：

当我转到 /index 时它可以工作，所以 else 参数不起作用，为什么不呢？

【问题讨论】：

我认为是文件引用错误，请告诉我们，您的索引在哪里，以及您电脑中的 Angular 脚本
你可以在你的控制器中添加一个 console.log('load') 来检查控制器是否被正确触发但是，我认为它的引用错误
index.html => /app/front/templates/index.html，当我将 console.log('hi') 放入控制器时，控制台中也没有日志。
奇怪，当我在路由器中将 /index 更改为 / 时正常工作，为什么不工作？

标签： angularjs ngroute

【解决方案1】：

将redirect 更改为redirectTo

最好使用 home.template 来避免所有此类问题，我的意思是考虑：

您有一个index.html，其中包含您所有包含的脚本，例如 angular、jquery 等，并且在 body 标记中有 ng-view，好吗？

现在，如果您有任何模板，例如 Welcome 或任何用于索引的模板，请将该模板写入 home.html，好吗？像这样：

index.html：

<body ng-app="yourapp">
   <div ng-view>
   </div>
</body>

主页.html

  <div>
     Welcome, user. This is index.
  </div>

您的应用配置：

yourapp.config(function($routeProvider) {
   $routeProvider
      .when('/', {
         templateUrl: 'partials/home.html',
         controller: 'homeCtrl'
      })
      .otherwise({redirectTo:'/'});
}

最好将所有模板放在一个 partials 文件夹中，其中的父文件夹包含 index.html，如下所示

  root 
     yourAppFolder
       1-Assets
          Css
          Js

       2-Partials
          home.html
          login.html

       3-index.html

【讨论】：

谢谢。很好。

【解决方案2】：

找到了；重定向应该是redirectTo；

var RekenTalent = angular.module('RekenTalent', [
    'ngRoute', 'RekenTalentControllers'
]);

RekenTalent.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: '/app/front/templates/index.html',
        controller: 'rekenCtrl'
    }).
    otherwise({
        redirectTo: '/index'
    });
}]);

【讨论】：

【解决方案3】：

我有这个示例代码，例如：

.config(['$routeProvider', 
function($routeProvider) {
    console.log('routeando');
    //alert('otherwise' + $routeProvider.route);
    $routeProvider.
        when('/', {     templateUrl: 'home'}).
        when('/route1', {  templateUrl: 'route1'}).

        /*Without the next line, redirectTo doesnt work*/
        when('/error', {  templateUrl: 'error'}).
        otherwise({     redirectTo: '/error'});
}]);

否则，只有当您已经为该路由设置了“when”参数时才会起作用。

对不起，我的英语不好，祝你有美好的一天。

【讨论】：