AngularjsDrinksDemoApp

From Education Centre
Revision as of 00:04, 22 May 2015 by Admin (Talk | contribs) (HTML Page)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Drinks Demo App

HTML Page

  • Create you HTML page linking it to CSS and Javascript libraries such as Bootstrap, Jquery and Angular JS.
  • ng-app - this binds your page to the AngularJs module
  • ng-controller - this binds your HTML element node and everything inside it to the controller defined in your AngularJS app so that it has access to its $scope variable and all its functions.
  • ng-repeat - iterates over the variable defined in the scope.
  • ng-model - this binds the data input form elements to a new variable which is put into the $scope and accessible in your Javascript file of your AngularJS controller. The model is updated automatically when you bind ng-model to an input.
<!DOCTYPE html>
<html ng-app="drinks-app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Drinks Demo App</h1>
    <table class="table table-bordered table-condensed table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Ingredients</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="drink in drinks" ng-class="drink.row">
          <td><input ng-model="drink.name" ng-change="nameChanged()"></td>
          <td>{{drink.description}}</td>
          <td><ul><li ng-repeat="ingredient in drink.ingredients"><input ng-model="ingredient.ingredient" ng-change="drink.row = 'yellow';drink.status='changed'"></li></ul></td>
          <td>{{drink.status}}</td>
        </tr>
      </tbody>
    </table>
  </body>

{{drinks}}

CSS

Used for the table row background

/* Styles go here */

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}


Javascript Code

  • Declare you Angular module and inject the dependencies
  • Declare your controllers and pass in any required dependencies and $scope variables
  • Declare and initialise and scope variables and functions you require in your page.
  • Define your Services - this is factory method to access a RESTful Api with the verbs. $http is a method to submit request and returns a response in the form of JSON.
// Code goes here

'use strict';
var app = angular.module('drinks-app', ['app.controllers', 'app.services', 'ui.bootstrap']);

//CONTROLLERS
var controllers = angular.module('app.controllers',[]);

controllers.controller('MainCtrl', function( $scope, $location, $routeParams, $dialog, Drink)  {

    $scope.drinks = Drink.list();

    $scope.nameChanged = function(item){
        var msgbox = $dialog.messageBox('Delete Item', 'Hey! You changed the name!', [{label:'Yes, I did', result: 'yes'},{label:'Nope', result: 'no'}]);
        msgbox.open().then(function(result){
            if(result === 'yes') {
              //code to delete here
              console.log("deleting item " + item.name);
            }
        });
    };
});

//SERVICES
var services = angular.module('app.services', [])

services.factory( 'Drink', function($http) {
    var Drink = function(data) { angular.extend(this, data); };

    Drink.get = function(drink) {
        return $http.get('/drinks/' + drink.drinkid).then(function(response) { return response.data; });
    };

    Drink.list = function() {
        return $http.get('drinks.json').then(function(response, status) { return response.data; })
    };

    return Drink;
});


Data - JSON file

This could a remote RESTful API return response in JSON format. Or for test we could use a Json file.

