AngularJS - The Next Big Thing?
Upcoming SlideShare
Loading in...5

AngularJS - The Next Big Thing?



Discussion of the disadvantages of server-side web architectures and introduction to AngularJS as an alternative.

Discussion of the disadvantages of server-side web architectures and introduction to AngularJS as an alternative.



Total Views
Views on SlideShare
Embed Views



3 Embeds 9 7 1 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • What is the alternative?
  • A module can contain other Angular components like filters, services, directives and controllers <br /> A module can declare dependencies to other modules
  • Multiple ng-views? No, but you can nest views with the UI-Router module <br /> But you should not nest views but use directives instead
  • Controller should access services to get GUI Model values
  • Service can access a backend
  • You can do much more with directive <br /> Create your own GUI widgets as HTML-elements! <br /> Or use the many provided directives like form, input and the like
  • You can do much more with directive <br /> Create your own GUI widgets as HTML-elements! <br /> Or use the many provided directives like form, input and the like
  • Services etc. can be mocked for tests <br /> Also unit tests can be made for Angular components without HTML views <br /> Live Demo of angular-seed project template
  • Easy integration: Angular can be attached to any part of the DOM and leave the rest of the DOM in peace <br /> Angular JS Training at adesso is on the way

AngularJS - The Next Big Thing? AngularJS - The Next Big Thing? Presentation Transcript

  • 08.07.2014 The Next Big Thing? JavaScript in Modern Web Architectures Tom Hombergs
  • Common Web Architecture Styles 08.07.2014 The Next Big Thing?2 ► Server-Side Web Frameworks > JSF > JSP > Wicket > GWT > Struts > … ► Portal Server ► CMS-Based Architecture
  • Server-Side Web Frameworks 08.07.2014 The Next Big Thing?3 Web Container Servlet Container Web Framework EJB Container … http://... Roundtrip for each Change in the GUI! Server Load! Potentially Unresponsive
  • Portal Server 08.07.2014 The Next Big Thing?4 Portlet Container http://... Web Container Portlet 1 Servlet Container Web Framework EJB Container … Portlet 2 Servlet Container Web Framework EJB Container … Portlet Servlet Container Web Framework EJB Container … Yay! More Server Load!
  • CMS-Based Architecture 08.07.2014 The Next Big Thing?5 CMS-Server Content Application Server Content Web-Framework Adapter Editor Export End User Do-It-Yourself-Framework! Same Problems as with Web-Frameworks
  • Revolution? Abolish Server Side Web Architectures 08.07.2014 The Next Big Thing?6
  • Alternative: JavaScript-Based Architecture 08.07.2014 The Next Big Thing?7 GUI logic where it belongs No JavaScript abstraction
  • Which Styles are Practiced? 08.07.2014 The Next Big Thing?8 28% 2013 25 % 2011 20 % 2009 Portal-Based CMS-Based Server-Side Web Framework JavaScript-Based 18 % 2007 Diagrams show number of project descriptions in skill profiles at adesso AG containing one of the following keywords: JSP, Spring MVC, Wicket, JSF, JavaScript, FirstSpirit, Portlet, Struts, GWT
  • Which Languages are en vogue? 08.07.2014 The Next Big Thing?9 0 50000 100000 150000 200000 250000 300000 JavaScript Ruby Java PHP Python # of Github Repositories Created in 2013
  • Revolution? 08.07.2014 The Next Big Thing?10 ► The era of Server-Side Web Architectures is not quite over, but we‘re getting there ► JavaScipt might rule some day ► How can we rule JavaScript?
  • How can we rule JavaScript? 08.07.2014 The Next Big Thing?11
  • AngularJS – Hello World 08.07.2014 The Next Big Thing?12 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8"/> <title>AngularJS Sandbox</title> </head> <body ng-init="name='AngularJS'"> <h1>Hello {{ name }}</h1> <input type="text" ng-model="name"/> <script src="lib/angular/angular.min.js"></script> </body> </html>
  • AngularJS – What it is about 08.07.2014 The Next Big Thing?13
  • An AngularJS Application 'use strict'; // Declare app level module which depends on filters, and services angular.module('myApp', [ 'ngRoute', 'myApp.filters', '', 'myApp.directives', 'myApp.controllers' ]). config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'}); $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'}); $routeProvider.otherwise({redirectTo: '/view1'}); }]); 08.07.2014 The Next Big Thing?14 Clean Code! Declare an Angular Module Declare Dependencies Configure different routes with a Controller each Inject the RouteProvider
  • An AngularJS Layout Template <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> … </head> <body> … <div ng-view></div> … <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-route/angular- route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html> 08.07.2014 The Next Big Thing?15 Bind the Angular module to an HTML element Include Your Angular modules / components Display a (Dynamically Changing) View
  • An AngularJS Controller var module = angular.module('myApp.controllers', []); module.controller('MyCtrl1', ['$scope', function($scope) { $ = { title : 'AngularJS', subtitle : 'Eine praktische Einführung in das Javascript-Framework' }; }]); 08.07.2014 The Next Big Thing?16 Define the GUI Model Register the Controller
  • An AngularJS View Template <p>This is the partial for /view1.</p> <h1>Book Details</h1> <ul> <li>Title: {{ book.title }}</li> <li>Subtitle: {{ book.subtitle }}</li> </ul> 08.07.2014 The Next Big Thing?17 Placeholder for Scope Variable
  • An AngularJS Service var module = angular.module('', []); module.service('version', function(){ // Public API return { getVersion: function(){ return '0.1'; } }; }); module.constant('version', '0.1'); // other possible service declarations: module.factory(...); module.provider(...); module.value(...); 08.07.2014 The Next Big Thing?18 Declare a Service API Declare a Constant Different Declaration Styles for different use cases
  • An AngularJS Directive angular.module('myApp.directives', []). directive('appVersion', ['version', function(version) { return function(scope, element, attrs) { element.text(version); }; }]); <div> Current Version: v<span app-version></span> </div> 08.07.2014 The Next Big Thing?19 Injection of „version“ Service Modify the content of an HTML element Apply directive to <span> element
  • An AngularJS Display Filter angular.module('myApp.filters', []). filter('replaceVersion', ['version', function(version) { return function(text) { return String(text).replace(/%VERSION%/mg, version); }; }]); <p> Result of 'interpolate' filter: {{ 'Current version is v%VERSION%.' | replaceVersion }} </p> 08.07.2014 The Next Big Thing?20 Register filter named „replaceVersion“ Inject „version“ Service Apply filter
  • AngularJS – „End To End“ Testing describe("Book details view test", function () { beforeEach(function () { browser().navigateTo("/"); }); it("should show the correct book details"), function(){ browser().navigateTo("#/books/123"); expect(element(".book-title").html()).toBe("AngularJS"); }; }); 08.07.2014 The Next Big Thing?21 Precondition for all test cases Navigate to a View Assert correct state
  • AngularJS – Conclusion ► Complex Eco-System > Jasmine > Protractor > Bower > NodeJS > Karma > … ► Hard to structure the building blocks within an Angular App for Beginners (see ► Easy to integrate with other frameworks (server-side and client-side) 08.07.2014 The Next Big Thing?22
  • AngularJS - Links ► Tutorial: ► Project Template: ► API Documentation: 08.07.2014 The Next Big Thing?23