Introduction to the Angular

---

Welcome to Angular..!
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. It helps you to build modern applications for the Desktop, Web and Mobile.

Installation

---

Setting up the local environment and workspace

This guide explains how to set up your environment for Angular development using the Angular CLI tool. It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.

For Installation of Angular Application you needs 2 things as Prerequisites.

Prerequisites

To use the Angular Framework, you should be familiar with the following:

• HTML
• CSS
• JavaScript

Knowledge of TypeScript is helpful.
To install Angular on your local System, you need the following:

Node.js

Angular requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Npm package Manager

The Angular CLI and Angular applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window (cmd)

For better understanding Angular we suggest you once go through official documentation of Angular from Angular Documentation

Angular Setup

---

Installing the Angular CLI

You can use Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and run the following command.

npm install –g @angular/cli

Create a workspace and initial application

You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:

1. Run the CLI command ng new and provide the name filename as my-app, as shown below

ng new my-app

2. The ng new command prompts you for the information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. The CLI creates a new workspaces and a simple Welcome app, ready to run.

Run the application

The Angular CLI includes a server, so that you can build and serve your app locally.

1. Navigate to the workspace folder, such as my-app.
2. Run the following commands:

cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The --open or -o just Option automatically opens your browser to http://localhost:4200/.

Yoha Setup

---

If you have already download and install node.js and Angular CLI then ignore prerequisites.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Angular CLI

To install the Angular CLI using npm, open a terminal/console window and run the following command.

npm install –g @angular/cli

To Update the Angular CLI using npm, open a terminal/console window and run the following command.

ng update @angular/cli @angular/core
or
npm uninstall --save-dev @angular/cli
npm install -g @angular/cli@latest       // To Update globally
npm install --save-dev @angular/cli@latest  // To Update local project

Setup an Yoha Template by

1. Download the Yoha rar/zip file.
2. Extract it and then go in to Yoha Folder here .
3. Now from a terminal window, navigate to the directory containing your application
4. You can import all dependency by installing npm command

npm install

or

npm install -force

5. Now you are in stage to successfully run Yoha using below command:

ng serve

or

ng serve --open

Once you serve your application by default it will take their default port using http://localhost:4200/

Build Application

Build your application for host on server using below command:

ng build

Ahead-of-Time (AOT) compilation

---

An Angular Application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

The Angular AOT compiler converts your Angular HTML and Typescript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

Choosing a compiler

Angular offers two ways to compile your application:

1. Just-in-Time (JIT), which compiles your app in the browserat runtime. This was the default until Angular 8.
2. Ahead-of-Time (AOT), which compiles your app and libraries at build time. This is the default since Angular 9.

Ahead-of-time (AOT) vs just-in-time (JIT)

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries. To use JIT build, run this command line to build.

ng build --aot