Angular stateParams
Wir werden den Dienst $stateParams vorstellen und in Angular verwenden.
Was ist der Dienst $stateParams in Angular?
$stateParams ist ein Dienst, der URL-basierte Parameter erfasst, und wir können diese Parameter verwenden, um Informationen gemäß dem Status anzuzeigen.
Lassen Sie uns ein Beispiel mit zwei Zuständen erstellen, verstehen, wie Zustände funktionieren, und $stateparams verwenden, um Parameter zu speichern.
Wir werden $stateProvider verwenden, um einen Zustand zu erstellen. Der Zustand nimmt drei Parameter URL, templateUrl und controller entgegen.
In URL fügen wir den Seitenlink hinzu, wohin der Staat mit state.go gehen wird. In templateUrl geben wir den Namen oder die URL der Vorlage für diesen Zustand an. In einem Controller stellen wir den Controller für den Zustand bereit.
Lassen Sie uns zwei Zustände als LoginState und SignUpState erstellen. Unser Code sieht also wie folgt aus.
console.clear();
var app = angular.module('app', [
'ui.router'
]);
app.config(function($stateProvider) {
$stateProvider
.state('LoginState', {
url: '',
templateUrl: 'Firststate',
controller : function ($scope, $state, $stateParams) {
$scope.params = $stateParams;
$scope.go = function () {
$state.go('SignUpState', { id : '2nd Parameter' });
};
console.log('Firststate params:', $stateParams);
}
})
.state('SignUpState', {
url: 'SignUpState/:id',
templateUrl: 'SecondState',
controller : function ($scope, $state, $stateParams) {
$scope.params = $stateParams;
$scope.go = function () {
$state.go('LoginState', { someOtherParam : '1st Parameter' });
};
console.log('SecondState params:', $stateParams);
}
});
});
Lassen Sie uns nun eine Vorlage für diese Vorlagen erstellen und die Skriptdateien Ui-router einbinden. Unsere Vorlage zeigt die gespeicherten Parameter an und hat eine Schaltfläche, die uns zu SignUpState bzw. LoginState führt.
<body ng-app="app">
<ui-view></ui-view>
<script type="text/ng-template" id="Firststate">
<h1>Login State</h1>
<h2>$stateParams: {{params}}</h2>
<p>(you can see it always empty)</p>
<button ng-click="go()">Sign Up</button>
</script>
<script type="text/ng-template" id="SecondState">
<h1>SignUp State</h1>
<h2>$stateParams: {{params}}</h2>
<button ng-click="go()">Login</button>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
</body>
Ausgabe:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn