Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Dynamic Application using NodeJS and AngularJS with OrientDB
By Apaichon Punopas

Objective

1. Understanding NodeJS and AngularJS Concept.
2. Show the example of Dynamic Application developed
by NodeJS and AngularJS with OrientDB.

Who is

?

Solution Provider for
•

IT Training (Web Platform)
– Javascript , HTML5 ,NodeJS ,
AngularJS, ASP.NET , OrientDB.

c

•

IT Outsourcing

•

Software Package Development

Our Software Package

Sale Channel System
»
»
»
»
»
»
»
»

We are sale channel.
Real time business monitoring.
Forecast and Decision Making.
Customer Centric.
Co-Worker network.
Integrate with Social Network.
Utilize Mobile equipment.
Integrate to POS.

What is NodeJS ?

- NodeJS is Server side application same as
Apache, IIS, Glassfish, Jboss, WebSphere, etc
but different technology.
- Non-Blocking I/O
- Single Thread Application
- Javascript V8 Engine
- Event Loops

Queue Management
No Queue Management

Queue Management

NodeJS Behavior from Test Result

Basic Performance Test


NodeJS 0.1.103 vs Apache 2.2.14
•

•

Hardware dual-core Intel T4200 2 GHZ
machine with 4 GB RAM running Ubuntu
10.04
Hitting them with ApacheBench 2.3
– 1,000 concurrents with 100,000 requests
– 20,000 concurrents with 1,000,000
requests

Test Result

http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php

What is Angular JS ?

Java Script Framework Started on 2009
by google engineers
Miško Hevery

Brad Green

Angular Concept

•
•
•
•
•
•
•

MVC architecture
Client side templates
Scope and View
Data binding
Directive
Routes and View
$http API

MVC vs MVW
MVC
Data (Model)

MVW
DOM(View)

Data (Model)

Controller (JS)

DOM(View)

Whatever

Controller

Directive

Unit Test

Model, View , Controller
Model – Business Model Structure
$scope.model = {name:'Angular' ,type:'MVW' , createdBy:'google', year
:2009};

View – Presentation GUI such as HTML , Jade, etc
<div ng-controller="GreetingCtrl">
{{ greeting }}
</div>

Controller – JS Code controls work flow of application.
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);

Client side templates



No need to access server for rendering



Decouple view from JS code

<h1>{{text}}</h1> +
$scope.text = 'Welcome To Angular';
<h1>Welcome To Angular</h1>

Scope and View
The scope is responsible for detecting changes to
the model section and provides the execution
context for expressions.

Data Binding with Jquery
var newValue = 'bob is happy' ;
$('input').val(newValue);

$('input').on('input', function() { self.value = $(this).val();
});
•

JS code is coupled with HTML

•

Too much code

Data Binding with Angular
$scope.tagline = 'Bob is happy today';

function get_tagline() { return $scope.tagline;
}
•

Decouple JS code from HTML

•

Less code

Directive
Directive is feature for create custom control.
HTML
<div menubar> </div>

JS Code (Angular Directive)
define(['directives/directives'],
function(directives) {
directives.directive('menubar', function() {
return {
restrict: 'EA',
templateUrl: 'views/root.html',
replace: false,
transclude:true,
controller:"RootCtrl"};});
});

Routes and View
Router is feature for define url direct to view or to do
something else.
/Products

Product List Page

/Cart

Shopping Cart Page

/ProductItem/72

Item Detail Page

Angular Router renders a template into the viewport
view port

Router Demo

myApp.config(['$routeProvider', '$locationProvider',
function($routes, $location) {
$routes.
when('/', {
templateUrl: '/app/src/views/list.html',
controller: 'ProductsList'
})
.when('/item/:id', {
templateUrl:
'/app/src/views/details.html',
controller: 'ProductDetails'
})
.otherwise({
redirectTo: '/'
});
$location.html5Mode(true); }]);

$http API
The $http service is a core Angular service that facilitates
communication with the remote HTTP servers via the
browser's XMLHttpRequest object or via JSONP.
•

$http.get

•

$http.head

•

$http.post

$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously

•

$http.put
// when the response is available

•

•

$http.delete
$http.jsonp

}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

Why Angular and No SQL are
Dynamically ?
Business has alway changed requirement.
If we need add more field after production.
Relational Database Way

No SQL with Angular Way
Change

Change

Change

Data (Model)

DOM(View)

Data (Model)

DOM(View)

Change
Controller
Change

DB

Controller
(*Change only complex)

DB

Question and Feedback
Contact to apaichon@hotmail and Facebook

Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to Dynamic Application Development by NodeJS ,AngularJS with OrientDB

Similar to Dynamic Application Development by NodeJS ,AngularJS with OrientDB (20)

More from Apaichon Punopas

More from Apaichon Punopas (8)

Recently uploaded

Recently uploaded (20)

Dynamic Application Development by NodeJS ,AngularJS with OrientDB