Video -1:

Project Setup and Basics:

Project Setup: Involves installing the necessary packages and

setting up the Angular CLI. This step is crucial for initializing a new
Angular project with default configurations and dependencies.

Basics: Covers the core concepts such as modules, components,

templates, and data binding, essential for building any Angular
application.

Bindings: Focuses on connecting your HTML (view) to the TypeScript

code (model) using various binding techniques like property binding,
event binding, and two-way data binding.

Bootstrap: Integrates Bootstrap with Angular to utilize its ready-made

styles and components, enhancing the application's look and
responsiveness without extra CSS coding.

1. Routing:
Using Service: Services are used to write business logic and data
interactions, which can be injected into components to enhance
modularity and reusability.

Interaction between Components: Deals with component

communication using input/output decorators, services, or advanced
state management techniques.
2. Forms:
Template Driven Forms: Utilizes templates and directives to create
forms, with Angular handling form data and validation automatically.

Reactive Forms: Provides a model-driven approach to handling form

inputs whose values change over time, offering more control and
flexibility.

Inbuilt Validation: Uses Angular's pre-built validators for common

checks like required, minlength, and pattern.

Custom Validation: Discusses creating custom validation functions to

implement complex validation rules not covered by Angular's built-in
validators.

3. Advanced Features:
Pipes: Transforms data right in the template, useful for formatting
strings, currency amounts, dates, and other display data.

Observable and Resolver: Manages asynchronous data flows within

an application using RxJS Observables, crucial for handling data
operations like HTTP requests.

Lazy Loading: Enhances performance by splitting the application into

several bundles that are loaded as needed rather than all at once.

4. Storage and Security:

Save Data to Local Storage: Techniques for persisting user data
locally using the Web Storage API, allowing for quick data access even
when offline.
 Authentication: Implementing security measures to verify user
identities and manage user sessions.

5. Media and Deployment:

Uploading Image: Handling file input from users, validating, and
processing images within Angular applications.
Photo Gallery: Building a dynamic photo gallery, potentially
integrating third-party libraries for better handling of visual content.

Deployment on Firebase: Guides through deploying Angular

applications on Firebase, which provides hosting and backend services,
including real-time databases and cloud storage.

Video – 2:
What is Angular?

Angular is a JavaScript framework designed for building single-page

applications (SPAs). It enables developers to create high-performing
applications by offering a structured framework that incorporates
various development practices and tools.

What are Single Page Applications?

Single Page Applications (SPAs) are web applications that load a single
HTML page and dynamically update content as the user interacts with
the app, without reloading the entire page. This approach significantly
improves user experience by making web applications behave more
like desktop applications. A common use case is complex user
interfaces like dashboards, where multiple pieces of information update
frequently without page refreshes.

Angular History and Versioning

Angular was initially released by Google in 2010 as AngularJS. It was

completely rewritten in 2016, known simply as Angular 2, marking a
shift from the original architecture and adopting a component-based
structure. Subsequent versions have been released with semantic
versioning, introducing improvements and new features while
maintaining backward compatibility within major versions.

Angular CLI: Installation and Setup

The Angular CLI (Command Line Interface) is a powerful toolset for

initializing, developing, scaffolding, and maintaining Angular
applications. To install the Angular CLI, you must first install Node.js
and npm (Node Package Manager). Once Node.js and npm are
installed, you can install the Angular CLI globally using the command:
npm install -g @angular/cli. This setup prepares the environment for
developing Angular applications.

Running Your First Angular Application

To create and run your first Angular application, use the following
Angular CLI commands:

ng new my-app: Creates a new Angular application named my-app.

cd my-app: Navigates into the application directory.

ng serve: Compiles the app and launches a server, opening the

application on http://localhost:4200/.

Using Visual Studio Code with Angular

After setting up your Angular project, you can open it in Visual Studio
Code (VS Code) by navigating to the project directory and running code
.. This command opens VS Code with your project loaded, ready for
development.

