Explication détaillée de l'utilisation du routeur ui-routeur d'Angular

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du routage angulaire ui-router. Quelles sont les précautions lors de l'utilisation du routage angulaire ui-router. Ce qui suit est un cas pratique, prenons un. regarder.

UI-router

Installation : npm install --save angulaire-ui-router

Configurer l'état du routage

angular.module("myApp").config(function($stateProvider，$urlRouterProvider){
           $stateProvider
           .state({
                name:'main',
                url:'./',
                template('<div>this is a main</div>')
                     })
             .state({
                      name:'home',
                      url:'/home',
                      template:'<p>this is  home</p>'
              })
            .state({
                     name:'about',
                     url:'/about',
                     template:'<h3>Welcome hello</h3>'
                 })            //设置默认跳转
           $urlRouterProvider.otherwise('/')
           }
      )

Plusieurs modules, plusieurs routes , méthode de traitement multicontrôleur

module introduit

   <script src="./angularjs/angular.js"></script>
    <script src="./js/ctrl1.js"></script>
    <script src="./js/ctrl2.js"></script>
    <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>

dépendance du module

var app = angular.module('myApp', ['ui.router', 'myApp.ctrl1', 'myApp.ctrl2']);

configuration du routage

app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state({
                name: 'main',
                url: '/my',
                templateUrl: './test.html',
                controller: 'ctrl1'
            })             /*
            1.设置一个为空匹配 url:'/my'
            2. 在增加一个 路由名字前半部份相同但是后面不同的名字
            * */
            .state({
                name:'my.page',
                url:'/:page'
            })
            .state({
                name: 'home',
                url: '/home',
                templateUrl: './angularjs/app.html',
                controller: 'ctrl2'
            })
            .state({
                name: 'about',
                url: '/about',
                template: '<div>about</div>',
                controller: 'ctrl3'
            })
        $urlRouterProvider.otherwise('/')
    })

$stateParams obtient les paramètres.

Injecter dans le contrôleur. Peut obtenir les paramètres suivant la barre d'adresse.

-<ui-view ui-sref=&#39; &#39;></ui-view>

ui-sref peut être utilisé pour transmettre des paramètres

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site PHP chinois !

Lecture recommandée :

Explication détaillée des minuteries JavaScript

Événements et fonctions de rappel du mécanisme d'exécution JavaScript

Explication détaillée du mécanisme multi-thread des navigateurs

L'utilisation de JS mono-thread et de navigateurs multi-thread

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!