Using Angular 2 with TypeScript requires some specific development environment configuration. We will discuss what exactly we need.
What SystemJS does is that it replaces the old script tags in our HTML using a dynamic import, export system so that you can add new script to your application without having to update your HTML code. This short example is how we configure SystemJS to use /app, has baseURL for all scripts and define main.js as the main script to load for our application. Now let's install SystemJS.
As you can see on the official Angular 2 website, Angular 2 does not require TypeScript or SystemJS, yet most of the documentation produced by the Angular team so far uses TypeScript and SystemJS, which makes it very difficult to not use both of those technologies. Let's open a terminal console in our project and install SystemJS. And since we are here, let's install TypeScript as well.
Now, since Angular 1 doesn't come with built-in TypeScript type definitions, let's install those by first installing TSD, TypeScript Definition Manager. We can then use TSD to install the type definitions for Angular 1. This we had to type which directory to reach the project and install a number of .d.ts files under it. Now we can go back to the IDE and remove the scripts that used to be included automatically by our built system.
And now I had a script tag that's going to use SystemJS instead. And obviously we have to load SystemJS itself as well. Now let's complete our TypeScript configuration. First, we have to create a tsconfig.json file in our scripts folder. And then we can just copy, paste the config that is suggested by the Angular team. As you can see, that config basically specifies that we want to compile down to ES5 code using SystemJS as a module loader.
Here is what those changes look like for one of our controllers. What we do is remove the reference to the Angular module and just use a function name with our controller name instead. You will have to do this for all of your Angular files. Now the final step is to bind everything back together using SystemJS and TypeScript. First, we create a file called app.module.ts, and then we add the following contents to it.
In the next section, we will get our hands dirty and dive more into Angular code as we see how to get our Angular 1.x applicatoin ready for the migration to Angular 2.
Angular 2 is a technical and conceptual overhaul of its hugely popular predecessor, AngularJS. To stay ahead, developers who have built and maintained projects with AngularJS need to be able to transition them to Angular 2. Migrating to Angular 2 demonstrates how to create and execute an effective migration plan for Angular applications. It opens with an introduction to the major changes and additions brought by the new framework. Then author Alain Chautard reviews a plan to migrate a sample weather application from its original Angular 1.x codebase.
Learn how to migrate blocks of code incrementally, as opposed to porting code in bulk, and get a brief introduction to TypeScript and ECMAScript 6. Along the way, Alain shows you how to gradually deprecate $scope, upgrade services, work with the component router, transition forms, and more.
By the end of this course, you'll be up to speed with the fundamental building blocks of Angular 2 development, and fully capable (and confident) transitioning existing Angular 1.x projects to the new environment, ready to explore everything that Angular 2 has to offer.
- What's new in Angular 2?
- Migrating incrementally
- What are TypeScript and ES6?
- Cleaning up $scopes
- Making components
- Using TypeScript classes
- Upgrading 1.x services, components, and controllers
- Best practices for Angular 2