AngularJS路線不起作用
[英]AngularJS Route doesn't work
問題描述
我從AngularJS開始，但我的路線無效。 我在Google中搜索並嘗試找到了一些解決方案，但沒有任何效果。
我的index.html（public / index.html）
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projet Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>-->
<li><a href="#vehicules">Véhicules</a></li>
<li><a href="" ng-click="">Agences</a></li>
<li><a href="" ng-click="">Agents</a></li>
<li><a href="" ng-click="">Statut</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- div pour les templates-->
<div ng-view>
</div>
</body>
</html>
我的app.js（javascript / app.js）：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '../views/index.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/vehicules', {
templateUrl : '../views/vehicules.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/agents', {
templateUrl : '../views/vehicules.html',
controller : 'AgentsCtrl'
})
// route for the about page
.when('/agences', {
templateUrl : '../views/vehicules.html',
controller : 'AgencesCtrl'
})
// route for the about page
.when('/status', {
templateUrl : '../views/vehicules.html',
controller : 'StatusCtrl'
})
.otherwise({redirectTo: '/'});
});
還有我的控制器（controllers / VehiculesCtrl.js）：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {
$scope.text = 'Salut ! je teste le controleur';
var url = '127.0.0.1:3000/vehicules';
//console.log("curieux", VehiculesGet);
var res = VehiculesGet.getAllVehicules(url, function(data, status){
console.log("test",status);
console.log("test",data);
$scope.result = data;
});
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
//var url = 'http://127.0.0.1:3000/vehicules';
var result;
var data;
return {
getAllVehicules: function(url, callback) {
$http.get('http://127.0.0.1:3000/vehicules')
.success(function (data, status) {
// données récupérées avec succès
callback(data, status);
}).error(function(data,status){
callback(data, status);
});
}
};
}]);
我的樹：
- 上市
- JavaScripts
- 控制器
- VehiculesCtrl.js
- app.js
- 意見
- index.html
- JavaScripts
請幫助我:) ......抱歉我的英語x）謝謝
4 個解決方案
解決方案1
0 2016-05-04 16:58:57
嘗試在角度之后而不是在控制器之后加載角度路線，這應該可以工作
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
</head>
解決方案2
0 2016-05-04 17:15:15
您應該從VehiculesCtrl.js中刪除var myApp = angular.module('myApp', ['ngRoute']) 。 在VehiculesCtrl.js中，您應該使用在app.js中聲明的myApp變量
解決方案3
0 2016-05-04 17:20:06
您在標記中缺少ng-view元素。 這是路由功能放置templateUrl內容的地方。 請參閱此鏈接以獲取文檔： https : //docs.angularjs.org/api/ngRoute/directive/ngView
解決方案4
0 已采納 2016-05-04 18:35:49
我認為你應該補充
<body ng-controller="VehiculeCtrl">
到您的控制器並刪除
var myApp = angular.module('myApp', ['ngRoute']);
從您的控制器。
然后像這樣從app.js導出控制器
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)
為什么我的 angularJS 路由不起作用，chrome'error [$injector:unpr] Unknown provider
[英]why my angularJS route doesn't work, chrome'error [$injector:unpr] Unknown provider
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.