Maison  >  Article  >  interface Web  >  Comment utiliser et configurer des routes dans AngularJs_AngularJS

Comment utiliser et configurer des routes dans AngularJs_AngularJS

WBOY
WBOYoriginal
2016-05-16 15:16:061190parcourir

Angular est un framework d'application monopage développé par Google. Il s'agit actuellement de l'un des frameworks d'application monopage les plus courants. Il possède de nombreuses fonctionnalités puissantes, telles que la liaison de données bidirectionnelle, appliquant le modèle MVC du dos. -du bout au front-end, et instructions de personnalisation, etc.

Comme il s'agit d'une application monopage, le changement de page est définitivement indispensable Parlons d'abord du routage d'angular.

angular utilise la route lors de la mise en œuvre du changement de page.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script> 

angular.min.js doit être chargé avant angulaire-ui-router.min.js. Ensuite, nous l'enregistrerons dans l'application.

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 

Après l'inscription, vous devez configurer l'itinéraire

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config); 

La configuration est terminée ici. Chaque état de la configuration est une vue, qui représente un état de page utilisé pour les sauts de page. Le fichier html correspondant se trouve dans le fichier correspondant à templateUrl.

Ce qui précède correspond aux connaissances sur l'utilisation et la configuration des routes dans AngularJs partagées par l'éditeur. J'espère que cela sera utile à tout le monde.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn