Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsruhe 2015)

Zukunftssichere Anwendungen
mit AngularJS 1.x entwickeln
Christian Janz (@c_janz)
christian.janz@bridging-it.de

Wer steht hier vorne?
Christian Janz
Consultant bei BridgingIT GmbH in Mannheim
Interesse: Architektur und Entwicklung von
Geschäftsanwendungen mit modernen Frameworks

AngularJS 1.x? Warum nicht Angular 2?
“Angular 2 is currently in Developer Preview. We recommend using Angular 1.X
for production applications.”
https://angular.io/docs/ts/latest/

Entwickle die Anwendung mit AngularJS 1.x,
aber mit Angular 2 im Blick
Lösungsansatz

Neuerung in Angular 2
Eine Auswahl :-)

Neue Template-Syntax
1. <li *ng-for="#hero of heroes" (click)="onSelect(hero)">
2. <span class="badge">{{hero.id}}</span> {{hero.name}}
3. </li>

ES 2015 Support / TypeScript
● Angular 2 wird in TypeScript entwickelt
● Verwendet ES 2015 Module
○ Framework wird modularer
○ Kein eigenes Modulsystem mehr (angular.
module(...))
● Einsatz von Decorators für Metadaten
1. import {bootstrap, Component} from
'angular2/angular2';
2.
3. @Component({
4. selector: 'my-app',
5. template: '<h1>My First Angular 2 App</h1>'
6. })
7. class AppComponent { }
8.
9. bootstrap(AppComponent);

Verbesserte Dependency Injection
● Hierarchische Dependency Injection Container
● Matching der Abhängigkeiten über Typ, nicht über Name

Komponentenbasiert
● Keine Standalone Controller mehr (ng-controller=””)
● Kein $scope mehr
● @Component: Komponente (≅ AngularJS 1.x Direktiven)
● @Directive: Komponente ohne View

Neuer Router
● Komponentenbasiert
● Deutlich mächtiger als ng-route
● Parallelentwicklung für Angular 2 und Angular 1.x
○ Gleiche API
○ Soll Migration erleichtern

TypeScript und EcmaScript
ES 5
ES 2015
TypeScript

Import, Export
http://www.2ality.com/2014/09/es6-modules-final.html
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Default Export
//------ myFunc.js ------
export default function foo() { ... };
//------ main1.js ------
import myFunc from 'myFunc';
// import { default as foo } from 'myFunc';
myFunc();

Module Loader API
System.import('lib/debug').then(function(m) {
// do something with the module m
});

Browser-Support
Kein Browser unterstützt bisher nativ ES 2015 Module
⇒ Bibliotheken/Tools notwendig

Refactoring Patterns
Services & Bootstrapping

Services
angular.module('myTestApp')
.factory('gitHubService', function ($http) {
function buildRepoUrl(userId) {
return
'https://api.github.com/users/'
+ userId + '/repos';
}
function getRepos(userId) {
return $http.get(buildRepoUrl(userId))
.then(function (result) {
return result.data;
});
}
return {
getRepos: getRepos
}
});
export default class GitHubService {
constructor(private $http: angular.IHttpService) {
}
private buildRepoUrl(userId: string): string {
return `https://api.github.com/users/${userId}
/repos`;
}
public getRepos(userId: string): any {
return this.$http.get(this.buildRepoUrl(userId))
return result.data;
});
}
}

Bootstrapping
//app.js
angular.module('myTestApp', []);
------------
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Old Code</title>
</head>
<body ng-app="myTestApp">
<script src="bower_components/angular/angular.js"
></script>
<script src="app.js"></script>
<script src="github.service.js"></script>
</body>
</html>
//app.ts
import angular = require('angular');
import GitHubService from './github.service';
let module = angular.module('myTestApp', [])
.service('gitHubService', GitHubService);
angular.bootstrap(window.document.body, [module.name]);
------------
//index.html
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/app');
</script>
</body>
</html>

Refactoring Patterns
Controller & Direktiven

ng-controller durch Komponente ersetzen Teil 1: Controller Aliasing
//index.html
<main ng-controller="MainCtrl">
<ul ng-controller="RepoListCtrl">
<li ng-repeat="repo in repos"
ng-click="selectRepo(repo)">
{{repo}}
</li>
</ul>
<div>
Selected Repo: {{selectedRepo}}
</div>
</main>
</body>
//index.html
<main ng-controller="MainCtrl as mainCtrl">
<ul ng-controller="RepoListCtrl as repoListCtrl">
<li ng-repeat="repo in repoListCtrl.repos"
ng-click="mainCtrl.selectRepo(repo)">
{{repo}}
</li>
</ul>
<div>
Selected Repo: {{mainCtrl.selectedRepo}}
</div>
</main>
</body>

