UNIT 1: GETTING STARTED WITH ANGULAR

ANGULAR:
 Angular is a platform and framework for building single-page client applications using HTML and
TypeScript.
 Angular is an open-source, JavaScript framework written in TypeScript.
 It implements core and optional functionality as a set of TypeScript libraries that you import into
your applications.
 Google maintains it, and its primary purpose is to develop single-page applications.
 As a framework, Angular has clear advantages while also providing a standard structure for
developers to work with.
 It enables users to create large applications in a maintainable manner.

What are Single Page Applications?

 A Single Page Application (SPA) is a single web page, website, or web application that works
within a web browser and loads just a single document.
 It does not need page reloading during its usage, and most of its content remains the same while
only some of it needs updating.
 When the content needs to be updated, the SPA does it through JavaScript APIs

Examples of SPAs

Gmail, Facebook, Trello, Google Maps, etc., all are Single Page Applications that offer an outstanding
user experience in the browser with no page reloading.

Why Do You Need a Framework?

 Frameworks in general boost web development efficiency and performance by providing a

consistent structure so that developers don’t have to keep rebuilding code from scratch.
 Frameworks are time savers that offer developers a host of extra features that can be added to
software without requiring extra effort.

What are the Different Angular Versions:

 “Angular” is the catch-all term for the various framework versions out there. Angular was
developed in 2009, and as a result, there have been many iterations.

 First, there was the original Angular, called Angular 1 and eventually known as AngularJS.
  Then came Angulars 2, 3, 4, 5, until finally, the current version, Angular 11, released on
11/11/2020.

 Each subsequent Angular version improves on its predecessor, fixing bugs, addressing issues, and
accommodating increasing complexity of current platforms.

Features of Angular

 Document Object Model

 DOM (Document Object Model) treats an XML or HTML document as a tree structure in which
each node represents a part of the document.

 Angular uses regular DOM. Consider that ten updates are made on the same HTML page.

 Instead of updating the ones that were already updated, Angular will update the entire tree structure
of HTML tags.

2. TypeScript

 TypeScript defines a set of types to JavaScript, which helps users write JavaScript code that is
easier to understand.
  All of the TypeScript code compiles with JavaScript and can run smoothly on any platform.

 TypeScript is not compulsory for developing an Angular application.

 However, it is highly recommended as it offers better syntactic structure—while making the

codebase easier to understand and maintain.

You can install TypeScript as an NPM package with the following command:

npm install -g typescript

3. Data Binding

 Data binding is a process that enables users to manipulate web page elements through a web
browser.

 It employs dynamic HTML and does not require complex scripting or programming. Data binding
is used in web pages that include interactive components, such as calculators, tutorials, forums, and
games.

 It also enables a better incremental display of a web page when pages contain a large amount of
data.

4. Testing

 One of the API for testing angular is test bed.

 It is the angular core type safe changes.

5. Default IVY:

 It is a rendering machine that transforms angular code (HTML+TS) code into browser readable
code(HTML+JS).

 It is the default ivy compiler.

6. Dependency Injection

 This feature lets you keep your component classes crisp and efficient.

 It does not fetch data from a server, validate the user input, or log directly to the console.

 Instead, it delegates such tasks to the services.

6. Enhancement of language services

7. Cross platform

8. Easier to learn

Advantages of Angular

 Smaller bundle size

 Faster testing

 Better debugging

 Improved CSS class and style binding

 Improved type checking

 Browser compatibility

 Comprehensive

Angular development environment setup:

Development Environment

 Node
 NPM
 Editor-Visual Studio Code
 Angular CLI
Step 1: Install Node.js

The first step is to install Node.js. This is a JavaScript runtime that is necessary for running Angular
applications. To install Node.js, go to the official website and download the installer for your operating
system.

Once the download is complete, open the installer and follow the instructions to install Node.js on your
machine.

Step 2: Install the Angular CLI

