Question

我正在尝试在角度js中进行路由，并且服务器运行正常。但角度路由无法正常工作，只有main.html页面出现在ng-view中，second.html未来。当点击html中的第一个和第二个时，同样的mainController不是第二个控制器。

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中的问题。

＆＃13;

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';
    }]);

＆＃13;

<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>

＆＃13;

角度路由无法正常工作？

1 个答案: