Looking for angular-ui-router Answers? Try Ask4KnowledgeBase
Looking for angular-ui-router Keywords? Try Ask4Keywords

angular-ui-routerErste Schritte mit dem angle-ui-router


Bemerkungen

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.

Genommen von der UI-Router- Github-Seite

Versionen

Ausführung Veröffentlichungsdatum
0,2.18 2016-02-07
0,2.17 2016-01-25
0,2.16 2016-01-24
0,2.15 2016-05-19
0,2.14 2016-04-23
0,2.13 2016-11-20
0,2.12 2016-11-13
0,2.11 2016-08-26
0,2,10 2016-03-12
0,2,9 2014-01-17
0,2,8 2014-01-16

Grundlegende Ansicht

index.html

<html>
    <head>
        <title>Angular-UI Router Example</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
        <script type="text/javascript" src="../js/script.js"></script>
    </head>
    <body ui-view="mainView"> <!-- Defining a container for our view -->
    </body>
</html>
 

script.js

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', function($stateProvider){
    $stateProvider.state('home', {                        // Creating a state called 'home'
        url: '',                                          // An empty URL means that this state will be loaded on the main URL when no other state is called
        views: {
            'mainView': {                                 // Section for our view-container that we defined in the HTML
                template: '<h1>It works!</h1>'            // Setting a template for this view
                /*templateUrl: '../templates/home.html'*/ //templateUrl would load the file and uses it's content as the template
             }
        }
    });
}])
 

Definieren eines Zustands mit mehreren Ansichten

In einem ui-router kann ein Zustand mehrere Ansichten enthalten, jede mit einem eigenen Controller und einer Vorlage

.state('dashboard', {
     name: 'dashboard',
     url: '/dashboard',
     views: {
         "view1": {
             templateUrl: "path/to/view1.html",
             controller: "view1Controller"
         },
         "view2": {
             templateUrl: "path/to/view2.html",
             controller: "view2Controller"
         }
     }
 })
 

Im HTML-Code Ihres Bundesstaates können Sie diese Ansichten verknüpfen

<div ui-view="view1"></div>
<div ui-view="view2"></div>
 

Hallo Weltbeispiel

SCHRITT 1: Installation

Bevor Sie den Angular-UI-Router verwenden können, müssen Sie AngularJS selbst in Ihr Projekt aufnehmen. Eine ausführliche Anleitung hierzu finden Sie in dieser Dokumentation .

Sie können den Angular-UI-Router entweder von der GitHub-Page oder von NuGet, NPM oder Bower herunterladen.

Nachdem Sie die JS-Datei in Ihre Webseite aufgenommen haben, können Sie das Modul ui.router in Ihre Anwendung ui.router . In Ihrer Skriptdatei sollten Sie etwa Folgendes haben:

var app = angular.module('app', []);
 

und jetzt werden wir den Angular-UI Router wie folgt in unsere eigene Anwendung injizieren:

var app = angular.module('app', ['ui.router']);
 

Nun wird der Angular-UI Router mit unserer Anwendung geladen. Die folgenden Schritte erläutern die Grundlagen des Angular-UI Routers und zeigen einige grundlegende Funktionen.


SCHRITT 2: Definieren einfacher Zustände

Sie können die UI-Router innerhalb der Angular konfigurieren config Verwenden Sie den $stateProvider , um Ihre Zustände zu definieren. Im folgenden Beispiel hat jeder Status eine URL, einen Controller und eine Vorlage.

(function() {
  var app = angular.module('app', ['ui.router']);
  
  app.config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "/home",
          templateUrl: "home.html",
          controller: "homeCtrl"
        })
        .state('kitchen', {
          url: "/kitchen",
          templateUrl: "kitchen.html",
          controller: "kitchenCtrl"
        })
        .state('den', {
          url: "/denCtrl",
          templateUrl: "den.html",
          controller: "denCtrl"
        })
        .state('itemDetail', {
          url: "/items/:itemName",
          templateUrl: "item.html",
          controller: "itemDetailCtrl"
        })

    }])
})();
 

In Ihrem HTML-Code benötigen Sie die ui-view Direktive, damit die Statusansichten darin gefüllt werden können.

<div ui-view></div>
 

SCHRITT 3: Zugriff auf Zustände

Es gibt insgesamt drei Möglichkeiten, auf einen in $stateProvider definierten $stateProvider .

1. Über die ui-sref Direktive

Sie können auf Zustände in Ihrem HTML ui-sref zugreifen, indem ui-sref Anweisung ui-sref

<li ui-sref-active="active">
    <a ui-sref="kitchen">Go to the Kitchen</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="den">Enter the den</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="itemDetail({itemName:'keyboard'})">Key Board</a>
</li>
 

