Post on 20-Jun-2020
transcript
@elanathellama
Migrating from AngularJS to Angular
Elana Olson@elanathellama
@elanathellama@elanathellama
Elana Olson
● Studying software engineering● Traveling around the world
Developer Relations Intern
@elanathellama@elanathellama
Angular is the name for the Angular of today and tomorrow.
AngularJS is the name for all 1.x versions of Angular.
@elanathellama
@elanathellama
ngMigration AssistantFinding the right migration approach for your app
@elanathellama@elanathellama
https://github.com/angular/angular-phonecat/tree/step-14
@elanathellama
Criteria
\ * Complexity
* App size and amount of files/folders
* AngularJS patterns
* Preparation necessary for migration
@elanathellama
AngularJS Patterns● JavaScript
● $rootScope
● $compile
● Controllers
● Component Directives
@elanathellama
App Statistics
\ * Complexity:
2 controllers,
1 AngularJS component,
6 JavaScript files,
0 TypeScript files
* App size: 18224 lines of code
* File count: 20 total files, 11 relevant files
@elanathellama
Recommendation
\Please follow these preparation steps in the files
identified before migrating with ngUpgrade.
* App contains $rootScope, refactor into services
* App contains 6 JavaScript files, convert to TypeScript
* App contains 2 controllers, convert to AngularJS
component directives
@elanathellama
Files to Prepare
\../ajs-app/src/app/docs.js
→ Patterns found:
$rootScope,
JavaScript,
controller
@elanathellama
Desktop AppGreater accessibility for all
@elanathellama
ng-src="{{mv.url}}" [src]="mv.url"
Automated Template ConversionSyntactically transform AngularJS html templates to Angular
@elanathellama
Enhanced Analysis
AST parsing improves accuracy
of analysis with enhanced
search criteria and
recommendation reporting.
@elanathellama
@elanathellama
What’s next for ngMigration Assistant?You tell us!
@elanathellama
Angular is fast, simple, and built on the modern web
@elanathellama
TypeScriptComponents
@elanathellama@elanathellama
Components● Standardized● Simpler● Rule of One● Component directives
Components TypeScript
@elanathellama
@elanathellama
Transitioning to Components
Markers on DOM elements that are compiled to manipulate HTML elements and its children.
Directive →
Special directives that define their own templates, controllers, and i/o bindings.
Defines a class associated with an HTML template that defines a view to be displayed in the UI.
Component Directive → Component
@elanathellama@elanathellama
● *.js → *.ts ● Enhanced error reporting● Reduced runtime errors● Faster time to market
TypeScript
Components TypeScript
@elanathellama
ngMigration ForumA community hub for learning about migrating
@elanathellama
Incremental Migration
● Hybrid Application
● Convert old AngularJS features
● Add new Angular features
● Large apps
@elanathellama
@elanathellama
Big Bang Migration
● Fresh start
● Begin using Angular now
● Try new techniques
● Small apps
@elanathellama
@elanathellama@elanathellama
https://github.com/angular/ngMigration-Forum
Thank You!Elana Olson@elanathellama