角度1.5.xのルーティングが機能しない

ここでは角度ルーティングについて何十件もの質問を見てきましたが、これを実現できませんでした。私は何か見落とした場合は謝罪します。私はAngularjsの公式チュートリアルとシードリポジトリを使って、単純なアプリを地面から出そうとしています。このコードはWebサーバー上でホストされていますが、この目的のためにPlunker hereにコードをコピーしました。以下のコードもあります。あなたが提供する可能性のある洞察に感謝します。角度1.5.xのルーティングが機能しない

Index.htmlと

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.js"></script> 
    <script type="text/javascript" src="script1.js"></script> 
    <script type="text/javascript" src="script2.js"></script> 
    <script type="text/javascript" src="script3.js"></script> 
    </head> 

    <body> 
    <header ng-include="'header.html'"></header> 
    <div ng-view></div> 
    </body> 

</html>

home.html

<div ng-controller='homeCtrl'> 
    <h2>{{ location }}</h2> 
    <p>This is the home page content.</p> 
    <a href='#faq'>FAQ</a> 
</div>

faq.htmlよく

<div ng-controller='faqCtrl'> 
    <h2>This is the FAQ.</h2> 
    <p>{{ question }}</p> 
</div>

SCRIPT1

angular.module('testApp', [ 
    'ngRoute', 
    'home', 
    'faq' 
]) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.otherwise('/'); 
}]);

スクリプト2

angular.module('home', ['ngRoute']) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl : 'home.html', 
     controller : 'homeCtrl' 
    }); 
}]) 

.controller('homeCtrl', [function ($scope) { 
    $scope.location = 'USA'; 
}]);

Script3

angular.module('faq', ['ngRoute']) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/faq', { 
     templateUrl : 'faq.html', 
     controller : 'faqCtrl' 
    }); 
}]) 

.controller('faqCtrl', [function ($scope) { 
    $scope.question = 'Who am I?'; 
}]);

出典

2017-06-07 Keegan S.

アプリでいくつかのタイプミス/不作為を持っている：

のindex.htmlで、あなたはng-appでアプリ名が欠落しています

<html ng-app="testApp">

"home"と "faq"コントローラでは、を使用する必要があります注射用210：

用途：

.controller('homeCtrl', ['$scope', function ($scope) {

の代わりに：

.controller('homeCtrl', [function ($scope) {

最後に、home.htmlとfaq.htmlよくで、まったくng-controllerを使用しないでください。ルート定義では、各ルートで使用するコントローラを指定しています。テンプレート内で再度指定すると、2番目のコントローラがインスタンス化されます。

Plnkr

出典

2017-06-07 17:07:54

おかげで - 私はあなたがPlunkerリンクにコードを修正しました変更を参照してください。しかし、ウェブサーバ上のコードを編集したときには、特に ''に ' 'を変更すると、ページ全体が空白になってしまった - ヘッダースニペットがなくなってしまった。それを単に ''に変更すると、ヘッダーが元の状態に戻ります。何か案は？ –

'ng-app'に渡す名前は、あなたのアプリのメインモジュールの名前と一致する必要があります。上のコードでは "ng-app"（Script1から）です。あなたの本当のアプリでは、多分あなたは別の名前を使用していますか？ –

ええ、名前はモジュールの名前と一致します。 Plunkerと比べて、実際のアプリの動作がどう違うのかわかりません。 –

角度1.5.xのルーティングが機能しない

答えて

関連する問題