Angular Services Sample - fancy notifier

An angular applications that uses multiple services

by otupman

HTML

<div class="container" ng-app="myApp">
    <div ng-controller="NotificationController">
        <ul>
            <div class="alert" 
                ng-repeat="message in messages" 
                ng-class="{'error': 'alert-error', 'info': 'alert-info'}[message.type]">
                <i class="icon-remove-circle" ng-click='removeMessage($index)'></i>
                {{message.text}}
            </div>
        </ul>
    </div>
    <div ng-controller="MexicanController">
        <h1>Mexican Restaurant <small>Tortillas: {{tortillaContainer.tortillas()}}</small></h1>
        <button ng-click="tortillaContainer.addTortilla()" class="btn btn-primary"><i class="icon-plus icon-white"></i> Add tortillas!</button>&nbsp;<button ng-click="drink()" class="btn btn-primary"><i class="icon-tint icon-white"></i>{{tequiller.message}}</button><br/><br/><input type="text" ng-model="message"/><button class="btn" ng-click="yell()">Yell it!</button>
        <table class="table">
            <thead>
            <tr>
                <th> Dishes </th>
                <th> Ingredients </th>
                <th> Spicyness </th>
                <th> Actions </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="dish in dishes">
                <td>{{dish.name}}<br/></td>
                <td>
                    <ul>
                        <li ng-repeat="ingredient in dish.ingredients">
                            {{ingredient}}
                        </li>
                    </ul>
                </td>
                <td><label class="label label-{{getSpiceClass(dish.spicyness)}}">{{getSpiceValue(dish.spicyness)}}</label></td>
                <td><button ng-click="spicer.spiceItUp(dish)" class="btn btn-primary"><i class="icon-arrow-up icon-white"></i> Spice it up!</button><br/><br/><button ng-click="spicer.spiceItDown(dish)" class="btn btn-primary"><i class="icon-arrow-down icon-white"></i> Spice it down!</button></td>
            </tr>
           ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

var mexicanFood = [{
    name: "Enchiladas Mexicanas",
    ingredients: ["Tortilla", "Green Spicy Sauce", "Chicken", "Cheese", "Carrots"],
    spicyness: 1
}, {
    name: "Gorditas",
    ingredients: ["Tortilla", "Rinsed Meat", "Fried Pork", "Red Sauce"], spicyness: 2}, {name: "Tacos", ingredients:["Tortilla", "Beef", "Pineapple", "Celery", "Onion", "Spicy Sauce"], spicyness:3}];

var app = angular.module('myApp', []);

app.service('notifier', function() {
    var self = this;
    
    self.clear = function() {
        self.messages = [];
    }
    
    self.remove = function(messageIndex) {
        self.messages.splice(messageIndex, 1);
    }
    
    self.notify = function(message) {
        self.messages.push({text: message, type: 'info'});
    }
    
    self.error = function(message) {
        self.messages.push({text: message, type: 'error'});
    }
    
    self.clear();
});

function NotificationController($scope, notifier) {
    $scope.visible = true;
    $scope.messages = notifier.messages;
    $scope.removeMessage = function(messageIndex) {
        notifier.remove(messageIndex);
    }
}

app.service('yeller', function(notifier){
    this.yell = function() {
        notifier.notify(this.message);
    }
})

app.service('tequiller', function($timeout, notifier) {    
    var self = this;
    
    self.reset = function() {
        self.drinkingTime = 5;
        self.message = "Drink Tequila!"
    }
    
    self.drink = function() {
        self.drinkingTime--;
        self.message = "Shots in " + self.drinkingTime;
        if(self.drinkingTime > 0) {
            $timeout(self.drink, 1000);
        }
        else {
            self.reset();
            self.machoYell();
        }
    }
    
    self.machoYell = function() {
        notifier.error("Where's the next shot?"); 
    }
    
    self.reset();
})

app.factory('tortillaContainer', function() {
    var tortillaService = {};
    var tortillaCounter = 0;
    tortillaService.addTortilla = function() {
...