<!DOCTYPE html>
<html ng-app="module">
<head>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-requirSe="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.1.js"></script>
<script data-require="moment.js@2.14.1" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
<script data-require="lodash.js@*" data-semver="3.1.0" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="controller as vm">
<div class="container-fluid">
<h2>{{ vm.greeting }}</h2>
<i>{{vm.subTitle}}</i>
<hr />
<div class="row text-center">
<div class="col-md-2 col-sm-3 col-xs-4 col-md-offset-1">
<div class="alert-wrapper">
<button class="btn btn-primary" ng-click="vm.add('bell')">
<i class="fa fa-plus"></i> Add Alert
</button>
<div class="ico-container">
<i class="fa fa-bell fa-lg">
<span class="alert-number" ng-if="vm.messages.bell.number > 0">{{vm.messages.bell.number > 9 ? '9+': vm.messages.bell.number}}</span>
</i>
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4 ">
<div class="alert-wrapper">
<button class="btn btn-primary" ng-click="vm.add('cart')">
<i class="fa fa-plus"></i> Add To Car
</button>
<div class="ico-container">
<i class="fa fa-cart-plus fa-lg">
<span class="alert-number" ng-if="vm.messages.cart.number > 0">{{vm.messages.cart.number > 9 ? '9+': vm.messages.cart.number}}</span>
</i>
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4 ">
<div class="alert-wrapper">
<button class="btn btn-primary" ng-click="vm.add('cloud')">
<i class="fa fa-plus"></i> Upload
</button>
<div class="ico-container">
<i class="fa fa-cloud fa-lg">
<span class="alert-number" ng-if="vm.messages.cloud.number > 0">{{vm.messages.cloud.number > 9 ? '9+': vm.messages.cloud.number}}</span>
</i>
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4 ">
<div class="alert-wrapper">
<button class="btn btn-primary" ng-click="vm.add('message')">
<i class="fa fa-plus"></i> Add Message
</button>
<div class="ico-container">
<i class="fa fa-comment fa-lg">
<span class="alert-number" ng-if="vm.messages.message.number > 0">{{vm.messages.message.number > 9 ? '9+': vm.messages.message.number}}</span>
</i>
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4 ">
<div class="alert-wrapper">
<button class="btn btn-primary" ng-click="vm.add('heart')">
<i class="fa fa-plus"></i> Like
</button>
<div class="ico-container">
<i class="fa fa-heart fa-lg">
<span class="alert-number" ng-if="vm.messages.heart.number > 0">{{vm.messages.heart.number > 9 ? '9+': vm.messages.heart.number}}</span>
</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
//Angular Dependency
var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function($window) {
return $window._; // assumes underscore has already been loaded on the page
}]);
//Module
angular.module('module', ['ngAnimate', 'ui.bootstrap','underscore']);
//Controller
angular.module('module').controller('controller', [ "$scope", "$http", "$window", "_", "$q",
function ($scope, $http, $window, _, $q) {
var vm = this;
vm.greeting = "Hello and Welcome";
vm.subTitle = "Font-Awesome Icons with alert Numbers "
vm.messages = {
bell: {
number : 0
},
cart: {
number : 0
},
cloud: {
number : 0
},
message: {
number : 0
},
heart: {
number : 0
},
}
vm.add = function(o){
vm.messages[o].number++
console.log("x")
}
}
]);
/* Styles go here */
.ico-container{
padding: 25px;
font-size: 25px;
}
.ico-container > i{
position: relative;
}
.ico-container > i > span {
position: absolute;
font-size: 15px;
font-weight: bold;
line-height: 1.4;
color: white;
background: #ff7575;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
top: -5px;
right: -5px;
}
.alert-wrapper{
margin: 0px 5px 5px;
border-bottom: 2px solid lightblue;
}