Angular 1.5.x路由不起作用

Question

我在这里查看了有关Angular路由的数十个问题，但未能使其正常工作。 如果我忽略了任何内容，我深表歉意。 我一直在尝试使用Angularjs官方教程和种子库来启动一个简单的应用程序。 该代码托管在Web服务器上，但为此，我将代码复制到此处的 Plunker中。 该代码也在下面-感谢您提供的任何见解。

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

SCRIPT2

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

Answer 1

您的应用中有一些错别字/遗漏：

在index.html中，您缺少ng-app的应用名称：

<html ng-app="testApp">

在“ home”和“ faq”控制器中，您需要对注入使用正确的语法：

采用：

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

代替：

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

最后，在home.html和faq.html中，根本不要使用ng-controller 。 在路由定义中，您要指定要用于每个路由的控制器。 在模板中再次指定它会导致实例化第二个控制器。

Plnkr

Angular 1.5.x路由不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-07 17:07:54

Angular 1.5.x路由不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-07 17:07:54

解决方案1
0 已采纳 2017-06-07 17:07:54