[英]AngularJS ngRoute 404 page not found
我一直试图弄清楚为什么我的观点不起作用。 我不确定我是否缺少依赖项或只是有一些简单的错误。
当我通过pycharm运行程序时,显示的是index.html页面,当我单击指向不同视图的链接之一时,它显示的是404页面。
我的项目文件夹下有以下目录:
-lib
-CSS
-partials
-scripts-index.html
谁能看到我在做什么错? 谢谢。
AngularJS js文件:
var mainApp = angular.module('mainApp', []);
mainApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: '/partials/home.html',
controller: 'controller_home'
})
.when('/about', {
templateUrl: '/partials/about.html',
controller: 'controller_about'
})
.when('/cart', {
templateUrl: 'partials/cart.html',
controller: 'controller_cart'
})
.when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'controller_contact'
})
.when('/myAccount', {
templateUrl: 'partials/myAccount.html',
controller: 'controller_myAccount'
})
.otherwise({
redirectTo: '/partials/home'
});
}]);
mainApp.controller('controller_home', ['$scope', function controller_home($scope) {
$scope.message = "$scope.message : from controller_home";
}])
.controller('controller_about', ['$scope', function controller_about($scope) {
$scope.message = "$scope.message : from controller_about";
}])
.controller('controller_cart', ['$scope', function controller_cart($scope) {
$scope.message = 'this is the cart';
}]);
HTML档案:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<title>My Webpage Title</title>
<!--Stylesheet index.css-->
<link rel="stylesheet" href="CSS/index.css" type="text/css">
<link rel="stylesheet" href="CSS/animations.css" type="text/css">
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="scripts/mainApp.js"></script>
</head>
<body>
<!--Site Header-->
<div class="header">
<h1>Header to Page</h1>
</div>
<br>
<!--Site Navigation Bar-->
<div>
<a href="/home">Product</a> |
<a href="/cart">Cart</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a> |
<a href="/myAccount">My Account</a><br/>
<div ng-view></div>
</div>
<br>
<!--Site Footer-->
<footer class="footer">
<br>
<br>
<br>
</footer>
<footer class="footer-disclaimer">
<ul class="navbar">
<li><a href="policy.html">Policy and Agreement</a></li>
<li><a href="privacy.html">Privacy Policy</a> </li>
</ul>
</footer>
</body>
您缺少依赖关系ngRoute
var mainApp = angular.module('mainApp', ['ngRoute']);
您的控制器也应该是
mainApp.controller('controller_home', ['$scope', function($scope) {
$scope.message = "$scope.message : from controller_home";
}])
mainApp.controller('controller_about', ['$scope', function($scope) {
$scope.message = "$scope.message : from controller_about";
}])
mainApp.controller('controller_cart', ['$scope', function($scope) {
$scope.message = 'this is the cart';
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.