Angularjs路线在这里不起作用
[英]Angularjs routes not working here
问题描述
I have used all possible way to solve this but failed. 
我已经用一切可能的方法来解决这个问题，但失败了。 If you have any query to understand this problem then let me know. 如果您有任何疑问可以了解此问题，请告知我们。 Below is my code and check if there any syntax error. 下面是我的代码，检查是否有语法错误。 I have used local angular js file for route and try with cdn. 我已经使用本地角度js文件进行路由并尝试使用cdn。 But nothing affect. 但没有任何影响。
Index.html 的index.html
<!-- define angular controller -->
<body ng-app="mydemo" ng-controller="mainController">
<ul>
<li><a href="#"> Home</a></li>
<li><a href="#about"></i> About</a></li>
<li><a href="#contact"></i> Contact</a></li>
</ul>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="script.js"></script>
Script.js 的script.js
I have used angularjs version of 1.5.7 我使用了1.5.7的angularjs版本
var mydemo = angular.module('mydemo', ['ngRoute']);
mydemo.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
mydemo.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
mydemo.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
mydemo.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
4 个解决方案
解决方案1
0 2016-07-15 14:06:15
Instead of 代替
<li><a href="#contact"></i> Contact</a></li>
how about trying 怎么样的尝试
<li><a ng-href="#/contact"></i> Contact</a></li>
I think the routes have to match exactly, which includes the / . 我认为路线必须完全匹配，其中包括/ 。
解决方案2
0 2016-07-15 14:06:30
Try this script.js file:
angular.module('mydemo', ['ngRoute']).config(function($routeProvider) {
$routeProvider.
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
mydemo.controller('mainController', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
mydemo.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
mydemo.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
And index.html: 和index.html：
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-app="mydemo" ng-controller="mainController">
<ul>
<li><a href="#"> Home</a></li>
<li><a href="#about"></i> About</a></li>
<li><a href="#contact"></i> Contact</a></li>
</ul>
<div ng-view></div>
</body>
解决方案3
0 2016-07-15 14:30:29
Check the fix below: 检查下面的修复：
$routeProvider // there are two dots in your code here, just remove one and it will fix the issue
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
解决方案4
0 2016-07-15 14:41:29
There is a good chance that the version of angular you are using doesn't match the version of angular route. 您使用的角度版本很可能与角度路径的版本不匹配。 Make sure the versions are compatible. 确保版本兼容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.