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.