0

I'm making a project with angularJS and PHP.
I've made some edit but now it do not work... The problems is that I've got no error in console and angular work (I can get it version) but my views are not displayed...
Can you help to uderstand why ?
Before I was getting serviceProvider error but I don't know if I fix it because no I'm stuck with this problems and I really don't know why...

Here is my 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) {

  });

My 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>
2
  • 1
    What are you expecting to see? Commented Sep 25, 2014 at 13:17
  • On the main page only html from a views, for conseils I display a view which get data from my dataase Commented Sep 25, 2014 at 13:34

1 Answer 1

2

The problem is you are creating your module over and over. Check out the creation vs retrieval section in the docs https://docs.angularjs.org/guide/module.

You had a few typos causing you problems. I forget all the steps I took (one was the conseils controller was misspelled), but here is a plunkr that renders the main view:

app.controller('ConseilsCtrl', function ($scope, services) {

http://plnkr.co/edit/hkR8Wp?p=preview

links aren't quite right yet, but I'll leave that to you.

Sign up to request clarification or add additional context in comments.

4 Comments

I just edit my file to create the var for my angular module and there is no change after change all
Can you update your code snippet. I'd add a console.log to your mainctrl to verify its getting executed as expected.
Edited, console.log do not appear
Sorry for the time, With your code everything work fin Thanks you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.