角路由不能正常工作？

Question

我正在嘗試在angular js中進行路由，並且Server運行正常。 但是角度路由無法正常工作，只有main.html頁面出現在ng-view中，second.html沒有出現。 當單擊html中的第一個和第二個時，同一個mainController正在工作，而不是secondController。

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

 <h1> this is second </h1>

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");

  }]);

Answer 1

問題是您的scripts ，無法使用googleapis scripts 。

 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>

角路由不能正常工作？

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-20 01:02:22

角路由不能正常工作？

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-20 01:02:22

解決方案1
0 已采納 2017-05-20 01:02:22