AngularJS - The Next Big Thing?
-
Upload
tom-hombergs -
Category
Software
-
view
1.716 -
download
7
description
Transcript of AngularJS - The Next Big Thing?
11.04.2023
The Next Big Thing?JavaScript in Modern Web Architectures
Tom Hombergs
11.04.2023 The Next Big Thing?2
Common Web Architecture Styles
► Server-Side Web Frameworks> JSF> JSP> Wicket> GWT> Struts> …
► Portal Server
► CMS-Based Architecture
11.04.2023 The Next Big Thing?3
Server-Side Web Frameworks
Web Container
Servlet Container
Web Framework
EJB Container
…
http://...
Roundtrip for each Change in the GUI!
Server Load!
Potentially Unresponsive
11.04.2023 The Next Big Thing?4
Portal Server
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!
11.04.2023 The Next Big Thing?5
CMS-Based Architecture
CMS-Server
Content
Application Server
Content
Web-Framework
Adapter
Editor
Export
End User
Do-It-Yourself-Framework!
Same Problems as with Web-Frameworks
11.04.2023 The Next Big Thing?6
Revolution?
Abolish Server Side Web Architectures
11.04.2023 The Next Big Thing?7
Alternative: JavaScript-Based Architecture
GUI logic where it belongs
No JavaScript abstraction
11.04.2023 The Next Big Thing?8
Which Styles are Practiced?
28%
2013
25 %
2011
20 %
2009
Portal-BasedCMS-BasedServer-Side Web FrameworkJavaScript-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
11.04.2023 The Next Big Thing?9
Which Languages are en vogue?
JavaScript Ruby Java PHP Python0
50000
100000
150000
200000
250000
300000
# of Github Repositories Created in 2013
http://adambard.com/blog/top-github-languages-for-2013-so-far/
11.04.2023 The Next Big Thing?10
Revolution?
► 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.04.2023 The Next Big Thing?11
How can we rule JavaScript?
11.04.2023 The Next Big Thing?12
AngularJS – Hello World
<!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>
11.04.2023 The Next Big Thing?13
AngularJS – What it is about
11.04.2023 The Next Big Thing?14
An AngularJS Application
'use strict';// Declare app level module which depends on filters, and servicesangular.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'});}]);
Clean Code!
Declare an Angular Module
Declare Dependencies
Configure different routes with a
Controller each
Inject the RouteProvider
11.04.2023 The Next Big Thing?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>
Bind the Angular module to an
HTML element
Include Your Angular
modules / components
Display a (Dynamically
Changing) View
11.04.2023 The Next Big Thing?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'};
}]);
Define the GUI Model
Register the Controller
11.04.2023 The Next Big Thing?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>
Placeholder for Scope Variable
11.04.2023 The Next Big Thing?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(...);
Declare a Service API
Declare a Constant
Different Declaration Styles for different use cases
11.04.2023 The Next Big Thing?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>
Injection of „version“ Service
Modify the content of an HTML element
Apply directive to <span> element
11.04.2023 The Next Big Thing?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>
Register filter named
„replaceVersion“Inject „version“
Service
Apply filter
11.04.2023 The Next Big Thing?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");
};
});
Precondition for all test cases
Navigate to a View
Assert correct state
11.04.2023 The Next Big Thing?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)
11.04.2023 The Next Big Thing?23
AngularJS - Links
► Tutorial: https://docs.angularjs.org/tutorial/
► Project Template: https://github.com/angular/angular-seed
► API Documentation: https://docs.angularjs.org/api