Embed Size (px)
Citation preview
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>',});
Thank you
• www.cenito.se
• Twitter @vincic
• Slides www.slideshare.net/vincic/
• email: [email protected]
