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)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

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

Último

Último (20)

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