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

$

npm install loopback-connector-mongodb

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

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

<script src="bower_components/angular/angular.min.js"></script>
 

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>

app.js (in the controller, MainController)

7. Deleting an Item

function deleteItem(itemId) {
      ItemsModel.destroy(itemId)
          .then(function (result) {
              getItems();
          });
}

main.deleteItem = deleteItem;

index.html

8. Deleting an Item

<button type="button" class="btn btn-danger" ng-click="main.deleteItem(item.id)">

Delete

</button>

THANKS!

Resources:

Download completed application at