AngularJS - The Next Big Thing?

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
Web Container
Servlet Container
Web Framework
EJB Container
…
http://...
Roundtrip for each
Change in the GUI!
Server Load!
Potentially Unresponsive

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!

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

Revolution?
Abolish Server Side
Web Architectures

Alternative: JavaScript-Based Architecture
GUI logic where
it belongs
No JavaScript
abstraction

Which Styles are Practiced?
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?
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/

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?

How can we rule JavaScript?

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>

AngularJS – What it is about

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'});
}]);
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>
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) {
$scope.book = {
title : 'AngularJS',
subtitle : 'Eine praktische Einführung in das
Javascript-Framework'
};
}]);
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>
Placeholder for
Scope Variable

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

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

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

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

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)

AngularJS - Links
► Tutorial: https://docs.angularjs.org/tutorial/
► Project Template: https://github.com/angular/angular-seed
► API Documentation: https://docs.angularjs.org/api

AngularJS - The Next Big Thing?

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a AngularJS - The Next Big Thing?

Semelhante a AngularJS - The Next Big Thing? (20)

Último

Último (20)

AngularJS - The Next Big Thing?

Notas do Editor