learn-angular

v2.2.0

Published

3 months ago

This repository contains a list of resources to learn Angular. It includes tutorials, articles, videos, books, and other resources to help you learn Angular from scratch.

Downloads

0High
0Medium
0Low

manthanankolekar

manthanank

Learn Angular

This repository contains a list of resources to learn Angular. It includes tutorials, articles, videos, books, and other resources to help you learn Angular from scratch.

npm npm npm npm GitHub issues GitHub pull requests GitHub GitHub last commit GitHub top language GitHub repo size GitHub code size in bytes GitHub contributors

Introduction

Angular is a popular open-source web application framework developed by Google. It is used for building single-page web applications and dynamic web applications. Angular provides a set of tools and libraries for building modern web applications, including components, services, forms, routing, HTTP client, and more. Angular is built using TypeScript, a superset of JavaScript that adds static typing and other features to the language. Angular is known for its performance, scalability, and developer productivity.

Features of Angular

Component-Based Architecture - Angular is based on a component-based architecture, where components are the main building blocks of an application. Components are reusable, self-contained units of code that define the UI and behavior of a part of the application.
Two-Way Data Binding - Angular provides two-way data binding, which allows for automatic synchronization of data between the model and the view. This means that changes to the model are reflected in the view, and changes to the view are reflected in the model.
Dependency Injection - Angular uses dependency injection to provide components with the services they need. This allows for better modularity, testability, and reusability of code.
Routing - Angular provides a powerful routing system that allows for navigation between different views of an application. Routing is based on the URL of the application and allows for deep linking, lazy loading, and route guards.
Forms - Angular provides a rich set of tools for working with forms, including template-driven forms and reactive forms. Forms in Angular are based on the model-driven approach, where the form controls are bound to properties in the component's class.
HTTP Client - Angular provides an HTTP client module that allows for making HTTP requests to a server. The HTTP client module provides a simple API for working with RESTful APIs and handling responses.
Observables - Angular uses observables to handle asynchronous operations, such as HTTP requests and event handling. Observables are a powerful way to work with asynchronous data streams and provide a consistent way to handle events in an application.
TypeScript - Angular is built using TypeScript, a superset of JavaScript that adds static typing and other features to the language. TypeScript provides better tooling, error checking, and code completion, which makes it easier to build and maintain large applications.
Performance - Angular is designed for performance and scalability. It uses a virtual DOM to optimize rendering performance, and provides tools for lazy loading, tree shaking, and ahead-of-time compilation to reduce the size of the application and improve performance.
Mobile Support - Angular provides tools for building mobile applications, including responsive design, touch gestures, and mobile-specific features. Angular applications can be built as Progressive Web Apps (PWAs) and deployed to mobile devices using Cordova or Capacitor.
SEO Friendly - Angular provides tools for building SEO-friendly applications, including server-side rendering, pre-rendering, and meta tags. Angular applications can be optimized for search engines to improve visibility and ranking in search results.
Community Support - Angular has a large and active community of developers, who contribute to the framework, provide support, and share knowledge through blogs, forums, and social media. The Angular community is known for its helpfulness, inclusivity, and diversity.

Difference between AngularJS vs Angular

| AngularJS | Angular | |-----|-----| |Based on MVC Architecture|Based on Components| |Uses JavaScript to build the application| Uses TypeScript to build the application| |No Mobile Support|Mobile supports| |Run on only client-side|Runs on both client-side as well as server-side| |CLI not present|CLI present| |No SEO Friendly|Seo Friendly| |Performance is slow|Performance is fast|

Angular vs React

Angular - Angular is a full-fledged framework that provides a complete solution for building web applications. It includes features like two-way data binding, routing, forms, HTTP client, and more. Angular is maintained by Google and has a large and active community of developers.
React - React is a JavaScript library for building user interfaces. It is focused on the view layer of an application and provides a simple and declarative way to build UI components. React is maintained by Facebook and has a large and active community of developers.

Comparison - Angular is a full-fledged framework that provides a complete solution for building web applications, while React is a library focused on building user interfaces. Angular provides features like two-way data binding, routing, forms, and HTTP client out of the box, while React is more flexible and allows developers to choose the tools and libraries they want to use.

When to use Angular - Angular is a good choice for building large and complex web applications that require a complete solution for building UI components, managing state, and handling data. Angular provides a set of tools and libraries that work well together and are designed to scale with the size of the application.

When to use React - React is a good choice for building user interfaces that are focused on the view layer of an application. React provides a simple and declarative way to build UI components and allows developers to choose the tools and libraries they want to use. React is a good choice for building small to medium-sized applications that require flexibility and customization.

SPA

SPA stands for Single Page Application. It is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This approach allows for a more fluid and responsive user experience, as the page does not need to be reloaded each time the user interacts with it.

