Angularjs ng-view ne répond pas

Je joue avec angularjs, et je ne peux pas trouver la raison pour laquelle ng-view ne fonctionne pas. Qu'est ce que je fais mal?Angularjs ng-view ne répond pas

var app = angular.module('Demo', ['ngRoute']) 
 
.config(function ($routeProvider) { 
 
    $routeProvider.when('#/about', { 
 
     templateUrl: 'about.html', 
 
     controller: 'homeController' 
 
    }); 
 
    $routeProvider.when('#/contacts', { 
 
     template: 'contacts.html', 
 
     controller: 'contactsController' 
 
    }); 
 
}); 
 
app.controller('homeController', function ($scope) { 
 
    alert('homeController'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script> 
 
<body ng-app> 
 
<div class="menu"> 
 
    <ul> 
 
     <li><a href="#/about">About</a></li> 
 
     <li><a href="#/contacts">Contacts</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="MainContent"> 
 
    <div ng-view></div> 
 
</div> 
 

 
<template id="about.html"> 
 
    about 
 
</template> 
 

 
<template id="contacts.html"> 
 
    contacts 
 
</template> 
 
    </body>

Source

2016-05-25 A191919

Il y avait quelques problèmes ici:

Votre source de script pour route angulaire était incorrecte dans la partie HTML.
Vos $ routeProvider.when lignes n'ont pas besoin de '#', donc je les ai supprimés.
L'un de vos modèles utilisait templateUrl, ce qui n'était pas correct. Cela ne devrait être qu'un modèle: vous n'appelez pas d'URL.

Voici une plunker de travail: https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview

var app = angular.module('demo', ['ngRoute']) 

// URLs should not have # in them 
.config(function ($routeProvider) { 
    $routeProvider.when('/about', { 
     template: 'about.html', 
     controller: 'homeController' 
    }); 
    $routeProvider.when('/contacts', { 
     template: 'contacts.html', 
     controller: 'contactsController' 
    }); 
}); 

app.controller('homeController', function ($scope) { 
    alert('homeController'); 
}); 

app.controller('contactsController', function ($scope) { 
    alert('contactsController'); 
});

Source

2016-05-25 22:04:40 Brian

Angularjs ng-view ne répond pas

Répondre

Questions connexes