Full Stack Development with LoopBack & The MEAN Stack
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