angular.module('routingsample', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/first/:myparam', {templateUrl: 'pages/first.html', controller: templateController}). when('/second/:myparam', {templateUrl: 'pages/second.html', controller: templateController}). when('/third/:myparam', {templateUrl: 'pages/third.html', controller: templateController}). otherwise({redirectTo: '/first/:myparam'}); }]);
Nazwę modułu (routingsample) podaje się w widoku html w instrukcji ng-app. Konfiguracja polega na podaniu odpowiednich szablonów dla każdego możliwego przypadku. Instrukcja otherwise przekieruje stronę do domyślnego szablonu. Po dwukropku podać można opcjonalny parametr routingu dostępny w kontrolerze. Przykładowy url strony to:
http://localhost:8800/#/first/22
Tworząc kontroler należy za pomocą mechanizmu Dependency Injection zdeklarować chęć użycia parametru routingu, dostępnego w providerze $routeParams.
Przykładowy kontroler może ustawiać parametr routingu w obiekcie $scope do którego bindowany jest widok.
function templateController($scope, $routeParams)
{
console.log($routeParams.myparam);
$scope.param = $routeParams.myparam;
}
Szablony html podawane w konfiguracji wstawiane są w widoku w miejsca oznaczone atrybutem ng-view. Tak więc osobny szablon nie musi być całą stroną, a jedynie jej fragmentem. Na przykład:
<!doctype html> <html lang="en" ng-app="routingsample"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="scripts/routingexample.js"></script> </head> <body ng-controller="RoutingExampleController"> <ul> <li> <a href="#/first/">First</a> </li> <li> <a href="#/second/">Second</a> </li> <li> <a href="#/third/">Third</a> </li> </ul> <div ng-view></div> </body> </html>
W takim przypadku pliki z szablonami mogą zawierać kod html bez znaczników head i body z instrukcjami angulara, np. {{param}}, gdzie do bindingu wykorzystany zostanie kontroler, który deklarujemy przy konfiguracji routingu.
Brak komentarzy:
Prześlij komentarz