Angularjs routes not working here
Question
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. But nothing affect.
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
I have used angularjs version of 1.5.7
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 answers
solution1
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 / .
solution2
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:
<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>
solution3
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'
})
solution4
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.