[
  {
		"description" : "A refreshing cocktail of Vodka, peach schnapps, cranberry and orange juice. Can be served over ice as a drink or strained into a shot or martini glass.",
		"image" : "sexonthebeach.jpg",
    "row" : "red",
		"ingredients" : [
			{
				"amount" : "2/3 oz.",
				"ingredient" : "Peach schnapps"
			},
			{
				"amount" : "1 1/3 oz.",
				"ingredient" : "Vodka"
			},
			{
				"amount" : "1 1/3 oz.",
				"ingredient" : "Cranberry juice"
			},
			{
				"amount" : "1 1/3 oz.",
				"ingredient" : "Orange juice"
			}
		],
		"instructions" : "Combine ingredients in a cocktail shaker with ice. Shake and strain into a highball glass filled with ice.",
		"name" : "Sex on the Beach",
		"id" : "e9ac9d445adc98c9"
	},
	{
		"description" : "Similar to a boilermaker: you drop a shot glass full of Irish whiskey and Irish cream into a glass of stout beer and drink it all at once.",
		"image" : "irishcarbomb.jpg",
    "row" : "red",
		"ingredients" : [
			{
				"amount" : "1/2 oz.",
				"ingredient" : "Bailey's Irish Cream"
			},
			{
				"amount" : "1/2 pint",
				"ingredient" : "Guinness Stout"
			},
			{
				"amount" : "1/2 oz.",
				"ingredient" : "Jameson Irish whiskey"
			}
		],
		"instructions" : "Pour half a pint of chilled Guinness into a beer mug and let it settle. Take a shot glass filled with 1/2 oz. of Irish whiskey on the bottom and 1/2 oz. of Irish cream on top. Drop the shot glass into the Guinness and chug.",
		"name" : "Irish Car Bomb",
		"id" : "9119bdc498c06913"
	},
	{
		"description" : "Open the liquor cabinet and follow these simple instructions for an authentic Long Island iced tea. Garnish with a lemon slice and take a sip!",
		"image" : "longislandicetea.jpg",
    "row" : "blue",
		"ingredients" : [
			{
				"amount" : "1 part",
				"ingredient" : "Triple Sec"
			},
			{
				"amount" : "1 part",
				"ingredient" : "Gin"
			},
			{
				"amount" : "1 part",
				"ingredient" : "Rum, white"
			},
			{
				"amount" : "2 parts",
				"ingredient" : "Simple syrup"
			},
			{
				"amount" : "1 part",
				"ingredient" : "Tequila, white"
			},
			{
				"amount" : "1 part",
				"ingredient" : "Vodka"
			},
			{
				"amount" : "1 part",
				"ingredient" : "Cola"
			},
			{
				"amount" : "2 parts",
				"ingredient" : "Lemon juice"
			}
		],
		"instructions" : "Pour everything into a collins glass, splashing cola on tthe top, and stir gently. Garnish with a lemon spiral and a straw.",
		"name" : "Long Island Ice Tea",
		"id" : "552ce0674162e890"
	},
	{
		"description" : "They say an apple a day . . . so why not for recipes? This Washington Apple Shot is a little sweet, a little tart — but always smooth and a definite crowd pleaser.",
		"image" : "washingtonapple.jpg",
    "row" : "red",
		"ingredients" : [
			{
				"amount" : "2 oz.",
				"ingredient" : "Canadian whiskey"
			},
			{
				"amount" : "2 oz.",
				"ingredient" : "Sour Apple Pucker"
			},
			{
				"amount" : "4 oz.",
				"ingredient" : "Apple-cranberry juice"
			}
		],
		"instructions" : "Mix apple pucker and Crown Royal and fill with Apple-cranberry juice. Mix well serve with ice.",
		"name" : "Washington Apple",
		"id" : "229509c1bd784842"
	},
	{
		"description" : "This citrusy shooter is made with vodka, triple sec and lime juice.",
		"image" : "kamikaze.jpg",
    "row" : "blue",
		"ingredients" : [
			{
				"amount" : "1 oz.",
				"ingredient" : "Triple Sec or Cointreau"
			},
			{
				"amount" : "1 oz.",
				"ingredient" : "Vodka"
			},
			{
				"amount" : "1 oz.",
				"ingredient" : "Lime juice"
			},
			{
				"amount" : "1",
				"ingredient" : "Lime wedge"
			}
		],
		"instructions" : "Shake ingredients in a cocktail shaker with ice. Strain into a cocktail glass. Garnish with a lime wedge and a stir stick.",
		"name" : "Kamikaze",
		"id" : "3495e74cf9208855"
	},
	{
		"description" : "This is an authentic recipe for mojito. I sized the recipe for one serving, but you can adjust it accordingly and make a pitcher full. It's a very refreshing drink for hot summer days.",
		"image" : "mojito.jpg",
    "row" : "blue",
		"ingredients" : [
			{
				"amount" : "1 1/3 oz.",
				"ingredient" : "Rum, light"
			},
			{
				"amount" : "1 oz.",
				"ingredient" : "Lime juice"
			},
			{
				"amount" : "1 1/2 oz.",
				"ingredient" : "Simple syrup"
			},
			{
				"amount" : "12 pieces",
				"ingredient" : "Mint leaves"
			},
			{
				"amount" : "2",
				"ingredient" : "Lime wedge"
			},
			{
				"amount" : "4 oz.",
				"ingredient" : "Club soda"
			}
		],
		"instructions" : "Gently muddle the lime juice, mint leaves, and sugar syrup together at the bottom of the glass. Fill the glass with ice, then slowly add the rum. Fill with soda and stir gently to bring the leaves upwards into the mixture. Optionally add lime wedges as an addition garnish.",
		"name" : "Mojito",
		"id" : "6d9636c6c306f814"
	},
	{
		"description" : "A traditional brunch beverage. Enjoy this light delight on Mother's Day, Christmas, or any special occasion.",
		"image" : "mimosa.jpg",
    "row" : "blue",
		"ingredients" : [
			{
				"amount" : "2 1/2 oz.",
				"ingredient" : "Champagne"
			},
			{
				"amount" : "2 1/2 oz.",
				"ingredient" : "Orange juice"
			}
		],
		"instructions" : "Pour chilled orange juice, and add chilled champagne.",
		"name" : "Mimosa",
		"id" : "0e8bf081dd7fdbc6"
	},
	{
		"description" : "The cosmopolitan, typically referred to as the 'cosmo,' gained popularity during the 1990s when it was frequently mentioned on the television show Sex and the City. The combination of vodka, orange liqueur, lime juice, and cranberry juice have made it a timeless classic.",
		"image" : "cosmopolitan.jpg",
    "row" : "red",
		"ingredients" : [
			{
				"amount" : "1/2 oz.",
				"ingredient" : "Triple Sec/Cointreau"
			},
			{
				"amount" : "1 1/3 oz.",
				"ingredient" : "Vodka"
			},
			{
				"amount" : "1 oz.",
				"ingredient" : "Cranberry juice"
			},
			{
				"amount" : "1",
				"ingredient" : "Lime wedge"
			}
		],
		"instructions" : "Shake ingredients in a cocktail shaker with ice. Strain into a cocktail glass and garnish with a lime slice.",
		"name" : "Cosmopolitan",
		"id" : "be926fcea053f827"
	},
	{
		"description" : "The Jägerbomb is a bomb shot cocktail that was originally mixed by dropping a shot of Jägermeister into a glass of beer but in recent years has become more popular with Red Bull or other energy drinks.",
		"image" : "jagerbomb.jpg",
    "row" : "blue",
		"ingredients" : [
			{
				"amount" : "1 shot",
				"ingredient" : "Jägermeister"
			},
			{
				"amount" : "4 oz.",
				"ingredient" : "Red Bull"
			}
		],
		"instructions" : "Pour Red Bull into a regular glass, then drop in a shot glass full of Jagermeister. Shoot the whole thing.",
		"name" : "Jäger Bomb",
		"id" : "376a92b790ea09de"
	},
	{
		"description" : "An Incredible Hulk, Green Eyed Monster, or Hip and Hen is a green-colored cocktail made by equal parts (2 fl oz each)[1][2][3] of the fruit liqueur Hpnotiq and Hennessy brand cognac poured over ice. It is named for the famously green comic book superhero, the Hulk.",
		"image" : "incrediblehulk.jpg",
    "row" : "red",
		"ingredients" : [
			{
				"amount" : "2 oz.",
				"ingredient" : "Cognac"
			},
			{
				"amount" : "2 oz.",
				"ingredient" : "Hpnotiq"
			}
		],
		"instructions" : "Chill both the beverages before use. Add equal parts Hpnotiq and Hennessy cognac. The result is a mean green drink with a fruity but killer bite.",
		"name" : "Incredible Hulk",
		"id" : "01b8de83bb826807"
	}
]



Code in Plunkr

http://plnkr.co/edit/Oxu1NV?p=preview Drinks Demo App Code