AngularJs路由没有错误，但是不起作用
[英]AngularJs route no error but not working
问题描述
我正在使用路由创建一个演示应用程序。 即使console中没有错误，我也看不到我的内容。 这里可能出什么问题了。 我创建了两个具有不同内容的单独的html文件
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src = "js/junk.js"></script>
</head>
<body ng-app="junkapp">
<div ng-controller = "junkController">
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/first">First</a></li>
<li><a href="#/second">Second</a></li>
</ul>
<div ng-view>
</div>
</div>
</body>
</html>
var app = angular.module("junkapp", ['ngRoute']);
app.controller("junkController", function($scope){
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'junk.html',
})
// route for the about page
.when('/first', {
templateUrl : 'first.html',
})
// route for the contact page
.when('/second', {
templateUrl : 'second.html',
});
});
});
4 个解决方案
解决方案1
2 2017-05-04 12:39:04
配置不应该在控制器之下。
我们无法在控制器或服务中定义路由，因为需要在将配置注入到我们要使用的任何东西中之前进行配置。我们在config函数中对提供程序所做的任何配置都将允许我们访问预先配置的路由这些提供程序被注入时的实例。
var app = angular.module('junkapp',['ngRoute']); app.config(function($routeProvider) { $routeProvider. when('/', { templateUrl : "home.html" }). when('/first', { template : "<p>Hi First</p>" }). when('/second', { template : "<p>Hi second</p>" }); }); app.controller("junkController", function($scope){ $scope.text = "Welcome"; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <script type="text/ng-template" id="home.html"> <p>Hi Home</p> </script> <body ng-app="junkapp"> <div ng-controller = "junkController"> <ul> <li><a href="#/">Home</a></li> <li><a href="#/first">First</a></li> <li><a href="#/second">Second</a></li> </ul> <div ng-view> </div> </div> </body>
解决方案2
0 2017-05-04 12:33:54
app.config代码不应写在控制器中 。 将其移出控制器，它将起作用：
var app = angular.module("junkapp", ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/', { template : "<h1>Main</h1><p>Click on the links to change this content</p>" }) .when('/first', { template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" }) .when('/second', { template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" }); }); app.controller("junkController", function($scope) { });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <body ng-app="junkapp"> <div ng-controller = "junkController"> <ul> <li><a href="#/">Home</a></li> <li><a href="#/first">First</a></li> <li><a href="#/second">Second</a></li> </ul> <div ng-view> </div> </div> </body>
解决方案3
0 2017-05-04 12:35:39
将配置移出控制器。
DEMO
var app = angular.module("junkapp", ['ngRoute']); app.controller("junkController", function($scope){ }); app.config(function($routeProvider) { $routeProvider .when('/', { template : "<h1>Main</h1><p>Click on the links to change this content</p>" }) .when('/first', { template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" }) .when('/second', { template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" }); });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <body ng-app="junkapp"> <div ng-controller = "junkController"> <ul> <li><a href="#">Home</a></li> <li><a href="#first">First</a></li> <li><a href="#second">Second</a></li> </ul> <div ng-view> </div> </div> </body>
解决方案4
0 2017-05-04 12:46:33
将配置设置在控制器之外。
var app = angular.module("junkapp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'junk.html',
})
// route for the about page
.when('/first', {
templateUrl : 'first.html',
})
// route for the contact page
.when('/second', {
templateUrl : 'second.html',
});
});
app.controller("junkController", function($scope){
});
使用routeprovider的AngularJS路由不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.