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.
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.
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.
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.