Le routage JS angulaire ne fonctionne pas

L'index.html ressemble à:

<!DOCTYPE html> <html lang="en" ng-app="HomeApp"> <head> <link rel="stylesheet" href="css/general_style.css"> <script src="js/angular_core/angular.min.v.1.2.16.js"></script> <script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script> <script src="js/angular_core/angular-route.min.v.1.2.16.js"></script> <script src="js/home_apps.js"></script> <script src="js/home_controllers.js"></script> <script src="js/home_services.js"></script> <title>AngularJS Routing example</title> </head> <body> <div> <ul> <li><a href="#contactus"> contact</a></li> <li><a href="#login"> login </a></li> <li><a href="#home"> home </a></li> </ul> </div> <div ng-view></div> </body> </html>

Le home_apps.js ressemble à:

 var MyHomeApp = angular.module('HomeApp', [ 'ngRoute', 'HomeControllers' ]); MyHomeApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/login', { templateUrl: 'partials/login.html' }). when('/contactus', { templateUrl: 'partials/contactus.html' }). when('/home', { templateUrl: 'partials/home.html', controller: 'WGHomeLanCtrl' }). otherwise({ redirectTo: 'partials/home.html', controller: 'WGHomeLanCtrl' }); }]);

Enfin, sous le dossier / partials, il y a 3 fichiers html: login.html:

  <div> <p class="right_margin"> <h1><a href="index.html">log in...</a></h1> </p> </div>

Contactus.html:

  <div> <p class="right_margin"> <h1>Contactus</h1> </p> </div>

Home.html:

  <div> <p class="right_margin"> <h1>home</h1> </p> </div>

Dans le monde réel, lorsque j'ouvre le index.html depuis Firefox, l'url ressemble à:

{Chemin du fichier} /index.html#/contactus

Mais le contenu de contactus.html n'est pas affiché – la ng-view ne fonctionne pas dans ce cas.

Je me sens comme là, ce serait un endroit délicat où l'erreur se cache, car j'ai passé beaucoup de temps là-dessus. Tout débogage sera grandement apprécié !!!

Ça marche bien

Regarde ça

Démonstration de travail

 var MyHomeApp = angular.module('HomeApp', []); MyHomeApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/login', { templateUrl: 'login.html' }). when('/contactus', { templateUrl: 'contactus.html' }). when('/home', { templateUrl: 'home.html', controller: 'WGHomeLanCtrl' }). otherwise({ redirectTo: 'home.html', controller: 'WGHomeLanCtrl' }); }]); MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) { });

Voici un exemple de base pour le routage:

 var app = angular.module('routeApp',['ui.bootstrap','ngRoute']). config(function($routeProvider){ $routeProvider.when('/',{ templateUrl: 'templates/main.php' }).when('/first',{ templateUrl: 'templates/first.php' }).when('/second',{ templateUrl: 'templates/second.php' }); }).controller('routeController',function($scope,$timeout){ //your code });

Marquer:

 <!DOCTYPE html> <html ng-app='routeApp' class="scope"> <head> <meta content="text/html;charset=UTF-8"/> <link href="./css/tether.min.css" type="text/css" rel="stylesheet" /> <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" /> </head> <body ng-controller='routeController' class="scope"> <a href="#!">main</a> <a href="#!first">first</a> <a href="#!second">second</a> <div ng-view> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src="./js/tether.min.js"> </script> <script src="./js/bootstrap.min.js"> </script> <script src="./js/angular.min.js"> </script> <script src="./js/ui-bootstrap-tpls-2.5.0.min.js"> </script> <script src="./js/angular-route.min.js"> </script> <script src="./js/flat-ui.min.js"> </script> <script src="./js/main.js"> </script> </body> </html>

Explication: votre routage dérive de votre version angulaire, ce balisage est pertinent pour
1.6.1 version. Ainsi, faites attention à '#' inscrivez votre barre d'adresse, en 1.6.1
Version vous aurez '#!'.