angular meetup - routing and multilingual urls

AngularJS MeetUProuting and multilingual urls

Digital Viking

Who are you?

Routing in App

phonecatApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'

}). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'

}). otherwise({ redirectTo: '/phones' });

}]);

Routing - Web site

Angular routers

• ngRoute

• uiRouter

• angular-new-router

ngRoutephonecatApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'

}). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'

}). otherwise({ redirectTo: '/phones' });

}]);

uiRouter

$stateProvider .state(‘main’,{ url: ‘/‘, templateUrl: '/app/main/main.template.html', controller: 'MainCtrl', controllerAs: 'ctrl', })

angular-new-router

AppController.$routeConfig([ {path: '/', component: 'home' }]);

uiRouter$stateProvider.state('main',{templateUrl: '/app/main/main.template.html',controller: 'MainCtrl',controllerAs: 'ctrl',restricted: false,abstract: true,url: '/{locale}',meta: {

title: "Home", proxyState: "home"

}})

uiRouter - extended$stateProvider.state('main',{templateUrl: '/app/main/main.template.html',controller: 'MainCtrl',controllerAs: 'ctrl',restricted: false,abstract: true,url: '/{locale}',meta: {

title: "Home", proxyState: "home"

}})

uiRouter - abstract$stateProvider.state('main',{templateUrl: '/app/main/main.template.html',controller: 'MainCtrl',controllerAs: 'ctrl',restricted: false,abstract: true,url: '/{locale}',meta: {

title: "Home", proxyState: "home"

}})

uiRouter - url$stateProvider.state('main',{templateUrl: '/app/main/main.template.html',controller: 'MainCtrl',controllerAs: 'ctrl',restricted: false,abstract: true,url: '/{locale}',meta: {

title: "Home", proxyState: "home"

}})

uiRouter - sibling

.state('home',{parent: 'main',url: '/start',views: {

"": { templateUrl: '/app/start/start.html',

controller: 'StartCtrl', controllerAs: 'ctrl'

}, },});

uiRouter - sibling

.state(‘main.home',{url: ‘/start', // /{locale}/startviews: {

"": { templateUrl: '/app/start/start.html',

controller: 'StartCtrl', controllerAs: 'ctrl'

}, },});

uiRouter - sibling

.state(‘main.home',{url: '/start',views: {

"": { templateUrl: '/app/start/start.html',

controller: 'StartCtrl', controllerAs: 'ctrl'

}, "alertMessage@main": {

template: '<bridge-notification></bridge-notification>' } },});

routing events

• $stateChangeStart

• $stateChangeSuccess

• $stateChangeError

routing parameters

.state('product.details',{url:'/product/:serialNo',controller: 'ProductCtrl',controllerAs: 'ctrl',templateUrl: ‘/app/product/product-details.html',restricted: true,

})

uiRouter - linking

<ul> <li ng-repeat="product in products"> <a ui-sref="product.details({ serialNo: product.id })”> {{ product.name }}</a> </li></ul>

uiRouter - linking

<ul> <li ng-repeat="product in products” ui-sref-active=“active”> <a ui-sref="product.details({ serialNo: product.id })”> {{ product.name }}</a> </li></ul>

Multilingual urls?

Languages X

URLs =

Many

angular-ui-router-i18n

.state('customerservice.start',{url: $i18nUrlMatcherFactoryProvider.compile({

en: '/:locale/customerservice/start', sv: '/:locale/kundservice/start', de: '/:locale/kundendienst/start' }), templateUrl: ‘/app/customerservice/customerservice.template.html’, controller: 'CustomerServiceCtrl',

controllerAs: 'ctrl',})

catch them all state

$stateProvider.state('main.page',{url: '/*path',

template: ‘<page></page>',});

www.cenito.se

Thank you

• www.cenito.se

• Twitter @vincic

• Slides www.slideshare.net/vincic/

• email: sasha.vincic@cenito.se