UI-Sref in AngularJS

1. Was ist Angular UI-Router und wie es funktioniert
2. Unterschied zwischen Ng-Route und UI-Router (state) in Angular
3. State-to-State-Navigation von ui-sref in Angular
4. Implementierung und Installation von UI-Router in Angular
5. Erstellen Sie Komponenten und einen App-Router, um die Verwendung von ui-sref in Angular zu verstehen

Die ngHref-Direktive von Angular erlaubt es uns, Parameter mit URLs zu verknüpfen. Wir können mit ui-sref, das der UI-Router bereitstellt, an Zustände binden.

Es ist nicht dasselbe wie in Bezug auf eine normale URL. Es ist letztlich ein anderes Szenario, wie man einen Staat verbindet.

Dieser Artikel wird tief in das Hauptthema eintauchen und diskutieren, wie man ui-Sref in Angular mit UI-Router verwendet.

Was ist Angular UI-Router und wie es funktioniert

Angular UI-Router ist ein Modul, das uns hilft, Single-Page-Anwendungen zu erstellen. Es bietet eine Abstraktion zwischen der Anwendung und dem Browser, indem es alle Routen in unserer Anwendung verwaltet.

Es hilft auch, Änderungen an unserer Anwendung effizienter vorzunehmen. Wenn wir beispielsweise eine neue Route hinzufügen möchten, können wir dies mit nur einer Codezeile tun.

Es verfolgt einen anderen Ansatz als ng-Route, da es die Ansichten Ihrer App basierend auf dem Status der Anwendung und nicht nur auf der Routen-URL ändert. Gegenüber ng-Route ist UI-Router die beste Option, da es zwei Schlüsselfunktionen hat: verschachtelte Ansichten und mehrere Ansichten.

Diese Technik bindet Seiten und Routen nicht an die Browser-URL wie ng-Route. Klicken Sie hier, um mehr über ui-router zu erfahren.

Es wäre hilfreich, wenn Sie eine Vorstellung von den verschachtelten Ansichten und mehreren Ansichten hätten.

1. Verschachtelte Ansichten ähneln Eltern-Kind-Beziehungen, da sie eine Ansicht in einer anderen enthalten. Auf andere Weise haben Sie eine Liste aller Smartphones an einem Ort.

   Wenn Sie auf ein Smartphone klicken, sehen Sie seine Eigenschaften aus einer anderen Perspektive.

2. Mehrfachansichten sind definiert als mehr als eine Ansicht auf derselben Seite. Zahlreiche Abschnitte sind in der Regel mit einer bestimmten Seite in jeder Anwendung verknüpft. Beispielsweise zeigen wir mehrere Elemente aus einer Anwendung auf der Hauptseite an.

   Um jede dieser Komponenten zu haben, müssen wir für jede eine separate Ansicht erstellen.

Unterschied zwischen Ng-Route und UI-Router (state) in Angular

Jeder Entwickler muss den grundlegenden Unterschied zwischen ng-route und ui-router kennen.

Ng-Route gibt es schon länger als UI-Router, und die Konzepte sind Entwicklern vertrauter, die von anderen Frameworks wie React kommen.

Ng-Route bietet auch Funktionen, die UI-Router nicht bietet, wie z. B. verschachtelte und verzögerte Laderouten.

UI-Router (state) ist eine Bibliothek, die verwendet wird, um das Routing von UI-Komponenten zu handhaben. Es ist eine beliebte Wahl für Angular-Entwickler.

Darüber hinaus hat UI-Router (state) eine sauberere Syntax, und es ist einfacher, verschachtelte Ansichten in diesem Framework zu erstellen, aber es bietet keine faulen Laderouten wie Ng-Route.

State-to-State-Navigation von ui-sref in Angular

Die Direktive ui-sref ist die erste Möglichkeit, von einem Zustand zum anderen zu navigieren. Die Eigenschaft href des Ankerelements HTML ist Ihnen wahrscheinlich bekannt; ebenso bezieht sich die ui-sref-Direktive auf eine staatliche Referenz.

Das Deklarieren eines Staatsnamens mit der an einen Anker angehängten Direktive ui-sref ist die Art und Weise, wie Sie die Direktive verwenden. Lassen Sie uns ein Beispiel besprechen, um es besser zu verstehen.

<a ui-sref="Contact Form" href="#Contact">Contact Us</a>

Die Verwendung einer Methode aus dem Objekt $state, die einem Angular controller zur Verfügung steht, ist die nächste Technik zum Navigieren zwischen Zuständen. Zum Beispiel.

angular.module('app').controller('PageController',
            ['$scope', '$state',
    function ($scope,   $state) {
        $scope.navigate = function () {
            $state.go('Contact');
        };
    }]);

Implementierung und Installation von UI-Router in Angular

Zuerst müssen Sie den Angular UI-router mit Hilfe des Paketmanagers npm im Kommando-Terminal installieren.

$ npm install angular --save // AngularJS

$ npm install angular-ui-router --save // angular UI-router

Nach dem Hinzufügen des ui-router ist es an der Zeit, an der Datei index.html zu arbeiten.

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
  <body ng-app="Example">
      <div ui-view="header"></div>
      <div ui-view=""></div>
      <div ui-view="footer"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
      <script src="app/app.routes.js"></script>
  </body>
</html>

Erstellen Sie Komponenten und einen App-Router, um die Verwendung von ui-sref in Angular zu verstehen

Komponenten sind wiederverwendbare isolierte Objekte, die wiederverwendet werden können. Es ist dasselbe wie ein Befehl.

Der Hauptunterschied besteht darin, dass es sich immer um einen begrenzten Geltungsbereich handelt und nicht um eine Richtlinie, bei der Sie wählen können, ob sie isoliert ist oder nicht.

Hier haben wir nur eine header-Komponente erstellt; Wir haben keine anderen Komponenten für die Komponenten home, Über uns und Kontakt erstellt, da unser Hauptaugenmerk darauf liegt, Ihnen die Verwendung von ui-sref beizubringen.

<nav class="navbar-default">
  <div class="Box">
    <div class="header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
      </button>

    </div>
    <div class="new-class" id="112211">
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
		<li><a ui-sref="about">About us</a></li>
		<li><a ui-sref="contact">contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

So haben wir also ui-sref verwendet. Das ui-sref wird hier zum Routen der Seiten verwendet.

Jetzt ist es an der Zeit, den endgültigen Code der App zu schreiben.

var app = angular.module('Example', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {

// create default view
$urlRouterProvider.otherwise("/home");


$stateProvider
// home states and nested view
.state('home', {
	url: "/home",
	template: '<div <p> Home Tab is active!!!</p></div>'
})
// about states and nested view
.state('about', {
	url: "/about",
		template: '<div <p> About Us Tab is active!!!</p></div>'
})
.state('contact', {
	url: "/contact",
		template: '<div <p> Contact Us Tab is active!!!</p></div>'
});
});

Klicken Sie hier, um die Live-Demonstration des Codes zu überprüfen.