Angular state.go Funktion
Der Zustand ist ein sehr wichtiges Konzept für die Erstellung von Webanwendungen und eine der Kernfunktionen von AngularJS. Das AngularJS-Framework hilft Entwicklern, den Zustand durch bidirektionale Datenbindung und Ereignisbehandlung zu verwalten.
In diesem Artikel geht es um die Angular-Funktion state.go.
Was ist UI-Router in Angular
UI-Router bietet Routing und Navigation für Single-Page-Anwendungen.
Es ist ein Open-Source-Projekt, das erstellt wurde, um die Einschränkungen des Dienstes $route von AngularJS zu beheben, der vor der Einführung des neuen Router-Moduls von Angular für die URL-Verarbeitung und -Navigation verwendet wurde.
Wir können UI-Router verwenden, um Funktionen zu entwickeln, die im eingebauten nicht verfügbar sind, wie Routing, Navigation, Deep Linking usw.
Nesting und View Named Properties sind in ngRoute nicht verfügbar. Es ermöglicht Ihnen, die UI-Rendering-Schnittstelle mithilfe von zustandsbasierten URLs zu strukturieren.
Es ermöglicht auch die Verwendung vieler Ansichten auf derselben Seite, wodurch die Nützlichkeit einer Ansicht verbessert wird. UI-Router ist ein fantastisches Tool zur Verwaltung dynamischer Webanwendungen.
Was ist die $state.go-Funktion von UI-Router in Angular?
Angular hat viele Möglichkeiten, Daten von einem Zustand zum nächsten zu übergeben. Zum Beispiel können wir ein benutzerdefiniertes HTML-Attribut namens ng-model verwenden, und wir können auch ein benutzerdefiniertes Ereignis namens ng-click verwenden.
Aber $state.go ist wahrscheinlich der beste Weg, um ein Objekt von einem Zustand zum nächsten zu übergeben, weil es weniger ausführlich und einfacher für andere Leute ist, die in Zukunft an verschiedenen Angular-Projekten arbeiten möchten.
Die Syntax von $state.go ist unten angegeben.
$state.go('destination.state');
Unterschied zwischen $state.go und $location.path in Angular
$state.go ist eine AngularJS-Direktive, die der Ansicht mitteilt, dass sie ihre URL aktualisieren soll, um den aktuellen Status der Anwendung widerzuspiegeln. Diese Direktive wird verwendet, um die URL zu ändern, ohne die aktuelle Seite zu verlassen.
Der $location.path ist eine AngularJS-Direktive, die die Ansicht anweist, ihre URL zu aktualisieren, um den aktuellen Standort der Anwendung widerzuspiegeln. Diese Anweisung wird verwendet, um von einer bestimmten Seite wegzunavigieren, indem ihre URL geändert wird.
Für neue Angular-Entwickler ist es möglicherweise schwer zu verstehen, warum wir beide in unterschiedlichen Situationen verwenden, wenn das Ziel dasselbe ist.
Sie können Standortobjekte mit dem Dienst $location verwalten, und das Modul UI-router enthält den Dienst $state, der hilft, Routen auf komplexe Weise zu verwalten. Verwenden Sie nur den Dienst $state, um Zustände und Routen mit ui-router zu verwalten.
Lassen Sie uns das Beispiel von $state.go besprechen, um es besser zu verstehen.
TypeScript-Code:
app = angular.module('myApp',['ui.router',])
app.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('main',{
url: '/',
templateUrl:"main.html",
controller: 'Demo',
})
.state('Roll',{
url: '/Roll',
template:"<p> Saved</p>"
})
}]);
app.config(['$urlRouterProvider',function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}]);
app.controller('Demo', ['$scope', '$http', '$state'
,function($scope, $http, $state){
$scope.user = { RollNumber : "1234" }
$scope.save = function(){
$http.get("dummy.json", { params : $scope.user } )
.success(function(data){
$state.go("Roll");
})
}
}]);
HTML Quelltext:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="app.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
Klicken Sie hier, um die Live-Demonstration des Codes zu überprüfen.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook