Simply Learn: Angular Routing Lecture Notes

Introduction

• Session covers Angular Routing.
• Previous videos in Angular series recommended.
• Encouragement to subscribe to channel.

Basics of Routing

• URL changes indicate navigation through application.
• Routing is a mechanism used to navigate through a web application.
• Essential for creating Single-Page Applications (SPAs).
  • SPAs load once, with dynamic content updates.
  • Examples: Google, Facebook, Twitter, Gmail.
• Benefits of SPAs: Improved user experience, faster content loading.

Angular Routing

• Angular routing configures route and component.
• Allows navigation and content loading without reloading the page.

Hands-On Demo: Objective and Setup

• Navigate to home and login pages using routing.
• Steps:
  1. Open index.html and ensure base tag is added (href set to '/').
  2. Check if app-routing.module.ts is imported in app.module.ts.

Creating Navbar

• Code explained in previous video (Angular Bootstrap).
• Create navbar component using CLI: ng-gc navbar.
• Paste navbar code into the component.
• Update app.component.html to include navbar HTML tag.
• Verify display by running the application.

Creating Components for Login and Home Pages

• Use Bootstrap templates for UI design.
• Create components using CLI:
  • ng-gc login for login component.
  • ng-gc home for home component.
• Code for components pasted from templates.
• Assets added to project for logos and multimedia.

Configuring Routes

• Use app-routing.module.ts for route configuration.
• Import required modules and create paths for components:
  • Example paths: /login and /home.
• Routes connect paths to respective components (login and home).

Linking Routes to Navbar

• Use nav and anchor tags to link routes.
• Utilize routerLink and routerLinkActive directives.
  • routerLink: Holds path to page.
  • routerLinkActive: Specifies active CSS classes.

Displaying Components

• Use router-outlet directive to specify component display location in app.component.html.

Execution and Verification

• Navigate to pages using navbar.
• Verify routes and content display in the browser.
• URL changes indicate successful routing.

Conclusion

• Overview of Angular routing process.
• Encouragement to review previous content for clarity.
• Invitation to leave comments or questions.
• Stay tuned for more videos on Angular series.