无法使用ngroute重定向到其他页面 [英] Cannot redirect to another page using ngroute
本文介绍了无法使用ngroute重定向到其他页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在此处输入代码这就是我所拥有的： index.html
<！DOCTYPE html>
< html ng-app =homepageApp>
< head>
< meta charset =UTF-8>
< title>测验主页< /标题>
< link rel =stylesheethref =cs / homepage.css>
< script src =lib / angular.js>< / script>
< script src =js / home.js>< / script>
<！ - NG ROUTE - >
< script type =text / javascriptsrc =i>< / script>
< / head>
< body ng-controller =mainController>
< h1>欢迎使用线上测验管理< / h1>
< div id =navigationBar>
< ul>
< li>< a href =＃>主页< / a>< / li>
< li>< a href =＃about>关于< / a>< / li>
< li>< a href =＃contact>联络< / a>< / li>
< li style =float：right>< a href =＃login>登入< / a>< / li>
< / ul>
< / div>
<！ - 角模板 - >
<！ - 这是内容将被注入的地方 - >
< div ng-view>< / div>
< / body>
< / html>
home.js
//创建模块
var app = angular.module（homepageApp，[ngRoute]）;
//配置我们的路线
app.config（函数（$ routeProvider）{
$ routeProvider
//主页路线
.when（/ homepage，{
templateUrl：homepage.html，
控制器：mainController
}）
//路由登录
.when（/ login，{
templateUrl：login.html，
}）
//路由约
.when（/ about，{
templateUrl：about.html，
控制器：aboutController
}）
//联系路线
.when（/ contact，{
templateUrl：contact.html，
controller：contactController
}）;
}）;
//创建控制器并注入Angular的$ scope
app.controller（mainController，function（$ scope）{
$ scope.message ='Everyone come our homepage ';
}）;
app.controller（loginController，function（$ scope）{
}）;
about.html
<！DOCTYPE html>
< html ng-app =homepageApp>
< head>
< meta charset =UTF-8>
< title>< / title>
< / head>
< h1>关于页面< / h1>
< p> {{message}}< / p>
< / body>
< / html>
解决方案
正如@Barclick所说，您必须导入angular-正确路由。
由于您使用的是本地的angularjs，因此不确定您使用的是哪个版本。 1.6+版本的库已经有了一些变化。请看这里的详细答案：
https://stackoverflow.com/a/41655831/6347317
我创建了角度为1.6+以上的plunker。请参阅下面的内容：
http：/ /plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview
注意：请参阅HTML中引用路线的方式＃！路线。
HTML：
<！DOCTYPE html>
< html ng-app =homepageApp>
< head>
< meta charset =utf-8/>
< title> AngularJS Plunker< / title>
< script> document.write（'< base href =''+ document.location +'/>'）;< / script>
< link rel =stylesheethref =style.css/>
< script src =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js>< / script>
< script src =app.js>< / script>
< / head>
< body ng-controller =mainController>
< h1>欢迎使用线上测验管理< / h1>
< div id =navigationBar>
< ul>
< li>< a href =＃！>主页< / a>< / li>
< li>< a href =＃！about>关于< / a>< / li>
< li>< a href =＃！contact>联络人< / a>< / li>
< li style =float：right>< a href =＃！login>登入< / a>< / li>
< / ul>
< / div>
<！ - 角模板 - >
<！ - 这是内容将被注入的地方 - >
< div ng-view>< / div>
< / body>
< / html>
JS：
//创建模块
var app = angular.module（homepageApp，['ngRoute']）;
//配置我们的路线
app.config（函数（$ routeProvider）{
$ routeProvider
//主页路线
.when（'/'，{
templateUrl：'homepage.html'，
控制器：'mainController'
}）
//路由登录
。当（'/ login'，{
templateUrl：'login.html'，
}）
//路由约
.when（'/ about'，{
templateUrl：'about.html'，
controller：'aboutController'
}）
//联系路线
.when（'/ contact'，{
templateUrl：'contact.html'，
//控制器：'contactController'
}）;
}）;
//创建控制器并注入Angular的$ scope
app.controller（mainController，function（$ scope）{
$ scope.message ='Everyone come our homepage ';
}）;
$ b app.controller（aboutController，function（$ scope）{
$ scope.message ='每个人都来我们关于页面';
}）;
So I am using ngroute to like redirect to other html pages. I got this off from a tutorial online but when I try to run, it does not show the message or it doesn't go the desired page. For example, if I want to click on the homepage on the nav bar, it should redirect to the homepage. If I want to redirect to login page, it should go to login page. I am not sure what is wrong. enter code hereThis is what I have:
index.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title>Quiz HomePage</title>
<link rel="stylesheet" href="cs/homepage.css">
<script src="lib/angular.js"></script>
<script src="js/home.js"></script>
<!-- NG ROUTE -->
<script type="text/javascript" src="i"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float: right"><a href="#login">Login</a></li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
home.js
// creating the module
var app = angular.module("homepageApp", ["ngRoute"]);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when("/homepage", {
templateUrl: "homepage.html",
controller: "mainController"
})
// route for login
.when("/login", {
templateUrl: "login.html",
})
// route for about
.when("/about", {
templateUrl: "about.html",
controller: "aboutController"
})
// route for contact
.when("/contact", {
templateUrl: "contact.html",
controller: "contactController"
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("loginController", function($scope) {
});
about.html
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<h1>About Page</h1>
<p>{{ message }}</p>
</body>
</html>
解决方案
As @Barclick said, you have to import angular-route correctly. Since you are using angularjs from your local, not sure which version you are using. There have been some changes to the library from version 1.6+ . Please look at the detailed answer here : https://stackoverflow.com/a/41655831/6347317
I have created a plunker with angular 1.6+ . Please see below:
http://plnkr.co/edit/xDOSh3OSdKcBFTPJN6qj?p=preview
Note: Please see the way the route is referenced in HTML "#!route".
HTML:
<!DOCTYPE html>
<html ng-app="homepageApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<h1>Welcome To The Online Quiz Management</h1>
<div id="navigationBar">
<ul>
<li><a href="#!">Home</a></li>
<li><a href="#!about">About</a></li>
<li><a href="#!contact">Contact</a></li>
<li style="float: right"><a href="#!login">Login</a></li>
</ul>
</div>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
JS:
// creating the module
var app = angular.module("homepageApp", ['ngRoute']);
// configure our routes
app.config(function($routeProvider) {
$routeProvider
// route for the homepage
.when('/', {
templateUrl: 'homepage.html',
controller: 'mainController'
})
// route for login
.when('/login', {
templateUrl: 'login.html',
})
// route for about
.when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for contact
.when('/contact', {
templateUrl: 'contact.html',
// controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
app.controller("mainController", function($scope) {
$scope.message = 'Everyone come our homepage';
});
app.controller("aboutController", function($scope) {
$scope.message = 'Everyone come our about page';
});
这篇关于无法使用ngroute重定向到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
