11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Routage avec AngularJS

Bonjour,

Je tente d'apprendre AngularJS grâce à quelques tutos vidéos mais je bloque sur un point (alors que de mon coté, tout semble impeccable) : le routage.

Je dispose de 3 pages, façon MVC : une page index.html (j'ai épuré au max ici pour conserver que ce qui est intéressant)
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Ma Page Angular</title>
  </head>
  <body ng-app="pc">
    <div>
      texte index.html
    </div>
    <ng-view  onload=""  $autoscroll=""></ng-view>


    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>


La vue "connexion.html" (dossier ./templates/)

<section ng-controller="connexionCtrl">
  Page connexion
</section>


La vue "accueil.html" (dossier ./templates/)

<section ng-controller="accueilCtrl">
  accueil
</section>


Pour simplifier le dev, j'ai regroupé tout mon code JS dans un seul fichier : app.js

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

/*
 * Routage
 */

pc.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('./connexion', {
        templateUrl: './templates/connexion.html',
        controller: 'connexionCtrl'
      }).
      when('./accueil', {
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      }).
      otherwise({
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      });
}]);


/*
 * Premiers contrôleurs
 */

pc.controller('connexionCtrl', function ($scope){
  alert("bonjour")
});

pc.controller('accueilCtrl', function ($scope){
  var jeton = "";

  if (jeton == "") {
    //document.location = "./connexion";
  }
});

Je charge actuellement ma vue accueil, preuve que le routage par défaut fonctionne
texte index.html
accueil


Le problème étant quand je veux aller sur une autre page (ou un élément inexistant, qui devrait me ramener sur la page d'accueil), j'ai droit à une belle erreur 404 ...

Si vous avez des idées, je suis preneur !

Merci à vous Smiley cligne
Modifié par Gam (27 Mar 2017 - 14:40)
Bonjour,

Une solution pourrait être de faire une redirection vers une autre page :


    ...
      otherwise({
        redirectTo : './accueil'
      });
Bonsoir Gam,
je débute aussi en AngularJS et ton post ma donné le courage d'attaquer le module-route...
J'ai testé ton code en rajoutant ce code dans index.html avant le ng-view pour pouvoir tester :

<a href='#accueil'>Accueil</a>
<a href='#connexion'>Connexion</a>

et en supprimant les "points" dans les conditions "when" : 


$routeProvider.
      when('/connexion', {
        templateUrl: './templates/connexion.html',
        controller: 'connexionCtrl'
      }).
      when('/accueil', {
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      }).
      otherwise({
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      });


et cela fonctionne !

Bonne soirée
Bonjour GJoba,

Je viens de tester la modif et non, j'ai rien du tout chez moi.
L'URL change pour devenir http://virtualhost/#!#connexion pourtant j'ai fait la même chose que toi.

Fausse joie me concernant Smiley decu 
<body ng-app="pc">
    <div>
      <a href='#accueil'>Accueil</a>
      <a href='#connexion'>Connexion</a>
    </div>

    <div>
      texte index.html
    </div>
    <ng-view  onload=""  $autoscroll=""></ng-view>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>

/*
 * Routage
 */

pc.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/connexion', {
        templateUrl: './templates/connexion.html',
        controller: 'connexionCtrl'
      }).
      when('/accueil', {
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      }).
      otherwise({
        templateUrl: './templates/accueil.html',
        controller: 'accueilCtrl'
      });
}]);


Point important (mais je doute que ça dérange, à ce niveau là en tout cas) : il va s'agir d'une application Cordova mais les balises META relatives (sécurité, format, zoom, ...) ont été commentés.
J'ai refais un copié/collé de ta page principale et la seule chose que j'ai changée
ce sont les chargements des modules angular!

Tu les as en local et moi je vais les chercher dans googleapis!

 
<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.4.8/angular-route.js"></script>


bonne journée
Meilleure solution
Bonjour GJboba,

Ça fonctionne chez moi désormais ... avec la version 1.4.8 d'Angular (j'utilisais la version 1.6).

Reste à voir ce qui a changé et comment corriger ça.

Merci Smiley smile
Modifié par Gam (30 Mar 2017 - 15:27)
Ajouter le code suivant dans votre configuration de routage
app.config(function($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);

$routeProvider.

when('/', {
templateUrl: 'index.html'


}).
Sujet clos
Aller à