//index.html
{{repo}}
</li>
</ul>
<div>
</div>
</main>
</body>
ng-controller durch Komponente ersetzen Teil 2: Direktive erstellen
//index.html
<main-app></main-app>
</body>
//main.directive.js
.directive('mainApp', function() {
return {
scope: true,
templateUrl: 'mainApp.template.html'
}
})
//mainApp.template.html
{{repo}}
</li>
</ul>
<div>
</div>
</main>

ng-controller durch Komponente ersetzen Teil 3: Root ng-controller entfernen
//index.html
</body>
//main.directive.js
return {
scope: true,
}
})
{{repo}}
</li>
</ul>
<div>
</div>
</main>
//index.html
</body>
//main.directive.js
return {
scope: true,
controller: 'MainCtrl',
controllerAs: 'mainCtrl',
}
})
<main>
{{repo}}
</li>
</ul>
<div>
</div>
</main>

ng-controller durch Komponente ersetzen Teil 4: Direktive und Controller kombinieren
//main.directive.js
return {
scope: true,
controller: 'MainCtrl',
}
})
//main.ctrl.js
.controller('MainCtrl', function () {
this.userId = 'bridgingIT';
this.selectedRepo = '';
this.selectRepo = function(repo) {
this.selectedRepo = repo;
}
});
//main.directive.js
function MainCtrl() {
}
}
return {
scope: true,
controller: MainCtrl,
}
});

ng-controller durch Komponente ersetzen Teil 4b: Direktive in TypeScript
//main.directive.js
function MainCtrl() {
}
}
return {
scope: true,
controller: MainCtrl,
}
});
//main.directive.ts
class MainController {
public userId: string = 'bridgingIT';
public selectedRepo: string = '';
public onSelectRepo(repo: string) {
}
}
export default () => {
return {
scope: {},
controller: MainController,
templateUrl: 'mainApp.template.html',
bindToController: true,
}
}
//app.ts
import angular = require('angular');
import MainComponent from './main.directive;
let module = angular.module('myTestApp', [])
.directive('mainApp', MainComponent)
angular.bootstrap(window.document.body, [module.name]);

ng-controller durch Komponente ersetzen Teil 5: Teilkomponente extrahieren
<main>
{{repo}}
</li>
</ul>
<div>
</div>
</main>
<main>
<repo-list></repo-list>
<div>
</div>
</main>
// repoList.directive.js
.directive('repoList', function () {
function RepoListCtrl($scope, gitHubService) {
var that = this;
$scope.$watch('mainCtrl.userId', function (newUserId) {
gitHubService.getRepos(newUserId)
that.repos = result.map(function (repo) {
return repo.name;
});
});
});
}
return {
scope: true,
controller: RepoListCtrl,
controllerAs: 'repoListCtrl',
templateUrl: 'repoList.template.html'
}
});

ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter
var that = this;
$scope.$watch('mainCtrl.userId', function (newUserId) {
return repo.name;
});
});
});
}
return {
scope: true,
}
});
// repoList.template.html
<ul>
{{repo}}
</li>
</ul>
<main>
<repo-list></repo-list>
<div>
</div>
</main>

ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter
var that = this;
$scope.$watch('repoListCtrl.userId', function (newUserId) {
return repo.name;
});
});
});
that.onSelectRepo({repo: repo});
}
}
return {
scope: {
userId: '=',
onSelectRepo: '&'
},
bindToController: true,
}
});
// repoList.template.html
<ul>
ng-click="repoListCtrl.selectRepo(repo)">
{{repo}}
</li>
</ul>
<main>
<repo-list
user-id="mainCtrl.userId"
on-select-repo="mainCtrl.selectRepo(repo)">
</repo-list>
<div>
</div>
</main>

https://github.com/cjanz/angular-refactoring-patterns
Bitte noch mal langsam...

AngularJS 1.x und Angular 2 in einer Anwendung
https://github.com/angular/ngUpgrade

AngularJS 1.x ist nicht tot
● Einige Ansätze aus Angular 2 können auch in
AngularJS 1.x genutzt werden
○ ES 2015 Module
○ Komponenten
● TypeScript erleichtert Refactoring
● Parallelbetrieb und schrittweise Migration sind
möglich

Danke für die Aufmerksamkeit :-)

Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsruhe 2015)

More Related Content

What's hot (19)

Viewers also liked (20)

Recently uploaded (20)

Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln (GDG DevFest Karlsruhe 2015)