Skip to content

doctorstal/angular-app

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

413 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

AngularJS CRUD application demo upgrade to Angular5, using official upgrade guide


Purpose

As stated in angular.io site:

Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.

Today and tomorrow is great, we live in today and will live in tomorrow, but AngularJS is a past. 
C'mon, new is always better!
Upgrade proces can be frustrating, but it is possible if you know how to do it and where to start from. I've done it before, but I can't show the code due to it's a licensed product, so I'll migrate this great academical project instead.
I'll try to give this project hour or two per day to fully upgrade it's client side to Angular. Let's see, how long it will take.
**Main goal is to keep app fully functional on all stages of development.**

Steps

  1. Module loader
    • guide will be polite and let you choose from SystemJS, Webpack or Browserify, but hey, Angular and angular-cli is fully on Webpack, so other options is just for an illusion of choise.
  2. TypeScript (We are here. And also we are still at step 1, as we'll move every build step to webpack piece by piece)
    • rename *.js to *.ts;
    • add imports;
    • TS classes should replace every function that possible to replace with class. It realy simplifies further steps;
  3. Component directives
    • thit step could be skipped until needed. Only directives could be upgraded, but you can do each only when you want to.
  4. Bootstraping hybrid application
    • here you'll need to learn some tricks to make everything work together
  5. Upgrade and temprorary downgrade everything
    • this is best part. You pulling it up and down, trying not to brak things and not to set everything on fire, when AoT is enabled. It's fun. Just trust me.
  6. Upgrade your dependencies
    • worst part of upgrade process is that on some stage you are required to use ng2 versions of everything.
  7. Remove hybrid app bootstrap.
  8. Celebrate!

Current step(s)

Now I am migrating build to webpack. But not rapidly. It allows me to always keep a project alive. As all good rules, this one also has an exception. I've rapidly updated Karma to newer version (old was failing on my non-english windows os due to known issue). But back to webpack migration. Webpack will not pack .js files - only .ts. Thus I can easily split grunt and webpack responsibilities. Check out how all modules is getting imported into app.ts (our entry point). Each angularjs module has a name and we need that name in dependency list. So why don't we import a module and use its name property in dependency list instead of string? It also makes things more DRY, as you do not need to copy-paste that module names.

About

Upgrade AngularJS to Angular5 example

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • TypeScript 67.8%
  • JavaScript 17.9%
  • HTML 9.2%
  • CSS 5.1%