角1.5.x路由不工作

我已经看了几十个关于Angular路由的问题，但一直没有能够得到这个工作。如果我忽略了任何事情，我很抱歉。我一直在尝试使用Angularjs官方教程和种子库来获得一个简单的应用程序。此代码托管在Web服务器上，但为此，我将代码复制到Plunker here。代码也在下面 - 谢谢你提供的任何洞察力。角1.5.x路由不工作

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

来源

2017-06-07 Keegan S.

你有一些错别字/在你的应用程序疏漏：

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

<html ng-app="testApp">

在您的“家庭”和“常见问题”控制器中，您需要使用correct syntax注射：

用途：

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

相反的：

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

最后，在Home.html中和的faq.html，不使用ng-controller可言。在您的路线定义中，您将指定要用于每条路线的控制器。在模板中再次指定它将导致第二个控制器被实例化。

Plnkr

来源

2017-06-07 17:07:54

感谢 - 我看你所做的更改那样固定在Plunker链接的代码。但是，当我在我的Web服务器上编辑代码时 - 特别是将''更改为'“时，它做了相反的事情，整个页面变为空白 - 即使标题片段消失了。将它重新修改为''会使标题恢复。有任何想法吗？ –

您传递给'ng-app'的名称应该与您应用的主模块的名称相匹配。在上面的代码是“ng-app”（来自Script1）。在你的真实应用中，也许你正在使用不同的名字？ –

是的，名称与模块的名称相匹配。我不明白为什么这个行为在实际应用上会比Plunker有任何不同。 –

角1.5.x路由不工作

回答

相关问题