"AngularJS is what HTML would have been, had it been designed for applications." - Miško Hevery
<label>How do you like Kod.io? It's</label>
<input type="text" ng-model="word">
<p>Kod.io is {{word}}</p>!
!
Kod.io is {{word}}!
Song | Interpret |
---|---|
{{song.title}} | {{song.artist}} |
<section ng-controller="FilterCtrl">
<input type="text" ng-model="search">
<table>
<tr>
<td>Song</td>
<td>Interpret</td>
</tr>
<tr ng-repeat="song in songs | orderBy:'title' | filter:search">
<td>{{song.title}}</td>
<td>{{song.artist}}</td>
</tr>
</table>
</section>
<div draggable></div>
app.directive('draggable', function($document) {
var startX=0, startY=0, x = 0, y = 0;
return function(scope, element, attr) {
element.css({
position: 'relative',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
});
function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
Go and check out the docs!
"Internationalization is the process of developing products in such a way that they can be localized for languages and cultures easily."
"Localization is the process of adapting applications and text to enable their usability in a particular cultural or linguistic market."
Internationalizing an application means abstracting all of the strings and other locale-specific bits out of an application.
Localizing an application means providing translations and localized formats for the abstracted bits.
{{ 1288323623006 | date:'fullDate' }}
{{ 1288323623006 | date:'yyyy-MM-dd HH:mm:ss' }}
Default formatting: {{number | number}}
No fractions: {{number | number:0}}
Default formatting: {{number | number}}
No fractions: {{number | number:0}}
Default currency symbol ($): {{amount | currency}}
Custom currency identifier (USD$): {{amount | currency:"USD$"}}
Default currency symbol ($): {{amount | currency}}
Custom currency identifier (USD$): {{amount | currency:"USD$"}}
<label>Enter a number:</label>
<input type="text" ng-model="personCount">
<ng-pluralize
count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}"
></ng-pluralize>
...and many more.
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider
.translations('en', {
'APP_TITLE': 'Hey this is my app title',
'SOME_TEXT': 'Here\'s some text.'
})
.translations('de', {
'APP_TITLE': 'Hey, dass ist mein App-Title',
'SOME_TEXT': 'Hier ist etwas Text.'
})
.preferredLanguage('en');
});
<h1 translate="APP_TITLE"></h1>
<p translate="SOME_TEXT"></p>
<div ng-controller="LangCtrl">
<button ng-click="changeLanguage('en')">english</button>
<button ng-click="changeLanguage('de')">german</button>
<h1 translate="APP_TITLE"></h1>
<p translate="SOME_TEXT"></p>
</div>
app.controller('LangCtrl', function ($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});
app.config(function ($translateProvider) {
$translateProvider
.translations('en', {
'USER_LOGIN': 'Hello, you are logged in as {{user}}',
'SOME_OTHER_TEXT': 'I need {{count | number}} beers right now!'
})
.translations('de', {
'USER_LOGIN': 'Hallo, du bist eingeloggt als {{user}}',
'SOME_OTHER_TEXT': 'Ich brauche jetzt {{count | number}} Bier!'
})
.preferredLanguage('en');
});
<p translate="USER_LOGIN" translate-value-user="{{user}}"></p>
<p translate="SOME_OTHER_TEXT" translate-value-count="{{count}}"></p>
app.config(function ($translateProvider) {
$translateProvider
.translations('en', {
'USER_LOGIN': 'Hello, you are logged in as {{user}}',
'SOME_OTHER_TEXT': 'I need {{count | number}} beers right now!'
})
.translations('de', {
'USER_LOGIN': 'Hallo, du bist eingeloggt als {{user}}',
'SOME_OTHER_TEXT': 'Ich brauche jetzt {{count | number}} Bier!'
})
.translations('fr', {
'GREETING': 'Salut!'
})
.preferredLanguage('en')
.fallbackLanguage('fr');
});
<p translate="USER_LOGIN" translate-value-user="{{user}}"></p>
<p translate="SOME_OTHER_TEXT" translate-value-count="{{count}}"></p>
<p translate="GREETING"></p>
app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'lang-',
suffix: '.json'
})
.preferredLanguage('en');
});
Request: /lang-{langKey}.json
app.config(function ($translateProvider, $provide) {
$provide.factory('customLoader', function ($timeout, $q) {
return function (options) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve({
'FOO': 'bar',
'BAR': 'foo'
});
}, 5000);
return deferred.promise;
};
});
$translateProvider
.useLoader('customLoader')
.preferredLanguage('en');
});
<p translate="FOO"></p>
<p translate="BAR"></p>