Angular 2 uses components where we used to have directives. We have already migrated our directives to components. Now is the time to turn our Angular 1 components into Angular 2 components.
- [Narrator] Hi and welcome to video 4.2,…where we are about to use Angular 2 components…where we used to have Angular 1 components in our code.…We are specifically going to upgrade…our components code to Angular 2 first.…Then update our HTML templates to the Angular 2 syntax.…Both changes will allow us to learn…how events and components properties work in Angular 2.…Let's start by upgrading our forecast component.…The first thing to do is add the following line…at the top of our file.…
That way we specify that we are going to create a component…that has input attributes.…Then we create a class,…and we had two component attributes…with the @input annotation,…which are basically similar to the bindings…we add in Angular 1.…Note that if you want to use a different attribute name…in your HTML template,…you can specify it has a parameter in the input annotation,…just like this.…
But we don't need to do that here,…so let's remove it.…Now let's add the component annotation to our class.…This is very similar to what we declare…
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