2. Über den $state Dienst in der Steuerung

Sie können auch zu anderen Zuständen innerhalb Ihres Controllers navigieren, indem Sie den $state .go verwenden, der dem Controller mit der .go Methode .go wird.

.controller(function($scope, $state) {
    // ...
    $scope.navigateTo = function(stateName) {
        $state.go(stateName); // i.e. $state.go('den'); 
    };
})
 

3. Über die URL im Browser

Angenommen, Sie haben einen Zustand namens kitchen , der wie kitchen definiert ist:

$stateProvider
  .state("kitchen", {
    url: "/kitchenUrl",
    ...
  });
 

Wenn Sie dann auf appdomain / kitchenUrl als URL in Ihrem Browser zugreifen, wird der Status Ihrer kitchen angezeigt. Es wird davon ausgegangen, dass es keine verschachtelten Zustände gibt und appdomain der Server ist, der Ihre Anwendung hostet.

Wenn Sie immer noch verwirrt sind, ist hier ein voll funktionierender Plnkr

Daten in einen Zustand auflösen

Sie können Daten in Ihren Status resolve wenn Sie in den Status wechseln. Normalerweise ist es nützlich, wenn der Status diese Daten verwenden muss, oder wenn ein Zustand angegeben wird, zu dem eine Eingabe authentifiziert werden muss.

Wenn Sie Ihre Zustände definieren, müssen Sie eine Zuordnung der Werte .resolve , die in der .resolve Eigenschaft aufgelöst werden sollen. Jeder aufgelöste Wert sollte eine Funktion haben, die ein promise zurückgibt

.state('main', {
     url: "/main",
     templateUrl: "path/to/main.html",
     controller: 'mainCtrl',
     resolve: {
         serverData: function ($http) {
             return $http.get('some/url');
         }
     }
});
 

Jetzt können Sie in der mainCtrl auf die Daten zugreifen ( mainCtrl , wenn der Aufruf von $http erfolgreich aufgelöst wurde).

.controller("mainCtrl", function($scope, serverData) {
    $scope.resolvedData = serverData.then(resp=> resp.data);
    ....
})
 

Übergangsereignisse verwenden

Der UI-Router macht Übergangsereignisse verfügbar, die für die Behandlung von Übergangsfehlern, die Behandlung / Blockierung von Übergängen basierend auf bestimmten Parameterwerten, benutzerdefinierte Authentifizierung usw. hilfreich sein können.

Diese Ereignisse können für einen globalen Effekt an $rootScope gebunden werden $rootScope für einen Effekt pro Controller an den Bereich $scope .


$stateChangeError - Dieses Ereignis wird gesendet, wenn der Versuch, den Status zu ändern, fehlgeschlagen ist und ein Fehler aufgetreten ist. Dieses Ereignis löst eine Rückruffunktion mit der folgenden Signatur aus:

Rückruf (Event, toState, toParams, fromState, fromParams, Fehler)

Ereignis : das Ereignisobjekt

toState : der Zielzustand

toParams : Die Parameter werden an den Zielzustand übergeben

fromState : aktueller Status

fromParams : Die Parameter werden an den aktuellen Status übergeben

Fehler : das Fehlerobjekt


$stateChangeStart - Dieses Ereignis wird gesendet, wenn ein Statusübergang gestartet wird. Dieses Ereignis löst eine Rückruffunktion mit der folgenden Signatur aus:

Rückruf (Event, toState, toParams, fromState, fromParams, Optionen)

options : das Objekt mit den Statusoptionen

$stateChangeSuccess - Dieses Ereignis wird gesendet, wenn ein Statusübergang abgeschlossen ist. Dieses Ereignis löst eine Rückruffunktion mit der folgenden Signatur aus:

Rückruf (Event, toState, toParams, fromState, fromParams, Optionen)


$stateNotFound - Dieses Ereignis wird gesendet, wenn ein Zustand, zu dem Sie den Übergang angefordert haben, nicht gefunden wurde. Dieses Ereignis löst eine Rückruffunktion mit der folgenden Signatur aus:

Rückruf (event, unfoundState, fromParams, fromState)

unfoundState - ein Objekt, das den Status darstellt, der nicht gefunden wurde


Beispiel:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeSuccess: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has successfully changed
});

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeStart: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has just started to transition
});

$rootScope.$on('$stateNotFound', function (event, unfoundState, fromParams, fromState) {
    $log.debug("$stateNotFound: event: %o unfoundState: %o, fromParams: %o, fromState: %o", event, unfoundState, fromParams, fromState);
    // runs when the state wsa not found
});

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
    $log.debug("$stateChangeError: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, error: %o", event, toState, toParams, fromState, fromParams, error);
    // runs when there was an error while attempting to transition
});