Migrating Applications from AngularJS to Angular

AngularJS was the most widely used front-end framework of its time, but its time has gone. This course will teach you to migrate your AngularJS applications to Angular with minimal fuss and minimal risk.
Course info
Rating
(13)
Level
Intermediate
Updated
Dec 5, 2017
Duration
5h 4m
Table of contents
Course Overview
Adding Angular to an AngularJS Application
Basic Angular Migration
Migrating Page-level Components
Advanced Service Migration
Transclusion and Content Projection Migration
Testing While Migrating
Taking Hybrid Angular Applications to Production
Routing Migration
Description
Course info
Rating
(13)
Level
Intermediate
Updated
Dec 5, 2017
Duration
5h 4m
Description

AngularJS was an incredibly popular framework, but it has become somewhat outdated with the advent of Angular. In this course, Migrating Applications from AngularJS to Angular, you'll learn how to maximize their lifetimes by migrating your AngularJS applications to Angular. First, you'll discover how to run a hybrid application with both frameworks running side by side. Then, you'll explore how to migrate pieces of the application slowly and safely from AngularJS to Angular with little to no risk. Finally, you'll delve into migrating from the old AngularJS router to the new Angular router, one route at a time. By the end of this course, you'll be prepared to efficiently migrate applications of any size from AngularJS to Angular.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Unit Testing in Angular
Beginner
3h 20m
22 May 2018
Angular: The Big Picture
Beginner
1h 7m
13 Dec 2017
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi there. I'm Joe Eames, and welcome to my course, Migrating Applications from AngularJS to Angular. I'm a Google developer expert, and have been working with AngularJS since 2010 and Angular since it was in alpha. Angular is an amazing, modern, highly performant framework, and if you haven't already, then it's time to migrate your AngularJS applications. In this course, we are going to learn exactly how to migrate an application going step by step to minimize risk and maximize the ease and power of migrating to Angular. Some of the things we will cover are creating a hybrid application that runs both Angular and AngularJS, how to choose which pieces of your application to migrate first, how to migrate your routing setup, and best practices around a complete migration. By the time we're through, you'll have all the knowledge you need to migrate your applications to Angular. Before starting the course, you should be familiar with JavaScript, AngularJS and Angular. I hope you'll join me on this journey to learn Angular migration with the migrating applications from AngularJS to Angular course, at Pluralsight.

Migrating Page-level Components
In this section of the course, we're going to be looking at migrating page-level components, which is the recommended way to begin migrating your application is to start with a single page, start with the top-level components, the page-level components, migrate those and then migrate other pieces as you go. We're going to start by looking at how to actually migrate a page-level component, then we'll look at how to upgrade AngularJS services. That means, a built-in Angular 1 service, we're going to make it available to Angular 2, but we're not going to, of course, be rewriting it because it is a built-in Angular 1 service. We're also going to look at how to upgrade custom services. So that's a service that we have written that's still an Angular 1 service. We're not going to rewrite it. We're just going to upgrade it so that it's available to Angular 2. We're going to look at how to migrate third-party services, and then after that, we'll look at how to upgrade commonly used components. These are components that might be used in a lot of places and we'll look at a very simple example of this.

Transclusion and Content Projection Migration
In this section, we're going to be looking at migrating components that use transclusion or content projection. They're the same concept, although it was called transclusion in Angular 1 and content projection in Angular 2+. We'll start off by migrating a component that uses transclusion into a component that uses content projection. Then we'll look at how to understand bindings and inputs while we're migrating because we'll have to deal with that a little bit. And then we'll look at variable coercion, which is the process of dealing with how types get converted when using input variables or bindings, and we'll see how Angular 1 handles it versus how Angular 2 handles it, which matters as we're migrating our components.

Testing While Migrating
In this section, we are going to cover how to keep our tests up to date while migrating from Angular 1 to Angular 2. We're going to start off by looking at our Angular JS tests. We have completely broken our tests with our new webpack build. And so just to run the existing tests that we've already got for our Angular 1 files, we're going to have to make some changes and fixes to our Karma configuration. After we've got our Angular JS tests running, we are going to get our Angular 2 tests running. Of the test suite that we already had for our application, we have migrated some of the pieces to Angular 2. And so in that part of the course, we're going to update those tests to Angular 2 tests, and we are going to get karma to test those as well.

Taking Hybrid Angular Applications to Production
In this section of our course, we are going to prepare our application to go to production. Now we're not actually going to be deploying it to production, but we are going to build it as if it was going to be deployed for production. We're going to start off by creating an AOT build. AOT means ahead-of-time compiler. The ahead-of-time compiler builds our Angular 2 code down into a smaller version so that we don't need as much framework code to be deployed, and it makes our app runs faster, and it also means that the delivery size is smaller. Of course, we do all the typical things when we create a production build, like minify our code and such, but the AOT is a very important, very big piece of this. After that, we're going to look at adding our Angular JS, or Angular 1, code to our build. We're going to be doing our build a little bit differently than you would expect. We're going to create 2 different webpack config files, 1 for the Angular 2 code and 1 for the Angular 1 code and produce separate bundles with each. Ultimately those bundles will go together and each be a part of the production build for our application, but they will be built separately. And then finally, we're going to refactor some of our code based on this new production build and how it works differently than our development build.