Video 3:
Release of Angular 9 and Major Compiler Changes
Angular 9 was released as a significant update to the
framework, primarily revolving around the default adoption
of the Ivy compiler. This new compiler brought notable
changes including:

Smaller Bundle Sizes: Angular 9 significantly reduces the

size of the compiled application, making it more efficient,
especially for small to medium projects.
Faster Testing: Ivy improves the speed and stability of
running tests.
Enhanced Build Times: The build process is faster with Ivy,
owing to its more efficient compiling architecture.
Dual Compilation Modes: Angular 9 supports both Just-In-
Time (JIT) and Ahead-Of-Time (AOT) compilation across
development and production environments, enhancing
performance.
Type Checking: Improved type checking mechanisms lead
to more accurate and helpful build errors.
Debugging and Styling: Debugging is more
straightforward with better error handling, and styling
applications is more efficient with Ivy.
Features of Ivy in Angular 9
Reduced Application Sizes: Depending on the project's
scale, Ivy can significantly reduce the final bundle size.
Faster Localization: Improved handling of localization due
to more efficient building processes.
Advanced Configuration: Updates in the tsconfig file to
leverage Ivy's capabilities.
New Features Integration: Angular 9 includes new
features like a YouTube player and Google Maps components,
enhanced language service, and TypeScript 3.7 support.
Breaking Changes in Angular 9
Angular 9 introduced several breaking changes, mainly due
to the switch to the Ivy compiler. These include updates in
dependency injections, changes in the testing environment,
and modifications in some of the APIs that could affect
backward compatibility. Users are advised to test their
applications thoroughly when upgrading and make use of the
ng update command for a smoother transition.

Video-4

Folder Structure for Angular 9:

src/: Main source folder for the application's code.

app/: Contains the components, services, modules, and other

Angular-specific files.
 app.component.{ts,html,css,spec.ts}: Root
component files, including TypeScript, HTML template,
styling, and unit tests.

app.module.ts: Root module that declares and bootstraps

the Angular components.

app-routing.module.ts: Optional, defines routes for the

application.

feature-module/: Subdirectories for feature modules,

each with its own components, services, and models.

feature-component/: Each feature might have its own

components.

shared/: Contains shared modules, components,

directives, pipes, and services used across the application.

core/: Core functionality (e.g., singleton services) that is

app-wide and should only be imported once by the root
AppModule.

models/: Defines data structures and types used in the

application.

assets/: Used for static assets like images, fonts, and icons.

images/: Folder for image files like .png, .jpg, etc.

fonts/: Contains font files used in the application.

css/: Additional global stylesheets or CSS files that are not

component-specific

environments/: Includes environment-specific configuration

settings.

environment.ts: Contains default environment settings

used during development. It typically includes debug and
 verbose logging settings, API endpoints used during
development, and any other development-specific
configurations.

environment.prod.ts: Used for production builds. This

file includes settings appropriate for deployment, such as
production API endpoints, logging levels, analytics, and
performance optimizations that are necessary for a live
application.

node_modules/: Directory for all the npm packages.

e2e/: End-to-end tests using Protractor.

angular-cli.json or angular.json: Configuration file for Angular CLI.

editorconfig: Helps maintain consistent coding styles for multiple

developers working on the same project across various editors and
IDEs.

gitignore: Specifies intentionally untracked files to ignore during git

operations.

README.md: Markdown file containing useful reference information

about the project.

package.json: Manages project dependencies and defines scripts for

running tasks.

package-lock.json or yarn.lock: Provides version information for all

packages installed via npm or Yarn, ensuring consistent installs across
environments.

tsconfig.json: Configuration file for TypeScript, specifying the root

files and the compiler options required to compile the project.

tslint.json: Configuration file for TSLint which includes settings and

rules for linting TypeScript files.

karma.conf.js: Configuration file for Karma, a test runner.

protractor.conf.js: Configuration file for Protractor, an end-to-end test

