Einführung in AngularJS

Sebastian Springer
@basti_springer
Wednesday, June 26, 13

WER BIN ICH?
• Sebastian Springer
• https://github.com/sspringer82
• @basti_springer
• Teamlead @ Mayﬂower

INHALT
• Bootstrap
• Scope
• Controller
• Model
• View
• Direktiven
• Filter
• Dependency Injection
• Module
• Testing

ANGULAR?
• Open Source MVC Framework
• von Google
• sehr gut erweiterbar
• jQuery lite bundled
• ng-* Direktiven

INDEX.HTML

BOOTSTRAP
<!DOCTYPE html>
<html ng-app>
<head>
<title>Movie Database</title>
<script src="/js/lib/angular.js"></script>
</head>
<body>
Hello {{ 'World!' }}
</body>
</html>

BOOTSTRAP

CONTROLLER
• Funktionen
• Kontrolliert dasVerhalten der Applikation
• Verbindet Models undViews
• Scope alsVerbindungselement

CONTROLLER
<!DOCTYPE html>
<html data-ng-app>
<head>
<script src="/js/controllers.js"></script>
</head>
<body ng-controller="MovieListCtrl">
{{ name }}
</body>
</html>

JS/CONTROLLERS.JS

CONTROLLER
function MovieListCtrl($scope) {
$scope.name = 'Matrix';
}

SCOPE
• Änderungen in Models erkennen
• Ausführungskontext
• An Controller gebunden

}
SCOPE

<!DOCTYPE html>
<html data-ng-app>
<head>
</head>
{{ name }}
</body>
</html>
SCOPE

DATA-BINDING
• Das Model hält die Daten
• DieView erhält die Daten und stellt sie dar
• Scope alsVerbindungsstück

TWO-WAY-DATA-BINDING
• Controller gibt den Wert für das Model vor
• Über das Model kann der Wert geändert werden

TWO-WAY-DATA-BINDING
function LoginCtrl($scope) {
$scope.username = 'stranger';
$scope.login = function () {
if ($scope.username === 'admin' &&
$scope.password === 'test') {
$scope.user = 'Administrator';
}
}
}

MODEL
• Daten zur Darstellung in derView
• keinerleiVorgaben hinsichtlich des Aufbaus

MODEL
}

VIEW
• Darstellung der Modeldaten
• Zeigt Änderungen des Models sofort an
• Zugriff auf den Scope über {{ }}

VIEW
<!DOCTYPE html>
<html data-ng-app>
<head>
</head>
{{ name }}
</body>
</html>

DIREKTIVEN

DIREKTIVEN
• HTML Attribute
• Verhalten oder DOMTransformation
• Built-ins und eingene Direktiven
• Eigene Direktiven
• z.B. ngApp, ngController, ngRepeat

DIREKTIVEN
$scope.films = [
{name: 'Matrix', year: 2005, genre: 'Sci-Fi'},
{name: 'Avatar', year: 2009, genre: 'Sci-Fi'},
{name: 'Gran Torino', year: 2008, genre: 'Drama'}
];
}

<table>
<thead>
<tr>
<th>Name</th><th>Jahr</th><th>Genre</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="film in films">
<td>{{film.name}}</td>
<td>{{film.year}}</td>
<td>{{film.genre}}</td>
</tr>
</tbody>
</table>

• Datentransformation
• Verbindung über das Pipe-Symbol
• Eigene Filter
• z.B. uppercase, json
FILTER

{{ 'Hello World' | uppercase }}
<input ng-model="search">
<table>
<thead>
<tr>
<th>Name</th><th>Jahr</th><th>Genre</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="film in films | filter: search">
<td>{{film.name}}</td>
<td>{{film.year}}</td>
<td>{{film.genre}}</td>
</tr>
</tbody>
</table>

DEPENDENCY INJECTION

• Strukturierung - Komponenten für Model,View, Controller
• Lose Kopplung - DI löst Abhängigkeiten auf
• DI stellt Services zurVerfügung
• Caching Mechanismus

