Angular Basics Lecture Notes

Introduction

• Presenter's Background: Trainer for years in Angular
• Objective: Learn Angular fundamentals in two hours
• Approach: Step by step, covering basics and problem-solving

Syllabus Overview

1. Introduction & Definition
2. Installation of Angular
3. Introduction to TypeScript
4. Creating Angular Project
5. Understanding Angular File Structure
6. Fundamentals of Angular
   • Decorators
   • Components
   • Modules
   • Directives
7. Angular Flow
   • Bindings
   • Expressions
   • Interpolation
8. Practical Application Development

Getting Started with Angular

What is Angular?

• Development platform, primarily for UI
• Created/Maintained by Google
• Provides a structured framework, reusable libraries, and developer tools
• Built on TypeScript

What is Node.js?

• JavaScript runtime built on Chrome’s V8 engine
• Allows JavaScript to run outside the browser

What is TypeScript?

• Superset of JavaScript
• Strongly typed programming language
• Developed by Microsoft
• Utilized for large-scale applications
• Transpiles to JavaScript

Installation

Required Components

1. VS Code IDE
2. Node.js and npm
3. Angular CLI
4. TypeScript

VS Code Installation

• Download from the official website
• Ensure to run as Administrator
• Folder Operations in VS Code:
  • Open/create a folder
  • Create files within the folder
  • Use terminal for commands

Node.js Installation

• Download from the official website (link)
• Check for versions:
  • node -v
  • npm -v

Angular CLI Installation

• Command: npm install -g @angular/cli
• Verify with: ng version

Creating Angular Project

• Command: ng new <project-name>
• Follow prompts:
  • Enable Angular Routing: Yes/No
  • Choose CSS option
• Start the application with ng serve

Angular Project Structure

• Package.json: Lists dependencies
• Tsconfig.json: TypeScript configuration
• Angular.json: Angular configurations
• Source (src) Folder: Contains the main source code

Components

• Basic Building Block: HTML (View) + TypeScript (Logic)
• Decorator: @Component
• Template URL: Connects HTML
• Selector: Used to embed a component in HTML

Modules

• Group related components
• Defined using @NgModule
• Key properties:
  • Declarations: List components
  • Bootstrap: The entry component

Understanding the Angular Flow

1. Index.html: Entry point
2. Main.ts: Bootstraps the module
3. AppModule: Defines bootstrap component
4. AppComponent: The main component

Bindings and Directives

• Two-Way Binding: [ngModel] + (ngModelChange)
• Directives:
  • Component Directives: Custom components
  • Attribute Directives: Modify behavior/appearance
  • Structural Directives: Change DOM layout (*ngFor, *ngIf)
• Expressions & Interpolation
  • Syntax: {{ expression }}

Additional Topics for Advanced Learning

• Routing
• Lazy Loading
• Dependency Injection
• Validations
• HTTP Calls
• Unit Testing
• ViewChild / ContentChild
• State Management

Conclusion

• Practical Tips:
  • Follow step-by-step approach
  • Review and troubleshoot errors from top to bottom
• Further Learning: Visit questpond.com for advanced courses and interview preparation