AngularJS, geri çevrilebilir ve dil destekli URL yönlendirmesini desteklememektedir. Bu da çok dilli AngularJS uygulamaları yazmayı zorlaştırmaktadır. angular-router-advanced servisi her view için birden fazla dil destekleyen URL tanımlaması yapma imkanı veren ve bu URL'leri kolayca üreterek HTML içinde kullanmayı sağlayan bir Angular provider'ıdır.
angular-router-advanced servisini kullanabilmek için Github depomuzdaki router.js dosyasını HTML dokümanınıza eklemeniz ve Angular modülünüze sahibinden.router adıyla bağımlılık olarak bildirmeniz yeterlidir.
<html>
<head>
<script src="angular.js"></script>
<script src="router.js"></script>
</head>
...var app = angular.module('myApp', ['sahibinden.router']);AngularJS modülünüze config metoduyla aşağıdaki şekilde URL konfigürasyonunuzu girebilirsiniz:
var myApp = angular.module('myApp', ['sahibinden.router'])
.config(function ($routeProvider, $locationProvider, saRouterProvider) {
'use strict';
// Url routing icin html5 pushstate kullan
$locationProvider.html5Mode(true);
// Url tanimlamalari
saRouterProvider.when({
'tr': '/mesajlarim/detay/:id',
'en': '/messages/detail/:idd'
}, {
name: 'my_messages_detail',
controller: 'MyAccountMessageDetailCtrl',
templateUrl: '/views/myAccount/messageDetail/MyAccountMessageDetail.html'
})
.when({
'tr': '/mesajlarim',
'en': '/messages'
}, {
name: 'my_messages',
controller: 'MyAccountMessagesCtrl',
templateUrl: '/views/myAccount/messages/MyAccountMessages.html'
})
.when({
'tr': '/',
'en': '/home'
}, {
name: 'my_account_home',
controller: 'MyAccountDashboardCtrl',
templateUrl: '/views/myAccount/dashboard/MyAccountDashboard.html'
})
.otherwise({
redirectTo : '/'
})
.install($routeProvider);
});Burada her bir view için Türkçe ve İngilizce URL tanımlamaları girdik. Bu kurallara göre kullanıcı /mesajlarim sayfasına girdiğinde MyAccountMessages.html dokümanı MyAccountMessagesCtrl adlı controller ile çalıştırılacaktır. Controller içerisinde dil değişkeni $rootScope'dan lang değeri ile okunabilir:
myApp.controller('MyAccountMessagesCtrl', function ($scope, $rootScope) {
$scope.welcomeMessage = 'Welcome!';
if ($rootScope.lang == 'tr') {
$scope.welcomeMessage = 'Hoşgeldiniz!';
}
});Sayfalara bağlantı verirken URL'leri elle yazmak yerine route adı ile dinamik olarak URL üretmek mümkündür:
<a ng-href="{{ url('my_messages') }}">Mesajlarim</a>Eğer URL konfigürasyonunda dinamik değerler varsa bunlar url fonksiyonuna 2. parametrede nesne olarak gönderilebilir:
<ul>
<li ng-repeat="message in messages">
<a ng-href="{{ url('my_messages_detail', { id: message.id }) }}" ng-bind="message.subject"></a>
</li>
</ul>Uygulamanızın çoklu dil desteği yoksa, standart yönteme yakın şekilde, sadece varsayılan dilin url'i belirtilerek de route'lar belirlenebilir:
...
// Url tanimlamalari
saRouterProvider.when('/mesajlarim/detay/:id', {
name: 'my_messages_detail',
controller: 'MyAccountMessageDetailCtrl',
templateUrl: '/views/myAccount/messageDetail/MyAccountMessageDetail.html'
})
...Yukarıdaki yazım şeklinde sadece varsayılan dil için(eğer değiştirilmezse İngilizce'dir) değer girilmiştir. Varsayılan dil de aşağıdaki komut ile belirlenebilir:
saRouterProvider.setDefaultLang('tr');
// yada
saRouter.setDefaultLang('tr');