Detaillierte Erläuterung der Verwendung des Routing-UI-Routers von Angular

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von Angular Routing UI-Router geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Angular Routing UI-Router? sehen.

UI-Router

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

Routing-Status konfigurieren

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('/')
           }
      )

Mehrere Module, mehrere Routen , MultiControllerVerarbeitungsmethode

Einführungsmodul

   <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>

Modulabhängigkeit

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

Routenkonfiguration

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 ruft Parameter ab.

In den Controller einspritzen. Die Parameter können über die Adressleiste abgerufen werden.

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

ui-sref kann zum Übergeben von Parametern verwendet werden

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der JavaScript-Timer

Ereignisse und Rückruffunktionen des JavaScript-Ausführungsmechanismus

Detaillierte Erläuterung des Multithreading-Mechanismus von Browsern

Die Verwendung von Single-Threaded-JS und Multi-Threaded-Browsern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Routing-UI-Routers von Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!