Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Download as PPT, PDF9 likes7,246 views
This document provides an overview of NodeJS, AngularJS, and how they can be used together with OrientDB for building dynamic applications. It discusses key concepts like non-blocking I/O in NodeJS, MVC architecture in AngularJS, data binding, directives, routing. It also compares performance of NodeJS vs Apache and explains why Angular and NoSQL are well-suited for dynamic applications that require frequent changes - since only the data model and view layers need changes, without requiring changes to the controller code or database schema.
![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!';
}]);](https://image.slidesharecdn.com/mybigdatapresentation-140302010518-phpapp02/85/Dynamic-Application-Development-by-NodeJS-AngularJS-with-OrientDB-15-320.jpg)
![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"};});
});](https://image.slidesharecdn.com/mybigdatapresentation-140302010518-phpapp02/85/Dynamic-Application-Development-by-NodeJS-AngularJS-with-OrientDB-21-320.jpg)
![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); }]);](https://image.slidesharecdn.com/mybigdatapresentation-140302010518-phpapp02/85/Dynamic-Application-Development-by-NodeJS-AngularJS-with-OrientDB-23-320.jpg)
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
- 1. Dynamic Application using NodeJS and AngularJS with OrientDB By Apaichon Punopas
- 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
- 7. What is Non-Blocking I/O ?
- 8. Queue Management No Queue Management Queue Management
- 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. Test Result
- 12. What is Angular JS ? Java Script Framework Started on 2009 by google engineers Miško Hevery Brad Green
- 13. Angular Concept • • • • • • • MVC architecture Client side templates Scope and View Data binding Directive Routes and View $http API
- 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.
- 18. Data Binding
- 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
- 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. 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. 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. $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
- 26. Question and Feedback Contact to apaichon@hotmail and Facebook
- 27. THE END