Full Stack Development with LoopBack & The MEAN Stack

Nader Dabit

Twitter @dabit3

Developer @schoolstatusapp

What is the MEAN Stack?

MongoDB

ExpressJS

AngularJS

Node.js

Why is it popular?

1. JavaScript on the Backend, Front End & JSON in the Database

2. Rapid prototyping

3. NPM (151,477 modules and counting)

What is LoopBack?

It's an npm module

It's a set of command line tools

It's a framework build on top of express

It's customizable & extensible

What's it for?

Building RESTful APIs

Building scalable APIS

Building Web Applications

Who's using it?

Getting Started

$

npm install -g strongloop

$

mkdir mean && cd $_

$

slc loopback

$

slc loopback:datasource meandb

$

slc loopback:model Item

http://loopback.io/getting-started/

$

npm install loopback-connector-mongodb

Getting Started

http://loopback.io/getting-started/

"mean" : {

"name" : "mean",

"connector" : "mongodb",

"port" : "27017"

"database" : "meandb",

"host" : "localhost"

}

Open datasource.json

Api is done!

Next, set up Angular app in client folder.

open http://localhost:3000/explorer to view endpoints.

api available at http://localhost:3000/api

$

slc run

app.js

var app = angular.module('mean', []);
app
.constant('ENDPOINT', 'http://localhost:3000/api/')
.service('ItemsModel', ItemsModel)

function ItemsModel($http, ENDPOINT) {
var service = this;
path = 'items/'
function getUrl() {
return ENDPOINT + path;
}
function getUrlForId(itemId) {
return getUrl(path) + itemId;
}
}

1. Set up angular application and define API endpoint.

app.js (in ItemsModel service)

service.all = function () {

  return $http.get(getUrl());
  };
service.fetch = function (itemId) {
  return $http.get(getUrlForId(itemId));
  };
service.create = function (item) {
  return $http.post(getUrl(), item);
  };
service.update = function (itemId, item) {
  return $http.put(getUrlForId(itemId), item);
  };
service.destroy = function (itemId) {
  return $http.delete(getUrlForId(itemId));
  };

2. Define $http methods within ItemsModel

app.js (create MainController)

function MainController($scope, ENDPOINT, ItemsModel) {

  var main = this;
  function getItems() {
ItemsModel.all()
.then(function (result) {
main.items = result.data;
  });
  }

main.items = [];
getItems();

}

3. Get items from database

Add angular + bootstrap (bootstrap optional)

index.html

<body ng-app="mean" ng-controller="MainController as main">
   <div class="container">
   <div class="jumbotron">
       <h1>Welcome to our app!</h1>
   </div>

   <div ng-repeat="item in main.items" class="row">
       <div class="thumbnail">
           <div class="caption">
               <h2>{{item.name}}</h2>
               <p>{{item.description}}</p>
           </div>
       </div>
   </div>
   </div>

</body>

4. Add some css classes and place the html into the view.

index.html

5. Creating an item from the view

function createItem(item) {
ItemsModel.create(item)
.then(function (result) {
   getItems();
   initCreateForm();
});
   }

   function initCreateForm() {
   main.newItem = { name: '', description: '' };
   }

main.createItem = createItem;
initCreateForm();

app.js (in the controller, MainController)

index.html

6. Creating an item from the view

<form class="create-form" role="form" ng-submit="main.createItem(main.newItem)" novalidate>
  <div class="form-group">
  <label>Item Name</label>
  <input type="text" class="form-control" ng-model="main.newItem.name" placeholder="Enter name">
  </div>
  <div class="form-group">
  <label>Item Description</label>
  <input type="text" class="form-control" ng-model="main.newItem.description" placeholder="Enter description">
  </div>
  <button type="submit" class="btn btn-success btn-lg">Create</button>
</form>