Angular 2

This post is curated content to migrate large Angular 1 to Angular 2.
If minmum of 10k LoC sounds large to you, and has no time to rewrite the entire application, this blog may save you time. Along the way, we will see concepts introduced in Angular 2 rebranded Angular 4.x.

Table of content

  • Introduction
  • Retirements
  • New Concepts
  • ES6, ES7 and TypeScript
  • Unit Testing
  • Components
  • Directives
  • Filters
  • Services
  • Models
  • Controllers
  • Routes
  • Scope
  • Templates
  • Performance
  • Migration
    • $scope
    • ControllerAs
    • One-way data binding
  • Mobile Strategy
  • Server Side Rendering
  • Deployments
  • Performance tuning
  • Curated Content

Introduction

Angular 2 offers flexibility, simplicity and better performance advantages over Angular 1.
Four things need to interoperate between Angular 1 and Angular 2 source:

  • Dependency injection
    • Angular 1: single root injector
    • Angular 2: hierarchical injector
    • "Upgrading services one at a time implies that the two injectors need to be able to provide instances from each other"
      • Injector for NG 1 should be able to provide Service instance
      • Injector for NG 2 should be able to provide Service instance
    • "ng-upgrade library makes Angular 1 injectables available in Angular 2"
      • Meaning: "Angular 1 application services can now be injected anywhere in Angular 2 components or services"
  • Component nesting
    • In both versions of Angular -> Component is a directive which has its own template
    • "ng-upgrade allows to wrap Angular 1 components in a facade so that they can be used in an Angular 2 component"
    • "Conversely, you can wrap Angular 2 components to be used in Angular 1"
    • "This will fully work with transclusion in Angular 1 and its analog of content-projection in Angular 2"
    • What becomes directives without templates?
  • Transclusion
  • Change detection

Retirements

  • DDO (Directive Definition Object)
  • Controllers
  • $scope
    • $scope dependencies to be re-imagined
    • Scrope message passing via: $scope.$on, $scope.$emit, $scope.broadcast
    • $scope.$watch, $scope.$destroy, $scope.$apply
  • angular.module
  • jqLite
  • Bidirectional binding
  • $scope.$watch

Note: source

Migration from Angularjs 1 to Angular 2

Tutorials to write Angular 2 applications

What is a Component

Migration to Angular 2 - introduction

...They decided(the single worst strategic mistake that any software company can make) to rewrite the code from scratch

There are two mainstream ways to upgrade to Angular 2: Rewrite or Progressively.

  • The obvious, dangerous, way is to rewrite the application in Angular 2. Sounds familiar?
  • Progressively by using ng-update and hack everything to make backward compatible
  • Progressively by identifying similarities in both frameworks, and write new code based on new code structure. new

Where to start?

  • Services
  • Depending less and less on Everything Scope.
  • Restyle Directives to make them look like Angular 2 Components
  • Decouple code from angular.module
  • Jump Tests first + Move all Controllers to Components and All directives to Components.
  • Remove $watch from your codebase
  • Surviving components change with $watch-es StackOverflow QA

Migration to Angular 2 - Step by step

Writing Angular 2 in ES5

Targetting web, native mobile and desktop

Coding techniques

Performance and memory leaks