Lecture Notes: Introduction to Angular and Course Overview

Instructor Introduction

• Instructor: Muhammad Ali
• Session Duration: Few hours
• Course Focus: Angular (basic to advanced topics)
• Project: Build and deploy an e-commerce application using Angular, Firebase, and Bootstrap 4

Course Project Overview

• Project Theme: E-commerce application for an imaginary organic shop
• **Features: **
  • Master-detail interface
  • Real-time updates of shopping cart
  • Admin functionalities for managing orders and products
  • Authentication and authorization
  • CRUD operations for products
  • Patterns and techniques common in real-world applications

Angular Overview

What is Angular?

• A framework for building client applications using HTML, CSS, JavaScript (or TypeScript)
• Angular is commonly used with TypeScript
• Main Advantage: Easier application structure, maintainability, and testing compared to vanilla JavaScript or jQuery

Why Use Angular?

• Better structure as applications grow complex
• Easier to understand and maintain than plain JavaScript patterns
• Improves testability of web applications
• Simplifies development with pre-built utilities

Angular Application Architecture

Components:

Understand the architecture of a modern web application, usually split into two main parts:

1. Frontend (Client):
   • HTML, CSS, TypeScript (mostly Angular)
   • Runs in the web browser
   • UI of the application
2. Backend (Server):
   • web servers, databases
   • Stores and processes data
   • API endpoints (HTTP services)

How to Save Data:

• Data is generally stored on the server
• Client-side data is volatile and can be cleared easily
• APIs facilitate data transactions between client and server

Setting Up Angular Development Environment

Tools Required:

• Node.js: Allows us to use npm (Node Package Manager) for package installations
• Angular CLI: Command-line interface for managing Angular projects
• Code Editor: Visual Studio Code recommended

Steps to Setup:

1. Install Node.js:
   • Download from Node.js
   • Verify installation: node --version
2. Install Angular CLI:
   • Command: npm install -g @angular/cli
   • Verify: ng --version
3. Create New Angular Project:
   • Command: ng new project-name
   • Navigate to project directory and open using VS Code
4. Run Local Development Server:
   • Command: ng serve
   • Access project at http://localhost:4200

Angular Project Structure

Key Directories and Files:

• e2e: End-to-end tests
• node_modules: Third-party libraries
• src: Main source code, further split into:
  • app: Contains components, services, and other Angular features
  • assets: Stores static files like images and icons
  • environments: Configuration settings for different environments (development/production)
• **Other Config Files: **
  • package.json: Manages project dependencies
  • tsconfig.json: Configuration for TypeScript compiler
  • angular.json: Configuration for Angular CLI
  • editorconfig: Enforces consistent coding styles among team members

Creating and Using Angular Components

Steps to Create a Component:

1. Create Component Class: Using TypeScript and add metadata using @Component decorator
2. Register Component in a Module: Typically in app.module.ts under declarations array
3. Use Component in Templates: Add custom component selector in desired HTML template

CLI Quick Generation:

• Generate component: ng generate component component-name
• Automatically updates app module with new component

Using Angular Services

Purpose of Services:

• Encapsulate business logic and data retrieval from server
• Make application components clean and focused on presentation logic

Creating Services:

1. Create Service Class: Typically a type script class, optionally with @Injectable decorator for dependency injection
2. Register Service in Module: In app.module.ts under providers array
3. Inject Service into Components: Using constructor parameters to leverage dependency injection

Angular Dependency Injection

How it Works:

• Angular creates instances of dependencies (services) and injects them into components
• Ensures single instance of each service (singleton pattern) per module

CLI Quick Generation:

• Generate service: ng generate service service-name
• Automatically includes necessary import and boilerplate code

Final Note

• Solid understanding and practice of these concepts are essential to mastering Angular
• Upcoming sections will build on these foundations with practical coding exercises and advanced topics