J'ai trois pages. Je veux les charger dans ng-view. Lorsque l'utilisateur clique sur la page, la page correspondante doit se charger. J'ai configuré le routerProvider mais cela n'a pas fonctionné.

// HTML

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="learningApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    ul li{ float: left; list-style: none; margin: 0 10px}
</style>
</head>

<body>
<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>  



    <div ng-view></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body>
</html>

// Code App.js

(function(){
  var app= angular.module('learningApp',['ngRoute'])

  app.config(['$routeProvider',function($routeProvider){
  $routeProvider.
               when('/home', {
                  templateUrl: 'home.html'
               }).
               when('/aboutus', {
                  templateUrl: 'aboutus.html'

               }).
               when('/service',{
                templateUrl:'service.html'
               }).
               otherwise({
                  redirectTo: '/home'
               });

  }])

})
0
Jitender 20 juil. 2015 à 17:04

2 réponses

Meilleure réponse

Tout semble bon mais vous avez un problème avec votre ancre href.

Modifier:

<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>  

À:

<nav>   
    <ul><li><a href="#/home">home</a></li><li><a href="#/about">about</a></li><li><a href="#/service">service</a></li></ul>
</nav>  
0
Ajay Kumar 20 juil. 2015 à 14:11

S'il n'y a pas d'erreurs de console, je pense que vous devez utiliser les balises a comme,

Notez le / supplémentaire après #

<a href="#/home">home</a>
<a href="#/about">about</a>
0
K.Toress 20 juil. 2015 à 14:10