Your SlideShare is downloading. ×
AngularJS - The Next Big Thing?
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS - The Next Big Thing?


Published on

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.

Published in: Software, Technology, Education

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
  • Transcript

    • 1. 08.07.2014 The Next Big Thing? JavaScript in Modern Web Architectures Tom Hombergs
    • 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. 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. 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. 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. Revolution? Abolish Server Side Web Architectures 08.07.2014 The Next Big Thing?6
    • 7. Alternative: JavaScript-Based Architecture 08.07.2014 The Next Big Thing?7 GUI logic where it belongs No JavaScript abstraction
    • 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. 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. 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. How can we rule JavaScript? 08.07.2014 The Next Big Thing?11
    • 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. AngularJS – What it is about 08.07.2014 The Next Big Thing?13
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. AngularJS - Links ► Tutorial: ► Project Template: ► API Documentation: 08.07.2014 The Next Big Thing?23