AngularJS
ui-router
Suche…
Bemerkungen
Was ist ein ui-router ?
Angular UI-Router ist ein clientseitiges Routing-Framework für Single Page Application für AngularJS.
Routing-Frameworks für SPAs aktualisieren die Browser-URL, wenn der Benutzer durch die App navigiert. Umgekehrt können auf diese Weise Änderungen an der URL des Browsers vorgenommen werden, um die Navigation durch die App zu steuern. Auf diese Weise kann der Benutzer ein Lesezeichen an einer Stelle im SPA erstellen.
UI-Router-Anwendungen werden als hierarchische Zustandsstruktur modelliert. Der UI-Router stellt eine Zustandsmaschine bereit, um die Übergänge zwischen diesen Anwendungszuständen transaktionsartig zu verwalten.
Nützliche Links
Die offizielle API-Dokumentation finden Sie hier . Bei Fragen zu ui-router VS ng-router können Sie eine ziemlich ausführliche Antwort finden hier . Denken Sie daran, dass ng-router bereits ein neues ng-router-Update namens ngNewRouter (kompatibel mit Angular 1.5 + / 2.0) veröffentlicht hat, das Zustände wie der ui-router unterstützt. Weitere ngNewRouter zu ngNewRouter hier .
Basisbeispiel
app.js
angular.module('myApp', ['ui.router'])
.controller('controllerOne', function() {
this.message = 'Hello world from Controller One!';
})
.controller('controllerTwo', function() {
this.message = 'Hello world from Controller Two!';
})
.controller('controllerThree', function() {
this.message = 'Hello world from Controller Three!';
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('one', {
url: "/one",
templateUrl: "view-one.html",
controller: 'controllerOne',
controllerAs: 'ctrlOne'
})
.state('two', {
url: "/two",
templateUrl: "view-two.html",
controller: 'controllerTwo',
controllerAs: 'ctrlTwo'
})
.state('three', {
url: "/three",
templateUrl: "view-three.html",
controller: 'controllerThree',
controllerAs: 'ctrlThree'
});
$urlRouterProvider.otherwise('/one');
});
index.html
<div ng-app="myApp">
<nav>
<!-- links to switch routes -->
<a ui-sref="one">View One</a>
<a ui-sref="two">View Two</a>
<a ui-sref="three">View Three</a>
</nav>
<!-- views will be injected here -->
<div ui-view></div>
<!-- templates can live in normal html files -->
<script type="text/ng-template" id="view-one.html">
<h1>{{ctrlOne.message}}</h1>
</script>
<script type="text/ng-template" id="view-two.html">
<h1>{{ctrlTwo.message}}</h1>
</script>
<script type="text/ng-template" id="view-three.html">
<h1>{{ctrlThree.message}}</h1>
</script>
</div>
Mehrere Ansichten
app.js
angular.module('myApp', ['ui.router'])
.controller('controllerOne', function() {
this.message = 'Hello world from Controller One!';
})
.controller('controllerTwo', function() {
this.message = 'Hello world from Controller Two!';
})
.controller('controllerThree', function() {
this.message = 'Hello world from Controller Three!';
})
.controller('controllerFour', function() {
this.message = 'Hello world from Controller Four!';
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('one', {
url: "/one",
views: {
"viewA": {
templateUrl: "view-one.html",
controller: 'controllerOne',
controllerAs: 'ctrlOne'
},
"viewB": {
templateUrl: "view-two.html",
controller: 'controllerTwo',
controllerAs: 'ctrlTwo'
}
}
})
.state('two', {
url: "/two",
views: {
"viewA": {
templateUrl: "view-three.html",
controller: 'controllerThree',
controllerAs: 'ctrlThree'
},
"viewB": {
templateUrl: "view-four.html",
controller: 'controllerFour',
controllerAs: 'ctrlFour'
}
}
});
$urlRouterProvider.otherwise('/one');
});
index.html
<div ng-app="myApp">
<nav>
<!-- links to switch routes -->
<a ui-sref="one">Route One</a>
<a ui-sref="two">Route Two</a>
</nav>
<!-- views will be injected here -->
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- templates can live in normal html files -->
<script type="text/ng-template" id="view-one.html">
<h1>{{ctrlOne.message}}</h1>
</script>
<script type="text/ng-template" id="view-two.html">
<h1>{{ctrlTwo.message}}</h1>
</script>
<script type="text/ng-template" id="view-three.html">
<h1>{{ctrlThree.message}}</h1>
</script>
<script type="text/ng-template" id="view-four.html">
<h1>{{ctrlFour.message}}</h1>
</script>
</div>
Verwenden von Auflösungsfunktionen zum Laden von Daten
app.js
angular.module('myApp', ['ui.router'])
.service('User', ['$http', function User ($http) {
this.getProfile = function (id) {
return $http.get(...) // method to load data from API
};
}])
.controller('profileCtrl', ['profile', function profileCtrl (profile) {
// inject resolved data under the name of the resolve function
// data will already be returned and processed
this.profile = profile;
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile', {
url: "/profile/:userId",
templateUrl: "profile.html",
controller: 'profileCtrl',
controllerAs: 'vm',
resolve: {
profile: ['$stateParams', 'User', function ($stateParams, User) {
// $stateParams will contain any parameter defined in your url
return User.getProfile($stateParams.userId)
// .then is only necessary if you need to process returned data
.then(function (data) {
return doSomeProcessing(data);
});
}]
}
}]);
$urlRouterProvider.otherwise('/');
});
profile.html
<ul>
<li>Name: {{vm.profile.name}}</li>
<li>Age: {{vm.profile.age}}</li>
<li>Sex: {{vm.profile.sex}}</li>
</ul>
Hier können Sie den UI-Router-Wiki-Eintrag anzeigen .
Auflösungsfunktionen müssen aufgelöst werden, bevor das $stateChangeSuccess Ereignis ausgelöst wird. Das bedeutet, dass die Benutzeroberfläche nicht geladen wird, bis alle Auflösungsfunktionen für den Status abgeschlossen sind. Auf diese Weise können Sie sicherstellen, dass Daten für Ihren Controller und Ihre Benutzeroberfläche verfügbar sind. Sie können jedoch sehen, dass eine Auflösungsfunktion schnell sein sollte, um das Hängen der Benutzeroberfläche zu vermeiden.
Verschachtelte Ansichten / Zustände
app.js
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: function($scope){
$scope.text = 'This is the Home'
}
})
.state('home.nested1',{
url: '/nested1',
templateUrl:'nested1.html',
controller: function($scope){
$scope.text1 = 'This is the nested view 1'
}
})
.state('home.nested2',{
url: '/nested2',
templateUrl:'nested2.html',
controller: function($scope){
$scope.fruits = ['apple','mango','oranges'];
}
});
$urlRouterProvider.otherwise('/home');
});
index.html
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
home.html
<div>
<h1> {{text}} </h1>
<br>
<a ui-sref="home.nested1">Show nested1</a>
<br>
<a ui-sref="home.nested2">Show nested2</a>
<br>
<div ui-view></div>
</div>
nested1.html
<div>
<h1> {{text1}} </h1>
</div>
nested2.html
<div>
<ul>
<li ng-repeat="fruit in fruits">{{ fruit }}</li>
</ul>
</div>