最初のAngularJSアプリケーションを実行する際にいくつか問題があります。私のアプリケーションを実行すると、私のインデックス上のすべてのオブジェクトが正しく表示されます。ハイパーリンクをクリックしてview-2に移動すると、すべてのオブジェクトがプレーンテキスト{{object.property}のようにHTML上に表示されます。何が間違っていますか？AngularJSコントローラは最初のビューでのみ動作します

これは私のindex.htmlです：

<DOCTYPE html> 
<html ng-app="tutorialApp"> 
<head> 
<meta charset="UTF-8"> 
<title> Tutorial App</title> 
<script src="lib/angular.min.js"></script> 
<script src="lib/angular-route.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/MyController.js"></script> 
</head> 
<body> 

<div ng-view></div> 

</body> 
</html> 
</DOCTYPE>

これは私のapp.jsです：

var app = angular.module('tutorialApp', ["ngRoute", "MyControllerModule"]) 

    app.config(function ($routeProvider){ 

     $routeProvider 

      .when("/", { 
       controller: "MyController", 
       templateUrl: "views/one.html" 
      }) 


      .when("/two", { 
       controller: "ControllerTwo", 
       templateUrl: "views/two.html" 
      }) 

      .otherwise({ 
       redirectTo: "/" 
      }); 
    });

これは私のMyController.jsです：

angular.module("MyControllerModule", []) 

.controller("MyController", ["$scope", function($scope){ 

$scope.myFirstObject = {}; 
$scope.myFirstObject.title = "Main Page"; 
$scope.myFirstObject.subTitle = "Sub Title"; 

$scope.myFirstObject.bindOutput = 13; 

$scope.myFirstObject.firstname = "Wheelchair"; 
$scope.myFirstObject.lastname = "Terminator"; 

$scope.timesTwo = function(){ 
    $scope.myFirstObject.bindOutput *= 2; 
} 

}]) 

.directive("myFirstDirective", function(){ 
    return { 
     restrict: "E", 
     template: "<div>Hello how are you?</div>" 
    } 
}) 

.controller("ControllerTwo", ["$scope", function($scope) { 
    $scope.testObject = {}; 
    $scope.testObject.doSomething = "TEST TEST TEST TEST TEST!"; 

} 
]);

これは私の/ありますviews/one.html：

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

これは私の/views/two.html

<h1>Second View</h1> 
<h2>this is the second view...</h2> 
<br> 
<br> 

<p>Call object string: {{testObject.doSomething}}</p>

出典

2017-02-21 eekje87

プレス 'f12'と'オープンconsole'、あなたはいくつかのエラーを持っている、との質問に、そのエラーを貼り付けます。 – Sravan

ワンハットからtwo.html（Firefoxデバッガ）にスワップするとコンソールに何も表示されません – eekje87

コンソールを開いてページを更新すると、エラーが表示されます – Sravan

変更ルートへhrefです。 HTMLページではありません。

<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a>

あなたがブラウザにロードするために新しいHTMLページを呼び出して質問に行ったようにこれは

<a href="#/two">CLICK HERE FOR SECOND VIEW</a>

でなければなりません。角度アプリのテンプレートではありません。だから、{{object.property}}のような未知のものがすべて発生します。

出典

2017-02-21 11:47:53 SaiUnique

ハイパーリンクをクリックすると何も起こりませんhttp：// localhost：8080 /＃！/＃％2Ftwo – eekje87

これを試してください： 'href ="＃！/ two "' – SaiUnique

はい！うわー、ありがとう百万..私のチュートリアルで最後に行くことができます：D – eekje87

使用、

<a href="#two">CLICK HERE FOR SECOND VIEW</a>

守って、href="#two"

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="#two">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

Check this reference

EDIT：

は、あなたが問題を持っていると思わ# URLの

ソリューション：

HTML5モード

設定：あなたがHTMLファイルにベースを設定する必要があり

$routeProvider 
    .when('/two', { 
    templateUrl: 'views/two.html', 
    }); 
$locationProvider 
    .html5Mode(true);

<html> 
    <head> 
    <base href="/"> 
    </head> 
</html>

このモードでは、

<a href="/two">link</a>

例HTMLファイルに＃せずにリンクを使用：

http://test.com/base/two

出典

2017-02-21 12:09:27 Sravan

http：// localhost：8080 /＃！/＃two – eekje87

@ eekje87に変更されたブラウザURLのみが同じビューに表示されます。 – Sravan

AngularJSコントローラは最初のビューでのみ動作します

答えて

HTML5モード

関連する問題