From 1.x to 2.0 Ran Wahle

Agenda

A little about Angular 2.0 A little chat application with Angular 1.x Reorganizing modules Using Module loader Switching to typescript Using angular 1.5 components Using webpack as our module loader Make hybrid application with ng-2 Gradually swithing to ng-2

A little about myself

Full-stack developer Enthusiastic front-end developer Poor UI designer Participated in writing Developing an Angular 2 Edge

A little about Angular 2.0

A whole new rewrite No $scope (and no $scope.$apply/$applyAsync) A whole new change detection system No modules (not in the Angular 1.x way) Supports new standards

A little about rc-5

NgModule decorator AoT Compilation

What is our goal?

Gradually migrate Angular 1.x application During the process, enjoy Angular 2.0 capabilities

in our Angular 1.x application

What do we need?

Prepare our application Blend Angular 2.0 in Gradually upgrade

A little chat application from 2012

One module Every service, controller, directive, component and filter will be

registered to it. This one module is bootstraped to the document Uses socket.io for chating Needs to be migrated gradually (well, it did if it was big)

What have we done already

Used controllerAs syntax No function or field is declared directly on the scope

Restructuring modules

Every controller / directive / service will now have its own module Every module will have its own dependencies The main module depend on other modules

Load modules with AMD

Remove all script tags from the application’s HTML page Declare JS dependencies directly in JS files

Switch to TypeScript

Why? Actually we can rename our ‘js’ files to ‘ts’

and correct compiler errors in case there are All our controllers / components/ services can be switched to classes We may reduce the prototype

Using Angular 1.5 component

Why? This is the closest we can get to Angular 2.0 component Controller that is bound to an HTML page can be easily replaced with a

component and template Template directive, can be replaced even easier

Using WebPack

It is not necessary for the migration, but usefull nevertheless Our TS code can use “import“ statements On our tsConfig.json file we’ll u se “commonJs” as our module loader. Webpack will pack all files by the “require” statement transpiled from

the “import” statement.

Adding Angular 2.0 into the mix

Replace our bootstrap with UpgradeAdapeter Upgrade ng-1 service to an injectable ng-2 service Making the upgraded service available on ng-1

Upgrading components

Add the @Component decorator. Change the template to match ng2 data binding Export the component class. On the bootstraping TS file, downgrade it to ng-1

Summary

We have started with Angular 1.x code We have changed it structure Angular 1.x code can look very similar to ng-2 Migrating the code is not so difficult task Also, we can work with both ng-1 and ng-2 modules

side by side at the same application

Thank you

Ran Wahleran.wahle@gmail.clm@ranwahleBlog: https://blogs.microsoft.co.il/ranw