Migrating an AngularJS App to Angular

Contents

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