jim-clark

---

Learning Objectives

• Understand the Use Case for Custom Directives

• Create a Custom Directive

jim-clark

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rake db:seed (or created alongside the db with db:setup).
#
# Examples:
#
#   cities = City.create([{ name: 'Chicago' }, { name: 'Copenhagen' }])
#   Mayor.create(name: 'Emanuel', city: cities.first)

hippos = Hippo.create(
    [{name:"Peter the Hippo",age:29,weight:2334,price:947.59},

jim-clark

Intro to Node.js

Learning Objectives
Understand What Node.js Is
Use Node.js to Execute JavaScript
Use Node.js as a Basic Web Server

jim-clark

Our First MEAN Stack Application

---

Learning Objectives

• Create a basic Node.js app using the Express framework

jim-clark

angular.module('hipposApp', [])

.controller('HomeController', HomeController);


function HomeController($scope, $http) {

    $http.get('/api/hippos')
        .success(function(data) {
            $scope.hippos = data;

jim-clark

Adding Realtime to our MEAN Stack Application

---

Learning Objectives

• Add realtime event-based communication between client and server in a MEAN Stack app

jim-clark

<!-- Add this HTML to the end of the existing HTML, just above the Socket.IO script. -->

    <hr>
    <div class="row">
        <div class="col-xs-4">
            <h4>Hippo Live Chat</h4>
        </div>
        <div class="col-xs-8 text-right">
            <label>Your Name:</label> <input type="text" ng-model="username">&nbsp;&nbsp;
            <button ng-click="sendMsg()" class="btn btn-success">Send Message</button>

jim-clark

presentation

---

ActiveRecord Methods and Finders

---

Objectives

• Query a model using AR methods

jim-clark

Realtime Chat Lab

---

This Lab is a Partner Exersise

---

Requirements

• Using your knowledge from the previous lesson, build a realtime chat app that:

jim-clark

/*
  **** ControllerAs Syntax ****
*/



/* ControllerAs with an anonymous function & array annotation */
angular
  .module('myApp')
  .controller('MainController', ['$http', function($http) {