The second step is to install the Angular CLI (Command Line Interface). The CLI tool will help you
create, build, test, and deploy your Angular applications. To install it, open a command prompt window
and run the following command:

npm install -g @angular/cli

Shell
Copy
Once the installation is complete, you can verify that it was successful by running the following
command:

ng --version
Shell
Copy
Step 3: Create a New Project

Now that you have installed the necessary tools, you can create a new project. To do this, open a
command prompt window and navigate to the directory where you want to store your project. Then, run
the following command:

ng new my-project
Shell
Copy
This will create a new project with the name “my-project” and all of the necessary files and folders.

Step 4: Run the Project

Once you have created your project, you can run it locally by running the following command in your
project directory:

ng serve
Some useful commands using angular CLI

You can run many commands once you download Angular CLI, such as:

1. To check version of CLI: $ ng version

2. To add support to your project for an external library: $ng add
3. To compile the Angular app in the output directory called dist.or in the output path defined;
should be executed from inside a working space directory: $ng construct
4. To retrieve or set Angular configuration values: $ng configure
5. To open the official Angular Documentation (angular.io) in the browser and searches for a
keyword: $ng doc
6. To generate and/or change schematic-based files: $ng generate
7. To list the commands available and their brief descriptions: $ng help
8. To run lining tools on the Angular device code in the project folder: $ng lint
9. To build a new workspace and an initial Angular app: $ng new
10. To run a custom target set for your project: $ng run
11. To develop and support your request, restore on file changes: $ng serve

Angular components:

Components are the main building blocks for Angular applications. Each component consists of:

 An HTML template that declares what renders on the page

 A TypeScript class that defines behavior
 A CSS selector that defines how the component is used in a template
 Optionally, CSS styles applied to the template

Creating a component

The best way to create a component is with the Angular CLI. You can also create a component manually.

Creating a component using the Angular CLI

To create a component using the Angular CLI:

1. From a terminal window, navigate to the directory containing your application.

2. Run the ng generate component <component-name> command, where <component-name> is the
name of your new component.

By default, this command creates the following:

 A directory named after the component

 A component file, <component-name>.component.ts
 A template file, <component-name>.component.html
 A CSS file, <component-name>.component.css
 A testing specification file, <component-name>.component.spec.ts

Where <component-name> is the name of your component.

Angular Elements

It is a library which allows us to use components outside of Angular code. In this case, the React frontend
team can add features to their application written in Angular.
We use Web Components technology to create the elements.
It allows us to create a custom HTML tag which we can repeatedly use in the code.
The logic contained in it is not connected with the rest of the code.

Creating an element using Angular API

To begin, let’s create our project, using the Angular CLI.
1 ng new angular-elements-example

Let’s add angular elements.

1 ng add @angular/elements

And let’s create a sample component.

1 ng g c test-component

Angular modules:
 In Angular, a module is a mechanism to group components, directives, pipes and services that are
related, in such a way that can be combined with other modules to create an application.

 Angular applications are modular and Angular has its own modularity system called NgModules.

 They can contain components, service providers, and other code files whose scope is defined by
the containing NgModule.

 They can import functionality that is exported from other NgModules, and export selected
functionality for use by other NgModules.

 While a small application might have only one NgModule, most applications have many
more feature modules.

 The root NgModule for an application is so named because it can include child NgModules in a
hierarchy of any depth.

 An NgModule is defined by a class decorated with @NgModule(). The @NgModule() decorator

is a function that takes a single metadata object, whose properties describe the module.
The most important properties are as follows.

PROPERTIES DETAILS

declarations The components, directives, and pipes that belong to this NgModule.

The subset of declarations that should be visible and usable in

exports the component templates of other NgModules.

Other modules whose exported classes are needed by component templates

imports declared in this NgModule.

Creators of services that this NgModule contributes to the global collection

of services; they become accessible in all parts of the application. (You can
providers also specify providers at the component level.)

The main application view, called the root component, which hosts all other
application views. Only the root NgModule should set
bootstrap the bootstrap property.