Maison >interface Web >js tutoriel >Comment utiliser et configurer des routes dans AngularJs_AngularJS
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.