Preparing for Migration from AngularJS (1.x) to Angular (2+)

Migrating from Angular 1 to Angular 2 doesn't have to be a headache. This course teaches you how to prepare and migrate your AngularJS (version 1.x) applications to Angular (version 2 and above) using the easiest and lowest-risk methods available.
Course info
Rating
(75)
Level
Intermediate
Updated
Jun 1, 2016
Duration
2h 53m
Table of contents
Course Overview
Introduction
Preparing Your Code
Adding 1.5 Components
Preparing Directives and Bootstrapping
Adding TypeScript and ES6
Using ES6
Switching to Classes
Description
Course info
Rating
(75)
Level
Intermediate
Updated
Jun 1, 2016
Duration
2h 53m
Description

Angular is here, and it's amazing. You'd like to get your Angular 1 applications moved over to Angular 2, but for many of those applications, a full rewrite isn't a possibility. So migrating slowly, piece by piece, is the right answer. This course will walk you through that process, showing you how to migrate in a way that minimizes risk, and lets you migrate while continuing to maintain your applications. First, you'll learn how to prepare your code and follow the Style Guide. Next, you'll prepare tools and processes such as Typescript and ES6. Finally, you'll learn how to add Angular 2 to your application (including installing ng2 and and introducing jpsm to the build) and learn about migration--how to choose what migrates, and how to actually migrate services and components. By the end of this course, you'll be able to incorporate Angular 2 into your applications and make the transition with ease.

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
Hey, everybody. I'm Joe Eames and welcome to my course, Preparing for and Migrating Applications to Angular 2. I'm a developer and conference organizer and I'm very excited to present this course to you. Angular 2 is here and it's amazing and it's time to get your Angular 1 projects migrated to Angular 2. In this course, we're going to learn how to prepare our Angular 1 applications for migration to Angular 2. I'll lay out a complete plan to prepare for migration which minimizes risk and makes it simple and safe to get your code ready for Angular 2. The major topics we're going to cover are 1. 5 components and how they get us closer to Angular 2, Bootstrapping, TypeScript and ES6, and using classes in Angular 1. By the time we're through, you'll have all the knowledge you need to get your application ready for migration to Angular 2. Before starting the course, you should be familiar with JavaScript and Angular. I hope you'll join me on this journey to learn Angular 2 migration with the Preparing for and Migrating Applications to Angular 2 course at Pluralsight.

Adding 1.5 Components
In this module we are going to go through steps 3 and 4 of our migration plan. This module focuses on components, a new feature of Angular 1. 5. It's important not to confuse this with Angular 2 components, which of course are different. These are Angular 1 components. The two steps we'll cover are step 3, doing all new development with components, and step 4, switching controllers to components. This will likely involve a lot of coding work in your project since controllers are extremely common and quite possibly where most of your code lives. So converting them to components could take you quite a while if you convert everything.

Preparing Directives and Bootstrapping
In this module we're going to go through the next three steps of our migration plan. These steps don't involve using any additional tools in our Angular 1 code. Again, we won't be dealing with Angular 2 at all; we'll just be getting ready for it. The steps we're covering are step 5, remove incompatible features from directives. There are a few things we can do with directives that we need to get rid of, if we intend to migrate those directives to Angular 2. Step 6. Switch component directives to components. Now that we've switched our controllers to our components, we'll want to do the same thing with any component directives that we have. And finally, step 7, which is to implement manual Bootstrapping. This is a critical step that cannot be skipped. In order to migrate to Angular 2 we must be using manual Bootstrapping. This is everything we're going to do in this module of the course.

Adding TypeScript and ES6
In this module we're going to go through step 8 of our migration plan which is to add TypeScript and a build to our project. TypeScript is a very important feature of Angular 2 and it includes ECMAScript 6 within it so we're kind of getting a two-for-one when we implement TypeScript, but even if we don't care for TypeScript or ES6, we still need to have them implemented in order to migrate to Angular 2 since Angular 2 is much easier to write with TypeScript.

Using ES6
In this module, we're going to cover step 9, which is to start using ES6. We're not going to just talk about how to do that in our project; we'll actually spend time getting to know some of the features in ES6 that we either need to know when we migrate to Angular 2 or features that will be immediately valuable to us in our Angular 1 coding.

Switching to Classes
In this section we are going to cover the final two preparation steps of our plan. This involves switching both controllers and services to ES6 classes. In the case of controllers, the payoff for right now is fairly minimal, but it will help later on. For services, in general this makes our code even cleaner and easier to read than before, so this is something we will likely find immediately beneficial regardless of our migration timeline.