Feature: add growl for notification

This commit is contained in:
2015-10-01 12:03:47 +00:00
parent d7847bc6b5
commit 2d3d18ba9b
7 changed files with 32 additions and 17 deletions

View File

@@ -8,7 +8,9 @@
"animate.css": "~3.3.0", "animate.css": "~3.3.0",
"bootstrap": "~3.3.5", "bootstrap": "~3.3.5",
"font-awesome": "~4.4.0", "font-awesome": "~4.4.0",
"angular-xeditable": "~0.1.9" "angular-xeditable": "~0.1.9",
"angular-growl-v2": "~0.7.5",
"angular-animate": "~1.4.7"
}, },
"devDependencies": { "devDependencies": {
"angular-mocks": "~1.4.4" "angular-mocks": "~1.4.4"

View File

@@ -19,6 +19,8 @@ module.exports = function(config) {
'public/libs/angular-route/angular-route.js', 'public/libs/angular-route/angular-route.js',
'public/libs/angular-cookies/angular-cookies.js', 'public/libs/angular-cookies/angular-cookies.js',
'public/libs/angular-xeditable/dist/js/xeditable.min.js', 'public/libs/angular-xeditable/dist/js/xeditable.min.js',
'public/libs/angular-growl-v2/build/angular-growl.min.js',
'public/libs/angular-animate/angular-animate.min.js',
'public/libs/angular-mocks/angular-mocks.js', 'public/libs/angular-mocks/angular-mocks.js',
'public/js/**/*.js', 'public/js/**/*.js',
'public/**/*.controller.js', 'public/**/*.controller.js',

View File

@@ -8,6 +8,7 @@
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css" type="text/css"/> <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="/libs/angular-xeditable/dist/css/xeditable.css" type="text/css" /> <link rel="stylesheet" href="/libs/angular-xeditable/dist/css/xeditable.css" type="text/css" />
<link rel="stylesheet" href="/libs/angular-growl-v2/build/angular-growl.min.css" type="text/css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -21,8 +22,7 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div growl></div>
<div ng-class="{ 'alert': flash, 'alert-success' : flash.type === 'success', 'alert-danger': flash.type === 'error'}" ng-if="flash" ng-bind="flash.message"></div>
<div ng-view></div> <div ng-view></div>
<div class="credits text-center"> <div class="credits text-center">
@@ -38,9 +38,12 @@
<script type="text/javascript" src="/libs/angular-route/angular-route.min.js"></script> <script type="text/javascript" src="/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/libs/angular-cookies/angular-cookies.min.js"></script> <script type="text/javascript" src="/libs/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="/libs/angular-xeditable/dist/js/xeditable.min.js"></script> <script type="text/javascript" src="/libs/angular-xeditable/dist/js/xeditable.min.js"></script>
<script type="text/javascript" src="/libs/angular-growl-v2/build/angular-growl.min.js"></script>
<script type="text/javascript" src="/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script> <script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/routes.js"></script> <script type="text/javascript" src="/js/routes.js"></script>
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/services/authentication.service.js"></script> <script type="text/javascript" src="/js/services/authentication.service.js"></script>
<script type="text/javascript" src="/js/services/flash.service.js"></script> <script type="text/javascript" src="/js/services/flash.service.js"></script>
<script type="text/javascript" src="/js/services/user.service.js"></script> <script type="text/javascript" src="/js/services/user.service.js"></script>

View File

@@ -4,7 +4,7 @@
var HOST = 'http://cloudbudget-febbweiss.c9.io/api'; var HOST = 'http://cloudbudget-febbweiss.c9.io/api';
angular angular
.module('cloudbudget', ['ngRoute', 'routes', 'ngCookies', 'xeditable']) .module('cloudbudget', ['ngRoute', 'ngAnimate', 'routes', 'angular-growl', 'config', 'ngCookies', 'xeditable'])
.constant('apiRoutes', { .constant('apiRoutes', {
'host' : HOST, 'host' : HOST,
'port' : "80", 'port' : "80",

15
public/js/config.js Normal file
View File

@@ -0,0 +1,15 @@
(function() {
'use strict';
angular
.module('config', [])
.config(config);
config.$inject = ['growlProvider'];
function config(growlProvider) {
growlProvider.globalReversedOrder(true);
growlProvider.globalTimeToLive(5000);
growlProvider.globalDisableCountDown(true);
};
})();

View File

@@ -6,8 +6,9 @@
.config(config); .config(config);
config.$inject = ['$routeProvider', '$locationProvider']; config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) { function config($routeProvider, $locationProvider) {
$routeProvider $routeProvider
.when('/', { .when('/', {
controller: 'HomeController', controller: 'HomeController',

View File

@@ -5,9 +5,9 @@
.module('cloudbudget') .module('cloudbudget')
.factory('FlashService', FlashService); .factory('FlashService', FlashService);
FlashService.$inject = ['$rootScope']; FlashService.$inject = ['$rootScope', 'growl'];
function FlashService($rootScope) { function FlashService($rootScope, growl) {
var service = {}; var service = {};
service.success = success; service.success = success;
@@ -35,19 +35,11 @@
} }
function success(message, keepAfterLocationChange) { function success(message, keepAfterLocationChange) {
$rootScope.flash = { growl.success(message,{title: 'Success!'});
message: message,
type: 'success',
keepAfterLocationChange: keepAfterLocationChange
};
} }
function error(message, keepAfterLocationChange) { function error(message, keepAfterLocationChange) {
$rootScope.flash = { growl.error(message, {title: 'Error!'});
message: message,
type: 'error',
keepAfterLocationChange: keepAfterLocationChange
};
} }
} }
})(); })();