Presentation about routing with AngularJS for web apps and multilingual websites. http://www.meetup.com/AngularJS-Malmo/events/225840248/

1. AngularJS MeetUP
routing and multilingual urls

2. Digital Viking

3. Who are you?

4. Routing in App

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

6. Routing - Web site

7. Angular routers
• ngRoute
• uiRouter
• angular-new-router

8. ngRoute
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'
});
}]);

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

10. angular-new-router
AppController.$routeConfig([
{path: '/', component: 'home' }
]);

11. 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"
}
})

12. 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"
}
})

13. 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"
}
})

14. 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"
}
})

15. uiRouter - sibling
.state('home',{
parent: 'main',
url: '/start',
views: {
"": {
templateUrl: '/app/start/start.html',
controller: 'StartCtrl',
controllerAs: 'ctrl'
},
},
});

16. uiRouter - sibling
.state(‘main.home',{
url: ‘/start', // /{locale}/start
views: {
"": {
templateUrl: '/app/start/start.html',
controller: 'StartCtrl',
controllerAs: 'ctrl'
},
},
});

17. uiRouter - sibling
.state(‘main.home',{
url: '/start',
views: {
"": {
templateUrl: '/app/start/start.html',
controller: 'StartCtrl',
controllerAs: 'ctrl'
},
"alertMessage@main": {
template: '<bridge-notification></bridge-notification>'
}
},
});

18. routing events
• $stateChangeStart
• $stateChangeSuccess
• $stateChangeError

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

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

21. 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>

22. Multilingual urls?

23. Languages
X
URLs
=
Many

24. 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',
})

25. catch them all state
$stateProvider.state('main.page',{
url: '/*path',
template: ‘<page></page>',
});

26. www.cenito.se

27. Thank you
• www.cenito.se
• Twitter @vincic
• Slides www.slideshare.net/vincic/
• email: sasha.vincic@cenito.se