Learn - Angular 11

This repository guides you through the process of building and running an Angular 11 application. It includes detailed instructions on setting up the environment, running the server, and adding new features like components and services. The project utilizes Bootstrap for styling and focuses on key Angular features like routing, CRUD operations, and forms.

Instructions to run the application

1. Clone the Repository: Start by cloning the repo to your local machine to get all the necessary files.
2. Node Version: Ensure you're using the correct version of Node.js:
   • Switch to Node v14.21.3 using nvm install v14.21.3 followed by nvm use v14.21.3.
3. Install Dependencies: Run npm install to install all required dependencies.
4. Launch the Application: Use npx ng serve --open to start the development server and open the application in your web browser.

Frequently used development commands

• Start the Server: ng serve --open to run and automatically open the app.
• Generate Components: ng generate component component-name to add new components.
• Build the Project: ng build to compile the application into an output directory.
• Run Unit Tests: ng test with Karma to execute unit tests.
• Run End-to-End Tests: ng e2e with Protractor for comprehensive testing.

Key Learning Concepts

• Bootstrap Integration: Learn to incorporate Bootstrap for responsive design.
• Angular Routing: Understand how to manage navigation within the app.
• Component Creation: Build and connect various components like Login, Signup, and CRUD pages.
• CRUD Operations: Implement Create, Read, Update, Delete operations using HTTP methods.
  • GET GET:params POST
  • PUT PATCH DELETE
• Forms and Validation: Explore both template-driven and reactive forms along with field validation techniques.
  • Template forms
  • Reactive Forms (used this in project)
  • Validation
• Handling CORS: Resolve Cross-Origin Resource Sharing issues with proxy configuration.
  • Error where? While implemnetating CRUD and Forms, wwhen connecting with Auth API.
  • CORs error fix.
• Component Interaction: Use Angular's @Input to pass data between parent and child components.
• Lifecycle Hooks: Discover how to utilize Angular lifecycle hooks for managing component states.
• Piping: Apply pipes in Angular for transforming displayed values.
• Deployment: Steps to deploy the Angular app using GitHub Pages.

Roadmap: Must know concepts

• Angular architecture
• Interpolation
• Binding
  • Property Binding
  • Class Binding
  • Style Binding
  • Event Binding
  • Two way Binding
• Structural Directives
  • ngIf
  • ngSwitch
  • ngFor
• Pipes
• Dependancy Injections
  • Services
  • HTTP Mechanism and Requests
• Routing
  • Wildcard route
  • Redirecting routes
  • Route Params
  • Optional Route Params