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...
AngularJS 1.x? Warum nicht Angular 2?
“Angular 2 is currently in Developer Preview. We recommend using Angular 1.X
for pro...
Dilemma?
1.x 2
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> ...
ES 2015 Support / TypeScript
● Angular 2 wird in TypeScript entwickelt
● Verwendet ES 2015 Module
○ Framework wird modular...
Verbesserte Dependency Injection
● Hierarchische Dependency Injection Container
● Matching der Abhängigkeiten über Typ, ni...
Komponentenbasiert
● Keine Standalone Controller mehr (ng-controller=””)
● Kein $scope mehr
● @Component: Komponente (≅ An...
Neuer Router
● Komponentenbasiert
● Deutlich mächtiger als ng-route
● Parallelentwicklung für Angular 2 und Angular 1.x
○ ...
TypeScript
TypeScript und EcmaScript
ES 5
ES 2015
TypeScript
ES 2015 Module
Import, Export
http://www.2ality.com/2014/09/es6-modules-final.html
// lib/math.js
export function sum(x, y) {
return x + ...
Default Export
http://www.2ality.com/2014/09/es6-modules-final.html
//------ myFunc.js ------
export default function foo(...
Module Loader API
http://www.2ality.com/2014/09/es6-modules-final.html
System.import('lib/debug').then(function(m) {
// do...
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
'...
Bootstrapping
//app.js
angular.module('myTestApp', []);
------------
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
Refactoring Patterns
Controller & Direktiven
ng-controller durch Komponente ersetzen Teil 1: Controller Aliasing
//index.html
<body ng-app="myTestApp">
<main ng-contro...
//index.html
<body ng-app="myTestApp">
<main ng-controller="MainCtrl as mainCtrl">
<ul ng-controller="RepoListCtrl as repo...
ng-controller durch Komponente ersetzen Teil 3: Root ng-controller entfernen
//index.html
<body ng-app="myTestApp">
<main-...
ng-controller durch Komponente ersetzen Teil 4: Direktive und Controller kombinieren
//main.directive.js
angular.module('m...
ng-controller durch Komponente ersetzen Teil 4b: Direktive in TypeScript
//main.directive.js
angular.module('myTestApp')
....
ng-controller durch Komponente ersetzen Teil 5: Teilkomponente extrahieren
//mainApp.template.html
<main>
<ul ng-controlle...
ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter
// repoList.directive.js
angular.module('myTest...
ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter
// repoList.directive.js
angular.module('myTest...
https://github.com/cjanz/angular-refactoring-patterns
Bitte noch mal langsam...
ngUpgrade
AngularJS 1.x und Angular 2 in einer Anwendung
https://github.com/angular/ngUpgrade
Fazit
AngularJS 1.x ist nicht tot
● Einige Ansätze aus Angular 2 können auch in
AngularJS 1.x genutzt werden
○ ES 2015 Module
○ ...
Fragen?
Danke für die Aufmerksamkeit :-)
Nächste SlideShare
Wird geladen in …5
×

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

842 Aufrufe

Veröffentlicht am

Seit der Ankündigung von Angular 2 fragen sich viele Entwickler, wie der Migrationspfad für Angular 1.x Anwendungen aussieht. Da Angular 2 noch nicht für produktive Anwendungen eingesetzt werden kann, stellt sich vor allem die Frage, wie man bei der Entwicklung neuer Anwendungen mit Angular 1.x vorgehen sollte, damit die Migration später möglichst einfach wird. Diese Session liefert Antworten hierauf.

Vorgestellt werden u.a. der Einsatz von EcmaScript 2015 Modulen, TypeScript und Patterns für Komponenten und Services. Abschließend gibt es noch einen Ausblick auf Ideen und Strategien für die schrittweise Migration von bestehenden Anwendungen nach Angular 2.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
842
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
72
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Zukunftssichere Anwendungen mit AngularJS 1.x entwickeln Christian Janz (@c_janz) christian.janz@bridging-it.de
  2. 2. Wer steht hier vorne? Christian Janz Consultant bei BridgingIT GmbH in Mannheim Interesse: Architektur und Entwicklung von Geschäftsanwendungen mit modernen Frameworks
  3. 3. 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/
  4. 4. Dilemma? 1.x 2
  5. 5. Entwickle die Anwendung mit AngularJS 1.x, aber mit Angular 2 im Blick Lösungsansatz
  6. 6. Neuerung in Angular 2 Eine Auswahl :-)
  7. 7. Neue Template-Syntax 1. <li *ng-for="#hero of heroes" (click)="onSelect(hero)"> 2. <span class="badge">{{hero.id}}</span> {{hero.name}} 3. </li>
  8. 8. 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);
  9. 9. Verbesserte Dependency Injection ● Hierarchische Dependency Injection Container ● Matching der Abhängigkeiten über Typ, nicht über Name
  10. 10. Komponentenbasiert ● Keine Standalone Controller mehr (ng-controller=””) ● Kein $scope mehr ● @Component: Komponente (≅ AngularJS 1.x Direktiven) ● @Directive: Komponente ohne View
  11. 11. Neuer Router ● Komponentenbasiert ● Deutlich mächtiger als ng-route ● Parallelentwicklung für Angular 2 und Angular 1.x ○ Gleiche API ○ Soll Migration erleichtern
  12. 12. TypeScript
  13. 13. TypeScript und EcmaScript ES 5 ES 2015 TypeScript
  14. 14. ES 2015 Module
  15. 15. 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));
  16. 16. Default Export http://www.2ality.com/2014/09/es6-modules-final.html //------ myFunc.js ------ export default function foo() { ... }; //------ main1.js ------ import myFunc from 'myFunc'; // import { default as foo } from 'myFunc'; myFunc();
  17. 17. Module Loader API http://www.2ality.com/2014/09/es6-modules-final.html System.import('lib/debug').then(function(m) { // do something with the module m });
  18. 18. Browser-Support Kein Browser unterstützt bisher nativ ES 2015 Module ⇒ Bibliotheken/Tools notwendig
  19. 19. Refactoring Patterns Services & Bootstrapping
  20. 20. 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)) .then(function (result) { return result.data; }); } }
  21. 21. 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>
  22. 22. Refactoring Patterns Controller & Direktiven
  23. 23. ng-controller durch Komponente ersetzen Teil 1: Controller Aliasing //index.html <body ng-app="myTestApp"> <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 <body ng-app="myTestApp"> <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>
  24. 24. //index.html <body ng-app="myTestApp"> <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> ng-controller durch Komponente ersetzen Teil 2: Direktive erstellen //index.html <body ng-app="myTestApp"> <main-app></main-app> </body> //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { return { scope: true, templateUrl: 'mainApp.template.html' } }) //mainApp.template.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>
  25. 25. ng-controller durch Komponente ersetzen Teil 3: Root ng-controller entfernen //index.html <body ng-app="myTestApp"> <main-app></main-app> </body> //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { return { scope: true, templateUrl: 'mainApp.template.html' } }) //mainApp.template.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> //index.html <body ng-app="myTestApp"> <main-app></main-app> </body> //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { return { scope: true, controller: 'MainCtrl', controllerAs: 'mainCtrl', templateUrl: 'mainApp.template.html' } }) //mainApp.template.html <main> <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>
  26. 26. ng-controller durch Komponente ersetzen Teil 4: Direktive und Controller kombinieren //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { return { scope: true, controller: 'MainCtrl', controllerAs: 'mainCtrl', templateUrl: 'mainApp.template.html' } }) //main.ctrl.js angular.module('myTestApp') .controller('MainCtrl', function () { this.userId = 'bridgingIT'; this.selectedRepo = ''; this.selectRepo = function(repo) { this.selectedRepo = repo; } }); //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { function MainCtrl() { this.userId = 'bridgingIT'; this.selectedRepo = ''; this.selectRepo = function(repo) { this.selectedRepo = repo; } } return { scope: true, controller: MainCtrl, controllerAs: 'mainCtrl', templateUrl: 'mainApp.template.html' } });
  27. 27. ng-controller durch Komponente ersetzen Teil 4b: Direktive in TypeScript //main.directive.js angular.module('myTestApp') .directive('mainApp', function() { function MainCtrl() { this.userId = 'bridgingIT'; this.selectedRepo = ''; this.selectRepo = function(repo) { this.selectedRepo = repo; } } return { scope: true, controller: MainCtrl, controllerAs: 'mainCtrl', templateUrl: 'mainApp.template.html' } }); //main.directive.ts class MainController { public userId: string = 'bridgingIT'; public selectedRepo: string = ''; public onSelectRepo(repo: string) { this.selectedRepo = repo; } } export default () => { return { scope: {}, controller: MainController, controllerAs: 'mainCtrl', 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]);
  28. 28. ng-controller durch Komponente ersetzen Teil 5: Teilkomponente extrahieren //mainApp.template.html <main> <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> //mainApp.template.html <main> <repo-list></repo-list> <div> Selected Repo: {{mainCtrl.selectedRepo}} </div> </main> // repoList.directive.js angular.module('myTestApp') .directive('repoList', function () { function RepoListCtrl($scope, gitHubService) { var that = this; $scope.$watch('mainCtrl.userId', function (newUserId) { gitHubService.getRepos(newUserId) .then(function (result) { that.repos = result.map(function (repo) { return repo.name; }); }); }); } return { scope: true, controller: RepoListCtrl, controllerAs: 'repoListCtrl', templateUrl: 'repoList.template.html' } });
  29. 29. ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter // repoList.directive.js angular.module('myTestApp') .directive('repoList', function () { function RepoListCtrl($scope, gitHubService) { var that = this; $scope.$watch('mainCtrl.userId', function (newUserId) { gitHubService.getRepos(newUserId) .then(function (result) { that.repos = result.map(function (repo) { return repo.name; }); }); }); } return { scope: true, controller: RepoListCtrl, controllerAs: 'repoListCtrl', templateUrl: 'repoList.template.html' } }); // repoList.template.html <ul> <li ng-repeat="repo in repoListCtrl.repos" ng-click="mainCtrl.selectRepo(repo)"> {{repo}} </li> </ul> //mainApp.template.html <main> <repo-list></repo-list> <div> Selected Repo: {{mainCtrl.selectedRepo}} </div> </main>
  30. 30. ng-controller durch Komponente ersetzen Teil 5: Input und Output Parameter // repoList.directive.js angular.module('myTestApp') .directive('repoList', function () { function RepoListCtrl($scope, gitHubService) { var that = this; $scope.$watch('repoListCtrl.userId', function (newUserId) { gitHubService.getRepos(newUserId) .then(function (result) { that.repos = result.map(function (repo) { return repo.name; }); }); }); this.selectRepo = function(repo) { that.onSelectRepo({repo: repo}); } } return { scope: { userId: '=', onSelectRepo: '&' }, bindToController: true, controller: RepoListCtrl, controllerAs: 'repoListCtrl', templateUrl: 'repoList.template.html' } }); // repoList.template.html <ul> <li ng-repeat="repo in repoListCtrl.repos" ng-click="repoListCtrl.selectRepo(repo)"> {{repo}} </li> </ul> //mainApp.template.html <main> <repo-list user-id="mainCtrl.userId" on-select-repo="mainCtrl.selectRepo(repo)"> </repo-list> <div> Selected Repo: {{mainCtrl.selectedRepo}} </div> </main>
  31. 31. https://github.com/cjanz/angular-refactoring-patterns Bitte noch mal langsam...
  32. 32. ngUpgrade
  33. 33. AngularJS 1.x und Angular 2 in einer Anwendung https://github.com/angular/ngUpgrade
  34. 34. Fazit
  35. 35. 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
  36. 36. Fragen?
  37. 37. Danke für die Aufmerksamkeit :-)

×