Section 1
1. Introduction to Angular
Angular is a powerful, open-source, component-based framework for building single-page
applications (SPAs). It is written in TypeScript and maintained by Google.
● Framework: It's a full-fledged framework, not just a library. It provides a complete solution
for building large-scale applications, including tools for routing, state management, and
HTTP requests.
● TypeScript: Angular is built with TypeScript, a superset of JavaScript that adds static
typing. This helps in catching errors early during development and makes the code more
robust and maintainable.
● Single-Page Application (SPA): In an SPA, the entire application loads on a single
HTML page ([Link]). As the user navigates, Angular dynamically rewrites the content
on the current page instead of loading new pages from the server. This results in a faster,
more responsive, and app-like user experience.
2. AngularJS vs Angular
"AngularJS" refers to version 1.x. "Angular" refers to version 2 and all subsequent versions (v4,
v5, v12, etc.). They are distinctly different frameworks.
Feature AngularJS (v1) Angular (v2+)
Language JavaScript (ES5) TypeScript (a superset of
JavaScript)
Architecture MVC (Model-View-Controller) / Component-Based
MVVM Architecture
Mobile Not designed for mobile; Mobile-first design, built for
solutions like Ionic 1 were used. performance.
Performance Slower, due to two-way data Much faster, uses one-way
binding and a complex digest data binding by default and a
cycle. more efficient change detection
system.
CLI No official CLI. Angular CLI (a powerful
command-line tool).
Data Binding Two-way data binding ($scope) One-way data binding by
was complex and led to default. Two-way binding is
performance issues. explicit [(ngModel)].
Ecosystem Had $scope, controllers, Uses Components and
directives. Directives. Controllers and
$scope are gone.
3. MVC Framework
MVC stands for Model-View-Controller. It is a software design pattern used for organizing
code. AngularJS (v1) was heavily based on this pattern.
● Model: This is the data and business logic of the application. It manages the state of the
application (e.g., a list of users, the content of a shopping cart). In AngularJS, this was
often represented by JavaScript objects.
● View: This is the User Interface (UI) that the user sees. It is the visual representation of
the Model (e.g., the HTML page that displays the list of users). In AngularJS, this was the
HTML.
● Controller: This acts as the intermediary between the Model and the View. It takes user
input from the View (e.g., a button click), processes it (e.g., tells the Model to add a new
user), and updates the View to reflect the changes in the Model. In AngularJS, this was
the controller function.
Angular (v2+) does not use MVC. It uses a Component-Based Architecture.
4. Component-Based Model
Modern Angular uses a Component-Based Architecture, which is a more advanced and
modular approach than MVC.
● What is a Component? A component is a self-contained, reusable building block for your
UI. It controls a patch of the screen (the View) and contains the logic (the Class) and
styles (the CSS) for that patch.
● Analogy: Think of a webpage as a set of Lego bricks. The Header is one component, the
Sidebar is another, and the Main Content is a third. Each component is independent,
manages its own data and logic, and can be easily reused.
● Structure:
1. View (Template): The HTML (.html) file that defines the UI. 2S. Logic (Class): The
TypeScript (.ts) file that contains the data (properties) and logic (methods) for the
view.
2. Styles: The CSS (.css or .scss) file that styles the component's view.
3. Metadata (@Component): This "decorator" in the .ts file tells Angular that this
class is a component and links the View, Logic, and Styles together.
This architecture is superior to MVC because it promotes reusability, modularity, and better
organization.
5. Setting Up Angular
To set up a development environment for Angular, you need three main things:
1. [Link]: A JavaScript runtime environment that Angular uses for its build tools.
2. npm (Node Package Manager): A package manager that comes bundled with [Link]. It
is used to install Angular and other third-party libraries.
3. Angular CLI: The command-line tool used to create, manage, and build Angular projects.
6. Installation of Node and NPM
[Link] is a back-end JavaScript runtime that lets you run JavaScript on your server. Angular
uses [Link] for its build process, which includes compiling TypeScript to JavaScript, bundling
files, and running a development server.
NPM (Node Package Manager) is the world's largest software registry. It is a command-line
tool used to install, update, and manage the packages (libraries) your project depends on.
Installation Steps:
1. Go to the official [Link] website: [Link]
2. Download the LTS (Long Term Support) version. This is the recommended version for
most users.
3. Run the installer and follow the on-screen instructions.
4. NPM is automatically installed with [Link].
5. To verify the installation, open your terminal or command prompt and run:
node -v
(This should print the [Link] version, e.g., v18.18.0)
npm -v
(This should print the npm version, e.g., v9.8.1)
7. Angular CLI
The Angular CLI (Command Line Interface) is an essential command-line tool that automates
and simplifies the entire Angular development workflow.
Key Functions:
● ng new: Creates a new, fully configured Angular project.
● ng generate: Creates new components, services, modules, etc. (e.g., ng generate
component my-component).
● ng serve: Compiles the application, starts a development server, and watches your files
for changes (live reload).
● ng build: Compiles and bundles the application for production.
● ng test: Runs your unit tests.
Installation: The CLI is installed globally using npm.
npm install -g @angular/cli
● npm install: The command to install a package.
● -g: The "global" flag, which makes the ng command available anywhere in your terminal.
● @angular/cli: The name of the package to install.
8. Creating and Running Project
1. Create the Project: Use the ng new command to create a new workspace and an initial
application.
ng new my-first-app
● ng new: The command to create a new project.
● my-first-app: The name you want to give your project.
● The CLI will ask you about adding routing (it's good to say 'yes') and which stylesheet
format you prefer (e.g., CSS, SCSS).
2. Run the Project: After the project is created, you must navigate into the new project
directory.
cd my-first-app
Then, use the ng serve command to run the development server.
ng serve --open
● ng serve: Compiles the app and starts the server.
● --open (or -o): Automatically opens the application in your default web browser.
The server runs at [Link] by default.
9. Dependencies
Dependencies are the external libraries and packages that your project needs to function.
Angular manages these using the [Link] file.
[Link]: This file is the "manifest" of your project. It lists all the project's metadata,
scripts, and dependencies.
● "dependencies": A list of packages that are required for the application to run in
production. This includes core Angular packages like @angular/core, @angular/common,
@angular/router, etc.
● "devDependencies": A list of packages that are only needed for development. These
are not included in the final production build. This includes tools like @angular/cli,
@types/node (for TypeScript definitions), and typescript.
node_modules folder: When you run npm install (which ng new does automatically), npm
reads [Link] and downloads all the listed dependencies into a folder called
node_modules.
10. App Component
When you create a new project, the Angular CLI generates a root component called App
Component ([Link]).
● This is the main component and the root of your entire application.
● It acts as the primary container, and all other components you create will be nested inside
this one.
● Its default selector is app-root.
● This <app-root> tag is what Angular looks for in your main [Link] file. Angular "injects"
the entire application inside this tag.
● [Link] (body):
<body>
<app-root></app-root>
</body>
This tag is replaced by the content of your [Link] at runtime.
11. Anatomy of Component
A component is made of 4 files, but the most important is the TypeScript file (.ts) containing the
Decorator and the Class.
File: [Link]
// 1. Import necessary modules
import { Component } from '@angular/core';
// 2. The @Component Decorator (Metadata)
@Component({
selector: 'app-my-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
// 3. The Component Class (Logic and Data)
export class MyComponent {
// Properties (Data)
title: string = 'Welcome to my component!';
// Constructor (for initialization and dependency injection)
constructor() { }
// Methods (Logic)
greet(): void {
[Link]('Hello!');
}
}
Anatomy Breakdown:
● @Component Decorator: This is metadata that tells Angular that the class below it is a
component.
○ selector: The custom HTML tag for this component. (e.g., <app-my-component>).
○ templateUrl: The path to the component's HTML file (The View). You can also use
template: '<h1>Hello</h1>' for inline HTML.
○ styleUrls: An array of paths to the component's CSS files. You can also use styles:
['h1 { color: red; }'] for inline styles.
● Component Class: This is a standard TypeScript class that contains the component's
logic.
○ Properties: These are variables that hold data for the view (e.g., title).
○ Methods: These are functions that define the component's behavior (e.g., greet()).
12. Creating Components
While you can create components manually, the Angular CLI is the recommended way.
Command: ng generate component <component-name>
Shortcut: ng g c <component-name>
Example: ng g c user-profile
What this command does automatically:
1. Creates a new folder: src/app/user-profile/
2. Creates 4 files inside that folder:
○ [Link] (The View)
○ [Link] (The Styles)
○ [Link] (The Logic/Class)
○ [Link] (The Test file)
3. Updates [Link]: It automatically declares the new UserProfileComponent in
your main AppModule, making it ready to use.