web-dev-qa-db-ja.com

AngularJS：ngRoute、それ以外の場合は機能しない

私は本当に奇妙なバグがあり、ルートとコントローラーを設定しました。今、私はエラーのない空白のページしかありませんか？

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に移動すると機能するので、そうでなければparamは機能しません。なぜでしょうか。

angularjsngroute
9
DazDylz

redirectをredirectToに変更します

そして、この種の問題をすべて回避するには、home.templateを使用する方がよいと考えます。

index.htmlには、angular、jqueryなどのインクルードされたスクリプト全体が含まれており、bodyタグにはng-view、 OK？

これで、welcomeなどのテンプレートやインデックス用のテンプレートがある場合は、そのテンプレートをhome.html、 OK？このような：

index.html：

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

Home.html

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

アプリの構成：

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

そして、すべてのテンプレートをパーシャルフォルダー内に配置することをお勧めします。ここで、親フォルダーには次のようにindex.htmlが含まれています。

  root 
     yourAppFolder
       1-Assets
          Css
          Js

       2-Partials
          home.html
          login.html

       3-index.html
17
Milad

それを見つけた;リダイレクトは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'
    });
}]);
2
DazDylz

たとえば、次のコードサンプルがあります。

.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」パラメータがすでにある場合にのみ機能します。

私の英語を失礼し、良い一日を。

1
Gonzalo