@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