2. Objective
1. Understanding NodeJS and AngularJS Concept.
2. Show the example of Dynamic Application developed
by NodeJS and AngularJS with OrientDB.
3. Who is
?
Solution Provider for
•
IT Training (Web Platform)
– Javascript , HTML5 ,NodeJS ,
AngularJS, ASP.NET , OrientDB.
c
•
IT Outsourcing
•
Software Package Development
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.
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
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
14. MVC vs MVW
MVC
Data (Model)
MVW
DOM(View)
Data (Model)
Controller (JS)
DOM(View)
Whatever
Controller
Directive
Unit Test
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. 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. Scope and View
The scope is responsible for detecting changes to
the model section and provides the execution
context for expressions.
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. Data Binding with Angular
$scope.tagline = 'Bob is happy today';
function get_tagline() { return $scope.tagline;
}
•
Decouple JS code from HTML
•
Less code
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
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. 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