<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
<script src="//rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.js"></script>
<script src="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="SumoApp">
<h1>Angular Growl + Translate Demo</h1>
<div growl></div>
<br/>
<div class="panel panel-primary" ng-controller="GrowlDemoCtrl">
<div class="panel-heading">
<h3 class="panel-title">{{ 'HEADLINE' | translate }}</h3>
</div>
<div class="panel-body">
<p>{{ 'PARAGRAPH' | translate }}
<span class="pull-right">
<a ng-click="setLang('de_DE')" translate="BUTTON_LANG_DE"></a>
<a ng-click="setLang('en_EN')" translate="BUTTON_LANG_EN"></a>
</span>
</p>
<div>
<button type="button" class="btn btn-danger" ng-click="addErrorMessage()">Add Danger Alert</button><br/><br/>
<button type="button" class="btn btn-warning" ng-click="addWarnMessage()">Add Warning Alert</button><br/><br/>
<button type="button" class="btn btn-info" ng-click="addInfoMessage()">Add Info Alert</button><br/><br/>
<button type="button" class="btn btn-success" ng-click="addSuccessMessage()">Add Success Alert</button><br/><br/>
<button type="button" class="btn btn-warning" ng-click="addTranslatedMessage()">Add Translated Alert</button>
</div>
</div>
</div>
</body>
</html>
// Code goes here
angular.module('SumoApp', ['ui.bootstrap', 'pascalprecht.translate','angular-growl'])
.config(function (growlProvider, $translateProvider) {
growlProvider.globalTimeToLive(5000);
$translateProvider.translations('en_EN', {
"HEADLINE": "What an awesome module!",
"PARAGRAPH": "Srsly!",
"SUCCESS_MESSAGE": "Translated success message",
"ERROR_MESSAGE" : "Translated error message",
"BUTTON_LANG_DE" : "german",
"BUTTON_LANG_EN" : "english"
})
$translateProvider.translations('de_DE', {
"HEADLINE": "Was für ein großartiges Modul!",
"PARAGRAPH": "Ernsthaft!",
"SUCCESS_MESSAGE": "Hey! Ich wurde als text übergeben!",
"ERROR_MESSAGE": "Ich wurde als Attribut übergeben, cool oder?",
"BUTTON_LANG_DE": "deutsch",
"BUTTON_LANG_EN": "englisch"
});
$translateProvider.preferredLanguage('en_EN');
$translateProvider.fallbackLanguage(['en_EN']);
})
.run(function($rootScope, growl, $translate) {
})
.controller('GrowlDemoCtrl', function ($scope, growl, $translate) {
$scope.setLang = function (langKey) {
$translate.use(langKey);
};
$scope.addTranslatedMessage = function() {
growl.addSuccessMessage("SUCCESS_MESSAGE");
growl.addErrorMessage("ERROR_MESSAGE");
growl.addWarnMessage("Override global ttl setting", {ttl: 10000});
}
$scope.addErrorMessage = function() {
growl.addErrorMessage("This adds a error message");
}
$scope.addWarnMessage = function() {
growl.addWarnMessage("This adds a warn message");
}
$scope.addInfoMessage = function() {
growl.addInfoMessage("This adds a info message");
}
$scope.addSuccessMessage = function() {
growl.addSuccessMessage("This adds a success message");
}
})
/* Styles go here */
This Plunker show how Angular Growl Module take advantage of Angular-Translate Module