AngularJS - The Next Big Thing?


Published on

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

Published in: Software, Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • What is the alternative?
  • A module can contain other Angular components like filters, services, directives and controllers
    A module can declare dependencies to other modules
  • Multiple ng-views? No, but you can nest views with the UI-Router module
    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
    Create your own GUI widgets as HTML-elements!
    Or use the many provided directives like form, input and the like
  • You can do much more with directive
    Create your own GUI widgets as HTML-elements!
    Or use the many provided directives like form, input and the like
  • Services etc. can be mocked for tests
    Also unit tests can be made for Angular components without HTML views
    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
    Angular JS Training at adesso is on the way
  • AngularJS - The Next Big Thing?

    1. 1. 08.07.2014 The Next Big Thing? JavaScript in Modern Web Architectures Tom Hombergs
    2. 2. 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
    3. 3. 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
    4. 4. 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!
    5. 5. 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
    6. 6. Revolution? Abolish Server Side Web Architectures 08.07.2014 The Next Big Thing?6
    7. 7. Alternative: JavaScript-Based Architecture 08.07.2014 The Next Big Thing?7 GUI logic where it belongs No JavaScript abstraction
    8. 8. 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
    9. 9. 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
    10. 10. 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?
    11. 11. How can we rule JavaScript? 08.07.2014 The Next Big Thing?11
    12. 12. 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>
    13. 13. AngularJS – What it is about 08.07.2014 The Next Big Thing?13
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. 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
    23. 23. AngularJS - Links ► Tutorial: ► Project Template: ► API Documentation: 08.07.2014 The Next Big Thing?23