$opt_dummy_attribute

Optimizely-Generated Audience for Backwards Compatibility

migrating-to-angular

## Contents
1. Introduction `4`
    1. AngularJS 1 and Angular 2+ `4`
    1. Migrate vs.Upgrade `5`
2. Angular 1 App “ng1-dinos”  `6`
    1. Dependencies `6`
    1. Install and Run “ng1-dinos” `6`
3. Introducing Angular 2 App “ng2-dinos” `8`
    1. Dependencies `8`
    1. Initialize ng2-dinos `9`
    1. Linting and StyleGuide `9`
4. Customizing Our Angular 2 Project for Migration `11`
    1. Bootstrap CSS `11`
    1. Third Party Libraries `12`
    1. Global SCSS `13`
    1. Update App File Structure `15`
5. Angular 2 Root App Component `16`
    1. App Component Template `17`
    1. App Component Styles `18`
    1. App Component TypeScript `18`
6. Angular 2 Header Component `20`
    1. Add Header Element to App Component Template `21`
    1. Header Component Template `22`
    1. Header Component Styles `22`
7. Angular 2 Component Interaction `25`
    1. Header Component TypeScript `25`
    1. Header Communication with App Component `26`
8. Angular 2 Observables and DOM Properties `29`
    1. Add Observable to App Component TypeScript `29`
    1. Add DOM Property to App Component Template `31`
9. Angular 2 Footer Component `33`
    1. Footer Component TypeScript `33`
    1. Footer Component Template `34`
    1. Footer Component Styles `34`
    1. Add Footer to App Component Template `34`
10. Migrating Angular 2 Pages `36`
    1. Create Home, About, and 404 Page Components `36`
    1. Add Title Provider to App Module `36`
    1. Add Title to Page Components `37`
    1. Home Component Template `39`
    1. About Component Template `39`
    1. 404 Component Template `40`
11. Routing in Angular 2 `41`
    1. Create a Routing Module `41`
    1. Import Routing Module in App Module `43`
    1. Display Routed Components `43`
    1. Route Navigation `44`
    1. Router Events `45`
    1. Auto-close Menu in Header Component `45`
12. Calling an API in Angular 2 `47`
    1. Dinosaur API Data Model `47`
    1. Add HTTP Client Module to App Module `48`
    1. Get API Data with Dinos Service `49`
    1. Provide the Dinos Service in App Module `50`
    1. Use the Dinos Service in Home Component `51`
    1. Display a List of Dinosaurs `52`
13. Display Dino Cards `55`
    1. Dino Card Component TypeScript `55`
    1. Dino Card Component Template `56`
    1. Display Dino Card in Home Component `56`
14. Migrating Angular 1 Filtering to Angular 2 `58`
    1. No Filter or OrderBy Pipes `58`
    1. Create a Filter Service `59`
    1. Use Angular 2 Filter Service to Search `60`
        1. Filter in Home Component TypeScript `60`
        1. Filter in Home Component Template `62`
        1. Filter in Home Component Styles `63`
15. Migrating Detail Component to Angular 2 `65`
    1. Routing with Parameters `65`
    1. Linking to Routes with Parameters `66`
16. Calling the API for Data by ID `67`
    1. Create a Dino Details Model `67`
    1. Add HTTP Observable to Get Dinosaur by ID `68`
    1. Using API Data in Detail Component `69`
        1. Detail Component TypeScript `69`
        1. Detail Component Template `70`
        1. Detail Component Styles `72`
17. Loading State for API Calls `74`
    1. Loading Image Asset `74`
    1. Loading Component TypeScript `74`
    1. Add Loading Component to App Module `75`
    1. Add Loading Component to Home Component `76`
        1. Implement Loading Functionality in Home Component TypeScript `76`
        1. Implement Loading Functionality in Home Component Template `77`
    1. Add Loading Component to Detail Component `79`
        1. Implement Loading Functionality in Detail Component TypeScript `79`
        1. Implement Loading Functionality in Detail Component Template `80`
        1. Remove “Loading. . . ” Text from Index HTML `80`
18. Completed Migration `82`
    1. Refactoring Suggestions `82`
19. Bonus: Authenticate an Angular App and Node API with Auth0 `83`
    1. Features `84`
    1. Sign Up for Auth0 `85`
    1. Set Up a Client App `85`
    1. Set Up an API `85`
    1. Dependencies and Setup `85`
    1. Authentication Service `87`
    1. Making Authenticated API Requests `90`
    1. Final Touches: Route Guard and Profile Page `90`
    1. More Resources `91`
20. Conclusion `92`


Are you an Angular developer who hasn't had a practical opportunity to really dig into Angular v2+ yet? Do you have AngularJS 1.x applications in development, production, or maintenance and are curious how you would tackle migrating them to Angular 2+? If you have experience with AngularJS and are looking for a way to apply your previous knowledge while learning the intricacies of Angular, then this tutorial is for you.

Angular

eBook Migration an AngularJS App

migrating-to-angular2

#### Releases
- Angular application updated to Angular v4.3, including updates to the Angular CLI and HttpClient implementation.

Migrating an AngularJS App to Angular

Releases

Written By

Kim Maida

Spread the word: