JavaScript — AngularJS — Нет ошибки, но нет представления
Я делаю проект с AngularJS и PHP.
Я сделал некоторые изменения, но теперь это не работает …
Проблема в том, что у меня нет ошибок в работе консоли и углов (я могу получить версию), но мои представления не отображаются …
Можете ли вы помочь понять, почему?
До того, как я получил сообщение об ошибке serviceProvider, но я не знаю, смогу ли я это исправить, потому что нет, я застрял с этими проблемами, и я действительно не знаю, почему …
Вот мой app.js
'use strict';
var app = angular.module('MyApp', ['ngRoute']);
app.factory('services', ['$http', function($http) {
var serviceBase = '/services/';
var obj = {};
obj.getConseils = function(){
return $http.get(serviceBase + 'conseils');
};
obj.getConseil = function(conseilID){
return $http.get(serviceBase + 'conseil?id=' + conseilID);
};
obj.getRoulottes = function(type, marque, dimension, couche, prix){
return $http.get(serviceBase + 'roulottes?type=' + type + '&marque=' + marque + '&dimension=' + dimension + '&couche=' + couche + '&prix=' + prix);
};
obj.getRoulotte = function(roulotteID){
return $http.get(serviceBase + 'roulotte?id=' + roulotteID);
};
return obj;
}]);
/**
* @ngdoc overview
* @name MataneCaravaneGoApp
* @description
* # MataneCaravaneGoApp
*
* Module principal de l'application
*/
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
title: 'Accueil',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/conseils', {
title: 'Nos conseils',
templateUrl: 'views/conseils.html',
controller: 'ConseilsCtrl'
})
.when('/conseil/:conseilID', {
title: 'Conseil',
templateUrl: 'views/conseil.html',
controller: 'ConseilCtrl'
})
.when('/roulottes/type/:type/marque/:marque/dimension/:dimension/couche/:couche/prix/:prix', {
title: 'Roulottes',
templateUrl: 'views/roulottes.html',
controller: 'RoulottesCtrl'
})
.when('/roulottes/type/:type', {
title: 'Roulottes',
templateUrl: 'views/roulottes.html',
controller: 'RoulottesCtrl'
})
.when('/roulotte/:roulotteID', {
title: 'Roulotte',
templateUrl: 'views/roulotte.html',
controller: 'RoulotteCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current) {
$rootScope.title = current.$$route.title;
});
}]);
app.controller('404Ctrl', function ($scope) {
});
app.controller('ConseilsCtrl', function ($scope, services) {
services.getConseils().then(function(data){
$scope.conseils = data.data;
});
});
app.controller('MainCtrl', function ($scope) {
console.log('test');
});
app.controller('RoulotteCtrl', function ($scope) {
});
app.controller('RoulottesCtrl', function ($scope) {
});
Мой index.html
<!doctype html>
<html class="no-js" >
<head>
<meta charset="utf-8">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="MyApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Accueil</a></li>
<li><a ng-href="#/conseils">Conseils</a></li>
</ul>
<h1 class="text-muted">MyApp</h1>
</header>
<div ng-view=""></div>
<footer class="footer">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</footer>
<!--[if lt IE 9]>
<script src="scripts/es5-shim/es5-shim.js"></script>
<script src="scripts/json3/lib/json3.js"></script>
<![endif]--><script src="scripts/jquery/dist/jquery.js"></script>
<script src="scripts/angular/angular.js"></script>
<script src="scripts/bootstrap/dist/js/bootstrap.js"></script>
<script src="scripts/angular-resource/angular-resource.js"></script>
<script src="scripts/angular-sanitize/angular-sanitize.js"></script>
<script src="scripts/angular-animate/angular-animate.js"></script>
<script src="scripts/angular-touch/angular-touch.js"></script>
<script src="scripts/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Решение
Проблема в том, что вы создаете свой модуль снова и снова. Проверьте раздел создания и поиска в документах https://docs.angularjs.org/guide/module.
У вас было несколько опечаток, вызывающих у вас проблемы. Я забыл все шаги, которые я предпринял (один из них был написан с ошибкой), но вот punkr, который отображает основной вид:
app.controller('ConseilsCtrl', function ($scope, services) {
http://plnkr.co/edit/hkR8Wp?p=preview
ссылки еще не совсем правильные, но я оставлю это вам.
Другие решения
Других решений пока нет …