Upload
ran-wahle
View
153
Download
3
Embed Size (px)
Citation preview
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 [email protected]@ranwahleBlog: https://blogs.microsoft.co.il/ranw