function MovieListCtrl($scope, $http) {
$http.get('/movies').success(function(data) {
$scope.films = data;
});
}

• Geben den Bootstrap-Prozess einer Applikation vor
• Service Modul
• Directive Modul
• Filter Modul
• Application Modul
MODULE

MODULE
var myApp = angular.module('myApp', []);
myApp.controller('MovieListCtrl',
['$scope', '$http', function ($scope, $http) {
$http.get('/movies').success(function(data) {
$scope.films = data;
});
}]);

TESTING

TESTS
• Karma alsTestrunner
• sudo npm install -g karma
• Angular setzt auf Jasmine
• Zwei Arten vonTests
• Unittests
• E2E-Tests

UNITTESTS

UNITTESTS
• Testen Units of Code
• Grundlage fürTDD
• Pfad: test/unit/*
• Konﬁguration: conﬁg/karma.conf.js

TEST/UNIT/
CONTROLLERSPEC.JS

describe('movieListCtrl', function(){
var scope, ctrl, $httpBackend;
beforeEach(inject(function(_$httpBackend_, $rootScope,
$controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('data/movies.json').respond(
[{"name": "Matrix", "year": 2005, "genre": "Sci-Fi"}]
);
scope = $rootScope.$new();
ctrl = $controller(movieListCtrl, {$scope: scope});
}));

it ("should fetch a list with one movie", function () {
expect(scope.films).toBeUndefined();
$httpBackend.flush();
expect(scope.films).toEqual(
[{"name": "Matrix", "year": 2005, "genre": "Sci-Fi"}]
);
});

UNITTESTS
$ ./scripts/test.sh
Starting Karma Server (http://karma-runner.github.io)
-------------------------------------------------------------------
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser Firefox
INFO [Firefox 21.0 (Mac)]: Connected on socket id 8lw9q3ZBbNpAb7rc3RpS
INFO [Chrome 27.0 (Mac)]: Connected on socket id KI5wy1rfgkIU32cP3RpR
Firefox 21.0 (Mac): Executed 4 of 4 SUCCESS (0.134 secs / 0.037 secs)
Chrome 27.0 (Mac): Executed 4 of 4 SUCCESS (0.157 secs / 0.044 secs)
TOTAL: 8 SUCCESS

UNITTESTS
INFO [watcher]: Changed file "/srv/
angularMovieDB/app/js/controllers.js".
Watcher

E2E
• Testen zusammenhängende Units
• DOM-Manipulationen
• Pfad: test/e2e
• Konﬁguration: conﬁg/karma-e2e.conf.js

TEST/E2E/SCENARIOS.JS

E2E
describe('Movie List', function() {
beforeEach(function() {
browser().navigateTo('../../app/index.html');
});
it('should display 3 movies', function() {
expect(repeater('table tbody tr').count()).toBe(3);
});
});

E2E
• Webserver ausführen
• ./scripts/web-server.js
• Tests ausführen
• ./scripts/e2e-test.sh

E2E
./scripts/e2e-test.sh
Starting Karma Server (http://karma-runner.github.io)
-------------------------------------------------------------------
[2013-06-22 10:26:07.404] [WARN] config - "/" is proxied, you should
probably change urlRoot to avoid conflicts
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Mac)]: Connected on socket id 4YaYP4NBBNKlOgDS_YbA
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.385 secs / 0.189 secs)

E2E
• http://docs.angularjs.org/guide/dev_guide.e2e-testing

ANGULAR-SEED

ANGULAR-SEED
• Basisstruktur für Projekte
• https://github.com/angular/angular-seed

TIPPS &TRICKS
• Setzt Module ein
• Nutzt den Router
• Achtet auf den Scope
• Nutzt die Direktiven
• SchreibtTests

FRAGEN?

KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82

Einführung in AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to Einführung in AngularJS

Similar to Einführung in AngularJS (20)

More from Sebastian Springer

More from Sebastian Springer (20)

Recently uploaded

Recently uploaded (20)

Einführung in AngularJS