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

More Related Content

What's hot (9)

Similar to Einführung in AngularJS (20)

More from Sebastian Springer (20)

Recently uploaded (20)

Einführung in AngularJS