11521 sujets

JavaScript, DOM et API Web HTML5

AngularJS

Bonjour les amis !

J'ai un problème avec un code en fait je voudrais réaliser cette exemple :

https://plnkr.co/edit/?p=preview

Mais lorsque j'ai essai de le faire sue mon poste la console m'affiche une erreur voilà mon code aidez moi svp merci d'avance

<html lang="fr" data-ng-app="">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Route App</title> 

</head>
<body ng-app="ngRouteExample" >

  <p><a href="#/">Main</a></p>

<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>

<div ng-view></div>



<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>

  <script type="text/javascript" src="js/index.js"></script>


var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});

Modifié par DiegoGaby (29 Mar 2017 - 15:55)
Je crois que c'est juste une étourderie :
tu as laissé "myApp" dans var app = angular.module("myApp", ["ngRoute"]);
alors que tu utilises ngRouteExample dans <body ng-app="ngRouteExample" >

Bonne soirée
Merci pour la réponse j'ai changé le code mais le problème persiste je ne comprend pas

[#black]var app = angular.module("ngRouteExample", []);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});[/#]

Modifié par DiegoGaby (30 Mar 2017 - 23:45)
Voilà ce que la console dit lors de l'exécution du script :

[#darkred]angular.js:38 Uncaught Error: [$injector:modulerr]  http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=ngRouteExample&p1=E…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A43%3A246)
 
    at angular.js:38
    at angular.js:4630
    at q (angular.js:322)
    at g (angular.js:4591)
    at db (angular.js:4513)
    at c (angular.js:1777)
    at Ac (angular.js:1798)
    at fe (angular.js:1683)
    at angular.js:31018
    at HTMLDocument.b (angular.js:3197)[/#]

?

?
Et voici le résultat que je veux réusir :

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
J'ai rencontré le même problème avec le routage et la solution a été simple : abandonner la version 1.6 d'Angular au profit de la 1.4.9 ...
Sujet clos
Aller à