2. Who are we ?
William Marques Flavien Cathala
@wylmarq
wmarques@ippon.fr
JHipster Member
Ippon Consultant
@flaviencathala
fcathala@ippon.fr
JHipster Member
Epitech Student
11. Follow the John Papa style
Major rules :
Folder-By-Feature
Scope Isolation (controllerAs “vm”)
IIFE (avoid minification conflicts)
https://github.com/johnpapa/angular-styleguide/tree/master/a1
(that’s him)
12. Be modular !
Create module files and declare your controllers and factories there
Code is cleaner
Easy module loader setup
Source: https://github.com/tuchk4/requirejs-angular-loader
13. Do Components
Only available in >= 1.5.x
Easy switch to Angular 2 Component
Promote best practices (scope isolation)
One-way binding possible
angular.module('heroApp').component('heroDetail', {
templateUrl: 'heroDetail.html',
controller: HeroDetailController,
bindings: {
hero: '='
}
});
14. BONUS 1 : Do TypeScript
Spoiler : You will write TypeScript with Angular 2 (widely recommended)
Add classes, types, imports in your code
Very easy migration to Angular 2
https://codepen.io/martinmcwhorter/post/angularjs-1-x-with-typescript-or-es6-best-practices
15. BONUS 2 : Yarn
New package manager (another one)
Much faster
Easy to use (same command as NPM)
Avoid “works on my machine” issue
Offline Installation
27. Migration Plan : Bottom Up
1. Setup migration (install Angular 2 packages, the hybrid app)
2. Migrate small controllers, services, templates (leafs) and then their
parents
3. Migrate routes
4. Check 3rd party dependencies (Angular UI, Angular Translate)
5. Remove AngularJS Code / Dependencies
28. upgradeAdapter
Incremental Update (hybrid app)
Upgrade your Angular 1 Services, Controllers…
Downgrade your Angular 2 Services, Components…
Bad performance (temporary solution)
Why ?
29. Setup
Remove ng-app and strict-di attribute in your template
Create an app.main.ts :
upgradeAdapter.bootstrap(document.body, ['myApp.app'], {strictDi: true});
30. Setup
import * as angular from 'angular';
import { UpgradeAdapter } from '@angular/upgrade';
import { forwardRef } from '@angular/core';
import { Ng2BasicAppModule } from './app.ng2module';
export var upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2BasicAppModule));
Create an upgrade_adapter.ts file
31. Usage
Downgrade an Angular 2 Component to use it in your Angular 1 App,
add in your module file :
For a service :
.directive(‘home’, <angular.IDirectiveFactory> upgradeAdapter.downgradeNg2Component(HomeComponent))
.factory(‘example’, adapter.downgradeNg2Provider(Example));
32. Controller Migration
- Remove the IIFE
- Remove the $inject
- Use the @Component annotation
- Replace controller function by class
34. Same refactoring as controllers
Add your service in the providers array of your Angular 2 Module in order to
inject it in your Angular 2 Components
Downgrade it using the upgradeAdapter in your Angular 1 Module :
Service migration
.factory('example', adapter.downgradeNg2Provider(Example));
36. Angular 1 Dependency in Angular 2 ?
Upgrade the Angular 1 provider in your module file, using the upgradeAdapter:
Use the @Inject annotation in your Angular 2 controller/service constructor :
Same for Angular 1 lib dependencies ($state, $rootScope… )
@Inject('heroes') heroes: HeroesService
adapter.upgradeNg1Provider('heroes');
37. Routes Migration
Angular 2 Router UI-Router NG2
Default solution for Angular Team
Inspired by AngularJS UI Router
Component Oriented
Easy migration from UI Router NG 1
Visualizer feature
Breaking changes from UI Router NG1 Not the official Solution
Final Decision : UI-Router NG2, because of their contribution to JHipster
NG2 Router or UI-Router ?
38. Route Migration: Setup
Install ui-router-ng1-to-ng2 and ui-router-ng2 NPM packages
Add uirouter.upgrade module dependency in your Angular 1 Module
Add Ng1ToNg2Module in your Angular 2 Module
let ng1module = angular.module("myApp", [uiRouter, 'ui.router.upgrade']);
@NgModule({
imports: [ BrowserModule, Ng1ToNg2Module ]
}) class SampleAppModule {}
39. Route Migration : UpgradeAdapter
In your upgrade_adapter.ts file, add these lines :
import { uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
47. Migration Feedback
A lot of new technologies and architectures
Difficult process
Some libs are poorly documented and in alpha
Only a few projects already migrated
Many different choices (Router, Module Loader)
Don’t do it yourself : Use JHipster ;-)
48. About Angular 2...
Modern approach (Component oriented)
TypeScript Features (types, ES6)
Cleaner code
Less tools (only NPM)
49. What’s next ?
Router discussions
Hot Module Loader
Ahead Of Time compilation
Finish migration for all configurations