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=' '></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!
