web-dev-qa-db-fra.com

Le routage AngularJS 1.6 ne fonctionne pas

J'essaie de créer ma première application angular. Mais cela ne fonctionne pas du tout. Je n'ai aucune idée du problème. J'ai vérifié la console, mais il n'y a pas d'erros.

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

Quelqu'un peut-il m'aider?

javascriptangularjsroutingangularjs-1.6
11
Petrus

Itinéraires dans Angular 1.6 changé de #/myUrl à #!/myUrl

Vous devez changer votre référence en:

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

Voir cette réponse si vous souhaitez supprimer ce préfixe.

29
Mistalis

Essayez d'ajouter $ locationProvider à votre script

app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix('');
        }]);
5
Ravi

Essayez ce code ça marche

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);
1
Mohammad Faisal

J'ai découvert que vous n'avez pas inclus le $routeProvider correctement, voici le code de routage qui fonctionne:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);
1
Emad Salah