Search code examples
javascripthtmlangularjsroutesangularjs-ng-route

AngularJS Route doesn't work

I started with AngularJS, and my route doesn't work. I searched in google and try some solution found but nothing works.

My 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>

My 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: '/'});

});

And my controller (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);
            });
        }
    };
 }]);

My tree:

  • public
    • javascripts
      • controllers
      • VehiculesCtrl.js
      • app.js
    • views
    • index.html

Help me please :) ...... And sorry for my english x) Thanks

Solution

  • I think you should add

    <body ng-controller="VehiculeCtrl">

    to your controller and remove 

    var myApp = angular.module('myApp', ['ngRoute']);

    from your controller.

    Then export your controller from app.js like

    myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)