AngularJS i ngRoute

facebooktwittergoogle_plusredditpinterestlinkedinmail

Co to jest ngRoute i co nam oferuje?

Pisząc naszą pierwszą aplikację w AngularJS, nie jesteśmy ograniczeniu jedynie do jednego pliku index.html i jednego adresu url. Dzięki modułowi ngRoute możemy podzielić naszą Angular’ową aplikację na widoki (lub jak kto woli sceny), które będą wyświetlane w zależności od linku, na który wejdzie użytkownik.


Dzięki ngRoute nasze linki do widoków mogą wyglądać tak:

http://localhost/angular/#/

http://localhost/angular/#/list

http://localhost/angular/#/details

http://localhost/angular/#/gallery

Co trzeba zrobić, aby skorzystać z ngRoute?

Aby użyć modułu ngRoute należy ściągnąć osobny plik angular-route.js ze strony https://code.angularjs.org/. Pliku angular-route.js szukamy w katalogu o tym samym numerze, co używana wersja biblioteki AngularJS.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/angular-route.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body ng-app="exApp">
        <ng-view></ng-view>
    </body>
</html>

Do pliku index.html dodajemy nowy plik angular-route.js, który wcześniej ściągnęliśmy. Wewnątrz tagu body dodajemy nowy tag ng-view, w którym będzie wyświetlana zawartość aktualnie wyświetlanego widoku. Nie musimy martwić się dodawaniem tagu ng-controller, ponieważ ngRoute robi to za nas.

app.js:

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

exApp.controller('DetailsController', [
    '$scope',
    function ($scope) {
        $scope.name = "John";
    }
]);

exApp.config([ '$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/details', {
        controller: 'DetailsController',
        templateUrl: 'DetailsView.html'
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

Do wywołania tworzącego naszą aplikację dodajemy pierwszą zależność – ngRoute. W następnych linijkach konfigurujemy dodany moduł ngRoute za pomocą $routeProvider. Pierwszy parametr metody when definiuje konkretny url, a występujący po nim obiekt nazwę kontrolera, i link do templatki, która ma zostać wyświetlona.

Odpalenie controllera i widoku details odbywa się poprzez wpisanie adresu http://localhost/#/details.

Funkcja otherwise decyduje, gdzie użytkownik ma zostać przekierowany jeśli wpisany przez niego url nie pasuje do żadnej z definicji when.

Za pomocą kolejnych wywołać metody when możemy dodawać kolejne widoki do naszej aplikacji.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

− 3 = 1

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>