Advantages of SPA

Faster Load Times - SPAs load faster than traditional web applications because they only need to load the initial page once. Subsequent interactions with the application can be handled by updating the current page dynamically.
Better User Experience - SPAs provide a more fluid and responsive user experience because they do not need to reload the entire page each time the user interacts with it. This allows for faster navigation and smoother transitions between pages.
Reduced Server Load - SPAs reduce the load on the server because they do not need to fetch and render entire new pages each time the user interacts with the application. This can lead to cost savings and improved performance.
Improved SEO - SPAs can be optimized for search engines by using server-side rendering, pre-rendering, and meta tags. This allows search engines to index the content of the application and improve its visibility in search results.
Offline Support - SPAs can provide offline support by using service workers and caching strategies. This allows users to access the application even when they are offline or have a slow internet connection.
Mobile Support - SPAs can be optimized for mobile devices by using responsive design, touch gestures, and mobile-specific features. This allows the application to work well on a wide range of devices and screen sizes.
Scalability - SPAs are scalable and can handle a large number of users and interactions. They can be optimized for performance by using lazy loading, tree shaking, and ahead-of-time compilation to reduce the size of the application and improve performance.

Roadmap

https://roadmap.sh/angular

Configuration

Prerequisites

Node.js

Installation

Install the Angular CLI globally:

npm install -g @angular/cli

Check version

ng version

Create workspace:

# with standalone component
ng new [PROJECT NAME]

# without standalone component
ng new [PROJECT NAME] --standalone=false

Note: In version v17 and later, the standalone component is default enabled. In version v16 and earlier, the standalone component is disabled by default. You can enable or disable the standalone component using the --standalone flag.

Navigate to the project directory:

cd [PROJECT NAME]

Run the application:

ng serve

Open the browser and navigate to http://localhost:4200/.

Components

Component is the main building block of an Angular Application. It is a TypeScript class that interacts with the HTML template and provides the data and logic to the view.

Three main building blocks

There are three main building blocks of an Angular component:

Template
Class
Metadata

Template - Defines the layout and content of the View.

Class - Class provides the data & logic to the View.

MetaData - Metadata Provides additional information about the component to the Angular.

Component metadata properties

There are several properties that can be defined in the component metadata:

Selector
Providers
Styles
StyleUrls
Template
TemplateUrl

Selector - Defines the element name or CSS selector that identifies the component in the HTML template.

Providers - Defines the providers of the component's dependencies.

styles - Defines the inline styles for the component.

styleUrls - Defines an array of URLs of the stylesheets for the component.

template - Defines the HTML template for the component.

templateUrl - Defines the URL of the HTML template for the component.

Component Creation

Using Angular CLI

ng generate component [component-name]

Manual Creation

Step 1 - Create a new folder for the component inside the src/app folder.

src/app/[component-name]

Step 2 - Create a new TypeScript file for the component inside the new folder.

src/app/[component-name]/[component-name].component.ts

Step 3 - Create a new HTML file for the component inside the new folder.

src/app/[component-name]/[component-name].component.html

Step 4 - Create a new CSS file for the component inside the new folder.

src/app/[component-name]/[component-name].component.css

Step 5 - Import the Component class from the @angular/core module.

import { Component } from '@angular/core';

Step 6 - Decorate the class with the @Component decorator.

@Component({
  selector: 'app-[component-name]',
  templateUrl: './[component-name].component.html',
  styleUrls: ['./[component-name].component.css']
})

Step 7 - Define the selector, template, and styles for the component.

selector - The selector for the component.
templateUrl - The URL of the HTML template for the component.
styleUrls - An array of URLs of the stylesheets for the component.

Step 8 - Export the class.

export class [ComponentName]Component {
}

Step 9 - Import the component class in the app.module.ts file.

import { [ComponentName]Component } from './[component-name]/[component-name].component';

Step 10 - Add the component to the declarations array in the @NgModule decorator.

declarations: [
  AppComponent,
  [ComponentName]Component
]

Step 11 - Use the component selector in the HTML template of the app.component.ts file.

<app-[component-name]></app-[component-name]>

Step 12 - Run the application using the ng serve command.

ng serve

Example

Creating the component files -

//test-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'test-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css']
})

export class TestComponent {

}

<!--component.component.html-->
<h1>Test Component</h1>

/*component.component.css*/
h1 {
  color: red;
}

Importing the component in the app.module.ts file -

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { TestComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating the inline Template & StyleUrls -

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: '<h1> {{title}} works </h1>',
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'app';
}

Scope

The scope of a variable in Angular refers to the context in which the variable is defined and can be accessed. There are three main types of scope in Angular:

