Angular Services Sample

An angular applications that uses multiple services

by otupman

HTML

<div class="container" ng-app="myApp">
    <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>
            </tbody>
        </table>
    </div>
</div>

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() {
    this.notify = function(message) {
        alert(message);
    }
});

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.notify("Where's the next shot?"); 
    }
    
    self.reset();
})

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

app.factory('spicer', function() {
    var spicerService = {};
    spicerService.spiceItUp = function(dish) {
        if(dish.spicyness < 3) dish.spicyness++;
    }
    spicerService.spiceItDown = function(dish) {
        if(dish.spicyness > 0) dish.spicyness--;
    }
    return spicerService;
})

function MexicanController($scope, spicer, tortillaContainer, tequiller, yeller) {
    var spicyLevels = ["Mah",...