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?

1,680
views

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,680
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 http://adambard.com/blog/top-github-languages-for-2013-so-far/
    • 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.services', '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) { $scope.book = { 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('myApp.services', []); 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 http://jan.varwig.org/archive/angularjs-views-vs-directives) ► Easy to integrate with other frameworks (server-side and client-side) 08.07.2014 The Next Big Thing?22
    • 23. AngularJS - Links ► Tutorial: https://docs.angularjs.org/tutorial/ ► Project Template: https://github.com/angular/angular-seed ► API Documentation: https://docs.angularjs.org/api 08.07.2014 The Next Big Thing?23

    ×