AngularJs视图路由不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs视图路由不起作用相关的知识，希望对你有一定的参考价值。
试图在AngularJs上进行简单的路由。我将ng-app添加到html一次。我所有的javascript都在1个文件中。我的ng-view组件没有显示任何内容。有我的index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul>
<li>
<a href="#/">Home</a>
</li>
<li>
<a href="#/gallery">Gallery</a>
</li>
<li>
<a href="#/contribute">Contribute Photo</a>
</li>
</ul>
<div ng-view></div>
</body>
</html>
我的main.js文件
const app = angular.module('app', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'homeController'
})
.when('/gallery', {
templateUrl: '/pages/gallery.html',
controller: 'galleryController'
})
.when('/contribute', {
templateUrl: '/pages/contribute.html',
controller: 'galleryController'
});
})
.controller('homeController', function($scope) {
})
.controller('galleryController', function ($scope) {
});
我试图从网站和localy使用js libs，但它没有帮助。与互联网上的例子相比，但我发现的一切与我的相似。在我的模板文件中，我只是放了一些h1 headers.There is my project directory
答案
这是工作代码：https://plnkr.co/edit/oHY8XMKk5Na13wU5JtNg?p=preview
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<br/><h1>page1</h1>"
})
.when("/red", {
template : "<br/><h1>page2</h1>"
})
.when("/green", {
template : "<br/><h1>page3</h1>"
})
.when("/blue", {
template : "<br/><h1>Put your template url by by page url</h1>"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
以上是关于AngularJs视图路由不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Recyclerview 滚动在嵌套滚动视图中的片段中不起作用
记一次AngularJs 路由 $stateChangeStart不起作用（细节决定成败）
使用 Express/Passport、AngularJS 和 ensureLoggedIn 的身份验证和路由在“/”url 上不起作用