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 a...
Who is

?

Solution Provider for
•

IT Training (Web Platform)
– Javascript , HTML5 ,NodeJS ,
AngularJS, ASP.NET , OrientD...
Our Software Package

Sale Channel System
»
»
»
»
»
»
»
»

We are sale channel.
Real time business monitoring.
Forecast an...
High Level Architecture
What is NodeJS ?

- NodeJS is Server side application same as
Apache, IIS, Glassfish, Jboss, WebSphere, etc
but different ...
What is Non-Blocking I/O ?
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...
Test Result
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 Vi...
MVC vs MVW
MVC
Data (Model)

MVW
DOM(View)

Data (Model)

Controller (JS)

DOM(View)

Whatever

Controller

Directive

Uni...
Model, View , Controller
Model – Business Model Structure
$scope.model = {name:'Angular' ,type:'MVW' , createdBy:'google',...
Client side templates



No need to access server for rendering



Decouple view from JS code

<h1>{{text}}</h1> +
$scop...
Scope and View
The scope is responsible for detecting changes to
the model section and provides the execution
context for ...
Data Binding
Data Binding with Jquery
var newValue = 'bob is happy' ;
$('input').val(newValue);

$('input').on('input', function() { se...
Data Binding with Angular
$scope.tagline = 'Bob is happy today';

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

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

JS Code (Angular Directive)
define(['...
Routes and View
Router is feature for define url direct to view or to do
something else.
/Products

Product List Page

/Ca...
Router Demo

myApp.config(['$routeProvider', '$locationProvider',
function($routes, $location) {
$routes.
when('/', {
temp...
$http API
The $http service is a core Angular service that facilitates
communication with the remote HTTP servers via the
...
Why Angular and No SQL are
Dynamically ?
Business has alway changed requirement.
If we need add more field after productio...
Question and Feedback
Contact to apaichon@hotmail and Facebook
THE END
Upcoming SlideShare
Loading in …5
×

Dynamic Application Development by NodeJS ,AngularJS with OrientDB

6,735 views

Published on

Why we need to use NodeJS , AngularJS and OrientDB for Develop Dynamic Application

Published in: Technology

Dynamic Application Development by NodeJS ,AngularJS with OrientDB

  1. 1. Dynamic Application using NodeJS and AngularJS with OrientDB By Apaichon Punopas
  2. 2. Objective 1. Understanding NodeJS and AngularJS Concept. 2. Show the example of Dynamic Application developed by NodeJS and AngularJS with OrientDB.
  3. 3. Who is ? Solution Provider for • IT Training (Web Platform) – Javascript , HTML5 ,NodeJS , AngularJS, ASP.NET , OrientDB. c • IT Outsourcing • Software Package Development
  4. 4. 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.
  5. 5. High Level Architecture
  6. 6. 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
  7. 7. What is Non-Blocking I/O ?
  8. 8. Queue Management No Queue Management Queue Management
  9. 9. 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
  10. 10. Test Result
  11. 11. Test Result http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php
  12. 12. What is Angular JS ? Java Script Framework Started on 2009 by google engineers Miško Hevery Brad Green
  13. 13. Angular Concept • • • • • • • MVC architecture Client side templates Scope and View Data binding Directive Routes and View $http API
  14. 14. MVC vs MVW MVC Data (Model) MVW DOM(View) Data (Model) Controller (JS) DOM(View) Whatever Controller Directive Unit Test
  15. 15. 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!'; }]);
  16. 16. 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>
  17. 17. Scope and View The scope is responsible for detecting changes to the model section and provides the execution context for expressions.
  18. 18. Data Binding
  19. 19. 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
  20. 20. Data Binding with Angular $scope.tagline = 'Bob is happy today'; function get_tagline() { return $scope.tagline; } • Decouple JS code from HTML • Less code
  21. 21. 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"};}); });
  22. 22. 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
  23. 23. 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); }]);
  24. 24. $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. });
  25. 25. 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
  26. 26. Question and Feedback Contact to apaichon@hotmail and Facebook
  27. 27. THE END

×