AngularJS ng-viewはルーティングされたページを表示していません

ng-viewはページを表示しておらず、ルーティングは機能していないようですが、ブラウザconsole/networkにangel-route.min.jsをロードしています。ファイルの構造は、フォルダ - > css、fonts、js、pagesです。ルートにはapp.jsとindex.htmlの2つのファイルがあり、pagesフォルダの中にはng-viewの部分に追加されているが読み込まれていないmain.htmlとsecond.htmlの2つのファイルがあります。AngularJS ng-viewはルーティングされたページを表示していません

main.htmlとコンテンツのリンクをクリックすると、それはhttp://127.0.0.1/mainで戻ってくると完全/ページが

**更新されたコードをフォルダ無視するには、そのコンテンツをロードする最初のページを得たが、もう一つは」doesnのコンソールにエラーはありませんので、間違ったhrefパスがありますか？

ヘッダースクリプト

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script> 
<script src="app.js"></script>

HTML

<div class="row"> 
    <a href="#">Main Content</a> 
    <a href="#/second">Second Content</a> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <div ng-view></div> 
     </div> 
    </div> 

    <hr> 

    </div>

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

myApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateURL: 'pages/main.html', 
     controller: 'mainController' 
    }) 
    .when('/second', { 
     templateURL: 'pages/second.html', 
     controller: 'secondController' 
    }) 
}); 

myApp.controller('mainController', ['$scope', function($scope) { 



}]); 

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) { 



}]);

出典

2017-02-05 Nicholas Ritson

？ – Thierry

あなたは 'html5Mode'を実装していないので、URLに'＃/ 'を使う必要があります – charlietfl

あなたのindex.htmlに' ng-app = "myApp"を追加しましたか？ – Merlin

templateURLの代わりにtemplateUrlを使用してください。

あなたのhtmlで#/mainを使用してください。

は、トウNG-ビュー

JSコードを使用しないでください

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

myApp.config(function($routeProvider) { 
    $routeProvider 
    .when('/main', { 
     templateUrl: 'main.html', 
     controller: 'mainController' 
    }) 
    .when('/second', { 
     templateUrl: 'second.html', 
     controller: 'secondController' 
    }) 
}); 

myApp.controller('mainController', ['$scope', function($scope) { 
    $scope.name = "world" 

}]); 

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) { 


}]);

ここ

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script> 

    <script src="app.js"></script> 
    </head> 

    <body ng-controller="mainController"> 
    <p>Hello {{name}}!</p> 

    <div class="row"> 
    <a href="#/main">Main Content</a> 
    <a href="#/second">Second Content</a> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <div ng-view></div> 
     </div> 
    </div> 

    <hr> 

    </body> 

</html>

が働いているHTMLコードplunker

EDIT

角度バージョン1.4.0を使用しています。角度1.6.1を使用する場合は、$ locationハッシュバングURLに使用されるデフォルトのハッシュプレフィックスを変更しました。('')の代わりに('!')の代わりに

のように設定フェーズでこれを追加する必要があります。あなたのindex.htmlで2 ngのビューを持っていないのはなぜ

myApp.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]);

今では、同様の角度1.6.1で動作します

出典

2017-02-05 18:30:07

このコピーを試してみて、あなたのものと一致するように更新しました。まだ読み込まれていないので、通常はベースの書き換えスクリプトが必要ですか？ https://plnkr.co/edit/bOkCnhgD1GaNF3kbJaM7 –

@NicholasRitsonあなたが追加していないため、あなたのコードは機能しません。 $ locationProvider.hashPrefix（ ''）;私の編集で述べたように、あなたの設定フェーズで。それを追加するだけで、今働いていただきありがとうございます –

ありがとうございます。チュートリアル私はudemyから次のものは、それがカバーされていないので、私が考える古いバージョンです –

.when('/main', { 
    templateURL: 'pages/main.html', 
    controller: 'mainController' 
})

またはメインページにアクセスするには、このURLを使用します。 http://127.0.0.1/ config in mainのルーティングを設定していないので、動作するはずです。

出典

2017-02-05 18:18:30 shiva

これは数多くの問題のうちの1つです – charlietfl

AngularJS ng-viewはルーティングされたページを表示していません

答えて

関連する問題