ngRoute找不到模板
我是angular的新手，很难让ngRoute拿起我的模板文件。
这是我的index.html：
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="app.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
<div>
<ul>
<li><a href="#/home">home</a></li>
</ul>
</div>
</nav>
<body>
<div ng-view>
</div>
</body>
</html>这是我的app.js：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('MainCtrl', function($scope) {
$scope.message = 'Hello World';
});
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/home'
});
}]);下面是我的pages/home.html：
<div ng-controller="MainCtrl">
<p>Test</p>
<p>{{ message }}</p>
</div>我可以看到它将#/附加到根url中，所以这可能部分起作用了；但是，它似乎没有在"pages/home.html“中呈现模板。
我已经检查了cdn url，以确保没有任何版本不一致，等等，但情况似乎并非如此。
这几乎是我的第一个Angular项目，我刚刚离开了文档，但肯定有一些我没有看到的东西。来自其他服务器端项目，堆栈跟踪的缺乏正在杀死我，哈哈。
是不是我在上面的代码中遗漏了什么，使我的模板无法在'/‘中呈现？
谢谢!
回答 3
Stack Overflow用户
发布于 2016-05-14 12:00:03
这是我的代码，它工作得很好，你可以从中得到帮助。
var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'views/business/business_home_events.html',
controller: 'EventListController'
});
});
EventList.controller('EventListController', ['$scope', '$http', '$route', function($scope, $http, $route){
// Do your work
}]);Stack Overflow用户
发布于 2016-05-14 12:41:35
问题出在你的when ('/')上。因为你的.when有#/home -它会在url中查找该路径。
将其更改为
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', { // <-
templateUrl: 'pages/home.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);Stack Overflow用户
发布于 2016-05-14 13:00:21
我已经执行了你的代码，并且在mozilla上工作得很好。
然而，如果我们在没有放入服务器的情况下运行文件，那么在跨域请求的chrome中会有一个问题。
但是如果你把它放在服务器上(可能是xampp/wampp)并运行这个文件，它在chrome上也能正常工作。您正在使用的angular库向另一台服务器发出了http请求。
https://stackoverflow.com/questions/37222325
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号