This document summarizes the steps needed to migrate an Angular 1 application to Angular 2. It discusses preparing for the migration by following best practices, setting up a module loader, migrating to TypeScript, converting directives to components, and using an upgrade adapter to allow Angular 1 and Angular 2 code to coexist. Key preparation steps include establishing a folder structure by feature, creating many small reusable modules, and setting up a build process. The upgrade adapter allows mixing Angular 1 and 2 components by facilitating dependency injection and component bootstrapping across the frameworks. A GitHub repository is provided for hands-on experience with these migration concepts.

1. Best episode ever
Angular 2 from the perspective of an Angular 1 developer
Peter Bouda
MAJ Digital
peter@majdigital.ch

2. Why there must be new episodes
● Shiny new JS things: ES2015, TypeScript
● Let there be React!
● Component types confusion: directives, services,
factories, providers, controllers, …

3. Preparation
● Some Angular Best Practices
● Module Loader
● TypeScript migration
● Component Directives
● Use Upgrade Adapter → Hybrid applications!

4. Preparation I: Best practices
● The Rule of 1
● Folder-by-Features Structure
● Modularity
– Many Small, Self Contained Modules
– Create an App Module
– Keep the App Module Thin
– Feature Areas are Modules
– Reusable Blocks are Modules
– Module Dependencies

5. Preparation I: Best practices

6. Preparation II: Module loader
● SystemJS, Webpack, browserify, ...
● Load modules in correct order
● Create application bundles for production
<script src="systemjs.config.js"></script>
<script>
System.import('js/app.module');
</script>

7. Preparation III: TypeScript migration
● Add TypeScript to your build process
● For example gulp babelify
● Your code is already TypeScript
● Step-by-step changes
– Use classes
– Add types
● But: Angular 2 and hybrid applications work
without TypeScript

8. Preparation IV: Component directives
● Turn directives into components
– Less legacy code
● Use „controllerAs“ and „bindsToController“
● „scope“ becomes „bindings“
– Controllers will be classes
● Turn „link“ functions into class methods
– Check which of your „link“s can be turned into controller
scope functions
– Angular 2: shadow DOM instead of transclusion

9. Preparation V: Upgrade adapter
● Mix Angular 1 and Angular 2 components
– Dependency injection works just fine!
● Create a central module with singleton
import { UpgradeAdapter } from '@angular/upgrade';
const upgradeAdapter = new UpgradeAdapter();
● Bootstrap via upgradeAdapter in app module
upgradeAdapter.bootstrap(document.documentElement,
['app']);
● Import upgradeAdapter where you need it

10. Preparation V: Upgrade adapter
● Using Angular 2 Components from Angular 1 Code
– upgradeAdapter.downgradeNg2Component
● Using Angular 1 Component Directives from Angular 2 Code
– upgradeAdapter.upgradeNg1Component
● Projecting Angular 1 Content into Angular 2 Components
– <ng-content>
● Transcluding Angular 2 Content into Angular 1 Component Directives
– <ng-transclude>
● Making Angular 1 Dependencies Injectable to Angular 2
– upgradeAdapter.upgradeNg1Provider
● Making Angular 2 Dependencies Injectable to Angular 1
– upgradeAdapter.downgradeNg2Provider

11. Hands-on!
github.com/pbouda/angular-es6-boilerplate

12. Thanks for participating!
peter@majdigital.ch