framework.
 Folder Structure for Angular 18:

 angular: Configuration files for Angular CLI.

 vscode: Settings specific to Visual Studio Code.
 node_modules: Contains all npm packages installed for the project.
 public: Houses static assets like favicon.ico.
 src: The source directory for all the application's scripts, styles, and HTML.

 app: Core application directory containing the Angular components,

services, and other code files.
o app.component.css/html/spec.ts/ts: Defines the app's root
component with its styles, HTML template, TypeScript file, and
spec file for testing.
o app.config.ts: Configuration settings for the application.
o app.routes.ts: Routing configuration for the app.
 index.html: The main HTML file that is loaded when the application
starts.
 main.ts: The entry point for Angular applications, where the
AppModule is bootstrapped.
 styles.css: Global styles for the entire application.

 editorconfig: Helps maintain consistent coding styles for multiple

developers working on the same project.
 gitignore: Specifies intentionally untracked files that Git should ignore.
 angular.json: Configuration file for Angular CLI projects.
 package.json/package-lock.json: Manages project dependencies and
versions.
 README.md: Markdown file containing project information and
instructions.
 tsconfig.app.json/tsconfig.json/tsconfig.spec.json: TypeScript
compiler configuration files for the app, general settings, and test
settings respectively.

Note: we can alter versions using NVM (steps below)

Install NVM (Node Version Manager):

Open your terminal or command prompt.

Install NVM by following the instructions on the NVM GitHub page.

Install Node.js:

After installing NVM, close and reopen your terminal.

Install Node.js version 12 (which is compatible with Angular 9):

Commands:

nvm install 12

nvm use 12

Verify Node.js Installation:

Ensure Node.js is correctly installed:

Commands:

node -v

Install Angular CLI for Angular 9:

Install Angular CLI version 9 globally:

Commands:

npm install -g @angular/cli@9

Create a New Angular 9 Project:

Generate a new project with Angular CLI:

Commands:

ng new my-angular9-app

Navigate to Your Project:

Move into your project directory:

Commands:

cd my-angular9-app

Serve Your Application:

Start the development server:

Commands

ng serve

Open your web browser and navigate to http://localhost:4200/ to see your

new app.

video 5

VS Code Extensions

Angular Essentials: A comprehensive extension pack including popular

tools and extensions for Angular development.

Angular Files: Provides Angular file templates for quick generation of

components, services, etc.

Bracket Pair Colorization: Enhances code readability by colorizing

matching brackets.

Auto Rename Tag: Automatically renames paired HTML/XML tags.

Components in this project include:

Navbar: Provides site navigation.

Property List: Displays a list of properties.

Property Card: Individual property details.

Creating a Component (property-card.component.ts)

Structure: Includes a class and an Angular decorator.

Decorator Properties:

selector: Defines the custom tag to use this component.

template: Inline HTML or the path to an HTML file.

styles: Inline CSS or links to CSS files.

Root Component: AppComponent serves as the entry point.

Usage: Include the selector in the AppComponent's template to render the

Property Card.

Separating HTML/CSS

Create separate .html and .css files for the component.

Link them in the component's TypeScript file using the templateUrl and
styleUrls properties.

Generating Components in Angular: Three Methods

Using Angular CLI:

Standard Command: Create a new component using the command ng

generate component component-name.

Shortcut Command: Use the abbreviated command ng g c component-name

for quicker access.

Custom Path: Specify a custom path for the component's files with ng g c
path/to/component-name.

Manual Creation:

Manually create a new folder and add TypeScript, HTML, and CSS files
corresponding to the new component. Define the component class, selector,
template, and styles manually in the TypeScript file.

Integrated Development Environment (IDE) Tools: (Angular Files)

Utilize features in IDEs like Visual Studio Code that allow you to right-click on
a directory (such as the app folder) and select "Generate Component" or
similar options from the context menu. This method often integrates with
Angular CLI behind the scenes but provides a GUI-based approach.