Global Scope - Variables defined in the global scope are accessible from anywhere in the application. They are defined outside of any function or block of code.
Local Scope - Variables defined in a function or block of code are accessible only within that function or block. They are not accessible outside of the function or block.
Component Scope - Variables defined in an Angular component are accessible within that component and its child components. They are not accessible outside of the component.

Global Scope

Variables defined in the global scope are accessible from anywhere in the application. They are defined outside of any function or block of code.

Example :

// Global Scope
let globalVariable = 'Global Variable';

function testFunction() {
  console.log(globalVariable); // Output: Global Variable
}

testFunction();

Local Scope

Variables defined in a function or block of code are accessible only within that function or block. They are not accessible outside of the function or block.

Example :

function testFunction() {
  // Local Scope
  let localVariable = 'Local Variable';
  console.log(localVariable); // Output: Local Variable
}

testFunction();
console.log(localVariable); // Error: localVariable is not defined

Component Scope

Variables defined in an Angular component are accessible within that component and its child components. They are not accessible outside of the component.

Example :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  // Component Scope
  title = 'app';
}

<!--app.component.html-->
<h1>{{ title }}</h1>

View Encapsulation

View Encapsulation is a feature of Angular that allows you to control how styles are applied to components. By default, Angular uses Emulated View Encapsulation, which means that styles are scoped to the component and do not affect other components.

Emulated View Encapsulation

Emulated View Encapsulation is the default mode in Angular. In this mode, Angular emulates the shadow DOM to apply styles to components. This means that styles are scoped to the component and do not affect other components.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
  title = 'app';
}

Shadow DOM View Encapsulation

Shadow DOM View Encapsulation uses the native shadow DOM to apply styles to components. This means that styles are encapsulated within the shadow DOM and do not affect other components.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
  title = 'app';
}

None View Encapsulation

None View Encapsulation disables view encapsulation for the component. This means that styles are not scoped to the component and can affect other components.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'app';
}

Component Communication

Component communication is the process of passing data between components in an Angular application. There are several ways to achieve component communication in Angular, including Input and Output decorators, EventEmitter, and services.

Parent to Child

Input Decorator - The @Input decorator is used to pass data from a parent component to a child component. It allows the parent component to bind a property to the child component.

Example :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponent {
  @Input() message: string;
}

<!--child.component.html-->
<p>{{ message }}</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {
  message = 'Hello from parent component';
}

<!--parent.component.html-->
<app-child [message]="message"></app-child>

Child to Parent

Output Decorator - The @Output decorator is used to pass data from a child component to a parent component. It allows the child component to emit events that the parent component can listen to.

Example :

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child component');
  }
}

<!--child.component.html-->
<button (click)="sendMessage()">Send Message</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {
  message: string;

  receiveMessage($event) {
    this.message = $event;
  }
}

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>

Data binding

Data binding is a core feature of Angular that allows you to bind data between the component's class and the HTML template. There are two types of data binding in Angular:

There are two types of data binding in Angular:

One-way binding - This allows for passing data from the component's class to the HTML template or vice-versa.
Two-way binding - This allows for binding a property of an HTML element to a property in the component's class and vice-versa.

One way binding

One-way binding allows for passing data from the component's class to the HTML template.

There are several ways to achieve one-way binding in Angular, including:

From Component to View
From View to Component

1. From Component to View - This allows for passing data from the component's class to the HTML template.

There are several ways to achieve one-way binding from the component to the view in Angular, including:

Interpolation
Property binding
Class binding
Style binding
Attribute binding

Interpolation - This allows for embedding expressions in the HTML template. It is denoted by double curly braces ({{}}).

Example :

<h1>{{ firstText }} {{ lastText }}</h1>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  firstText = 'Interpolation';
  lastText = 'Example';
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Learn Angular

Table of Contents

Introduction

Features of Angular

Difference between AngularJS vs Angular

Angular vs React

SPA

Advantages of SPA

Roadmap

Configuration

Prerequisites

Installation

Components

Three main building blocks

Component metadata properties

Component Creation

Using Angular CLI

Manual Creation

Example

Scope

Global Scope

Local Scope

Component Scope

View Encapsulation

Emulated View Encapsulation

Shadow DOM View Encapsulation

None View Encapsulation

Component Communication

Parent to Child

Child to Parent

Data binding

One way binding

Two ways binding

Directives

Types of Directives

Structural Directives

Attribute Directives

Custom Directives

Other directives

Pipes

Built-in Pipes

Date Pipe

Uppercase Pipe

Lowercase Pipe

Currency Pipe

Percent Pipe

Slice Pipe

Decimal/number Pipe

JSON Pipe

Async Pipe

Impure Pipes

Decorators

Component

Directive

Injectable

Pipe

NgModule

Input

Output

HostListener

contentChild & contentChildren

viewChild & viewChildren

Life Cycle Hooks

OnChanges

OnInit