Migration from AngularJS to Angulat 4+

Oleg Rovenskyi

About Project

1. POC

2. Angular 1.4.8

3. POC (2 years ago)

Project Steck (POC)

Front-End

1. Angular 1.4.8

2. Gulp

3. d3js

4. css

5. mvn

6. npm with bower

Back-End

1. JAVA

2. orientdb, elasticsearch, postgresql and neo4j base

New version

1. Angular 4+

2. Typescript

3. RxJS

4. Webpack

5. d3js

6. tslint

7. sass

8. mvn

POC

Minus:

1. Old version AngularJS (v1.4.8)

2. No component

3. Several directives for all project

4. Logic in controller

5. Using $scope and watchers

6. npm with bower

Plus:

1. Services for $resource

2. Routing in one file

3. Using resolve for data in state

Examples

Old project structure

New project structure

Examples

Examples

Webpack

1. Tasks for style, fonts and libraries

2. Proxy for request

3. Aliase

4. BASE_URL

BASE_URL

package.json

webpack.common.js

index.html in dist folder

mvn

pom.xml // config for run project

d3js

npm install --save d3          // https://www.npmjs.com/package/d3
npm install --save @types/d3   // https://www.npmjs.com/package/@types/d3

in project 3.5.17

but now

4.11.0

And typing doesn't helps always

d3js select element

Old version

New version

d3js graph example

d3js graph example

d3js graph example

d3js graph example

package-lock.json

d3js

Surprise

Angular 4+

Using:

1. types and enum

2. Observables

3. Components and Modules

4. Services

Angular 4+

Angular 4+

enum

Angular 4+

Be careful!Be careful!

We should get router data in constructor

Angular 4+

Observable and Subscription

Angular 4+

Observable and Subject or BehaviorSubject