角度ルーティングが正しく機能していませんか？

角度jsでルーティングを実行しようとしていますが、Serverはうまく動作しています。しかし、角度ルーティングは正しく動作していません、main.htmlページだけがng-viewに来て、second.htmlは来ていません。同じmainControllerの第1と第2をクリックすると、secondControllerではなく、動作しています。角度ルーティングが正しく機能していませんか？

<h1> this is second </h1>

HTML

<!Doctype html> 

<html ng-app="myApp"> 
<meta charset=utf-8" /> 
<head> 


<script src="http://code.angularjs.org/snapshot/angular.min.js"></script> 
<script src="http://code.angularjs.org/snapshot/angular-route.min.js"> 
</script> 
<script type="text/javascript"src="app.js"></script> 
<body> 
<header> 
    <li><a href="#/"><i></i>first</a></li> 
    <li><a href="#/second"><i></i>Second</a></li> 
</header> 

    <div class = "container"> 



    <div ng-view> 

       </div> 

     </body>

main.htmlを

<h1> this is main </h1>

second.html app.js

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','$log','$location',function($scope,$log,$location){ 

     $log.info($location.path()); 
     console.log("first"); 

    }]); 

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

     $log.info($location.path()); 
     console.log("second"); 

    }]);

出典

2017-05-19 anant

あなたのコンソールにエラーを得たのですか？ – Zooly

"secondController"はどこですか？ –

問題はあなたのscriptsです、彼らはgoogleapisからのものを使用していません。

var myApp = angular.module('myApp', ['ngRoute']); 
 
myApp.config(function ($routeProvider) { 
 
    $routeProvider 
 
     .when('/', { 
 
      template: '<h1>Main Page</h1>', 
 
      controller: 'mainController', 
 
     }) 
 
     .when('/second', { 
 
      template: '<h1>{{ test }}</h1>', 
 
      controller: 'secondController', 
 
     }) 
 
}); 
 
myApp.controller('mainController', 
 
    ['$scope', '$log', '$location', function ($scope, $log, $location) { 
 
     $log.info($location.path()); 
 
     console.log("first"); 
 
    }]) 
 
    .controller('secondController', ['$scope', function ($scope) { 
 
     $scope.test = 'Testing angular routes'; 
 
    }]);

<script src="https://code.angularjs.org/1.6.4/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script> 
 
<body ng-app="myApp"> 
 
<header> 
 
    <li><a href="#!/"><i></i>first</a></li> 
 
    <li><a href="#!/second"><i></i>Second</a></li> 
 
</header> 
 
<div class="container"> 
 
    <div ng-view> 
 
    </div> 
 
</div> 
 
</body>

出典

2017-05-20 01:02:22 julekgwa

ありがとう！ – anant

なぜスクリプトでは実行されないのですか \t – anant

テンプレートに変更しないでください....テンプレートURLで実行していません（より大きなhtmlファイルを含める） – anant

角度ルーティングが正しく機能していませんか？

答えて

関連する問題