angular-ui-routerAan de slag met angular-ui-router


Opmerkingen

Angular UI-Router is een client-side Single Page Application routing framework voor AngularJS .

Routeringskaders voor SPA's werken de URL van de browser bij terwijl de gebruiker door de app navigeert. Omgekeerd maakt dit wijzigingen in de URL van de browser mogelijk om navigatie door de app te stimuleren, waardoor de gebruiker een bladwijzer naar een locatie diep in de SPA kan maken.

UI-routertoepassingen worden gemodelleerd als een hiërarchische boomstructuur. UI-Router biedt een statusmachine om de overgangen tussen die toepassingsstatussen op een transactie-achtige manier te beheren.

Ontleend aan de UI-Router Github-pagina

versies

Versie Publicatiedatum
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

Basisweergave

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
             }
        }
    });
}])
 

Een status definiëren met meervoudige weergave

In ui-router kan een status meerdere weergaven bevatten, elk met zijn eigen controller en een sjabloon

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

Vervolgens kunt u in de HTML van uw staat deze weergaven koppelen

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

Hallo wereld voorbeeld

STAP 1: Installatie

Voordat u Angular-UI Router kunt gebruiken, moet u AngularJS zelf in uw project opnemen. Zie deze documentatie voor een gedetailleerde gids hierover.

U kunt Angular-UI Router downloaden vanaf respectievelijk hun GitHub-pagina of vanaf NuGet, NPM, Bower.

Nadat u het JS-bestand op uw webpagina hebt opgenomen, kunt u de ui.router module in uw toepassing injecteren. In je scriptbestand zou je zoiets moeten hebben:

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

en nu gaan we Angular-UI Router in onze eigen applicatie als volgt injecteren:

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

Nu zal Angular-UI Router worden geladen met onze applicatie. In de volgende stappen worden de basisprincipes van Angular-UI Router uitgelegd en worden enkele basisfunctionaliteit getoond.


STAP 2: Eenvoudige staten definiëren

U kunt de UI-router config functie Angular config . Gebruik de $stateProvider om uw staten te definiëren. In het volgende voorbeeld heeft elke status een URL, controller en een sjabloon.

(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 uw HTML hebt u de ui-view richtlijn nodig zodat de statusweergaven naar binnen kunnen worden ingevuld.

<div ui-view></div>
 

STAP 3: Toegang tot staten

Er zijn allemaal 3 manieren om toegang te krijgen tot een staat die is gedefinieerd in $stateProvider .

1. Via ui-sref richtlijn

U kunt toegang krijgen tot staten in uw HTML met behulp van de ui-sref richtlijn

<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. Via $state service in de controller

u kunt ook naar andere statussen in uw controller navigeren door de $state die aan de controller is verstrekt met de .go methode.

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

3. Via de url in de browser

Ervan uitgaande dat je een staat hebt met de naam kitchen als volgt gedefinieerd:

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

Vervolgens krijgt u toegang tot appdomain / kitchenUrl omdat de URL in uw browser naar uw kitchen , ervan uitgaande dat er geen geneste staten zijn en appdomain de server is die uw applicatie host.

Als je nog steeds in de war bent, is hier een volledig werkende Plnkr

Gegevens oplossen in een staat

U kunt resolve gegevens in uw staat als je overgang naar het, meestal is het handig als de staat noden om die gegevens te gebruiken of op te lossen in een toestand wanneer sommige input geleverd moet worden geverifieerd.

Wanneer u uw statussen definieert, moet u een kaart met waarden .resolve die moeten worden omgezet in de eigenschap .resolve , elke opgeloste waarde moet een functie hebben die een promise retourneert

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

Nu mainCtrl u binnen de mainCtrl toegang tot de gegevens (dat wil zeggen als de $http oproep met succes is opgelost).

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

Overgangsgebeurtenissen gebruiken

UI-router onthult overgangsgebeurtenissen die nuttig kunnen zijn voor het verwerken van overgangsfouten, het verwerken / blokkeren van overgangen op basis van bepaalde parameterwaarden, aangepaste authenticatie, enz ..

Deze gebeurtenissen kunnen worden gebonden aan $rootScope voor een globaal effect of aan $scope voor een per controller-effect.


$stateChangeError - Deze gebeurtenis wordt uitgezonden wanneer een poging om de status te wijzigen is mislukt en heeft gegooid en een fout is $stateChangeError . Deze gebeurtenis $stateChangeError een terugbelfunctie met de volgende handtekening:

callback (event, toState, toParams, fromState, fromParams, error)

event : het gebeurtenisobject

toState : de doelstatus

toParams : de parameters doorgegeven aan de doelstatus

fromState : huidige status

fromParams : de parameters die zijn doorgegeven aan de huidige status

error : het error-object


$stateChangeStart - Deze gebeurtenis wordt uitgezonden toen een $stateChangeStart begon, deze gebeurtenis activeert een callback-functie met de volgende handtekening:

callback (event, toState, toParams, fromState, fromParams, opties)

options : het statusoptiesobject

$stateChangeSuccess - Deze gebeurtenis wordt uitgezonden wanneer een $stateChangeSuccess is voltooid, deze gebeurtenis activeert een callback-functie met de volgende handtekening:

callback (event, toState, toParams, fromState, fromParams, opties)


$stateNotFound - Deze gebeurtenis wordt uitgezonden wanneer een staat waarnaar u hebt gevraagd om over te stappen niet werd gevonden. Deze gebeurtenis activeert een callback-functie met de volgende handtekening:

callback (event, unfoundState, fromParams, fromState)

unfoundState - een object dat de staat vertegenwoordigt die niet is gevonden


Voorbeeld:

$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
});