Installation

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 3 things as Prerequisites.

Prerequisites

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

  • Angular
  • Typescript
  • CSS
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

Spruha Angular Setup
Step1:

Install Node.js: Angular requires Node.js to be installed on your system. You can download and install Node.js from the official website: https://nodejs.org/.

Step2:

Install Angular CLI: Once Node.js is installed, open your command prompt or terminal and run the following command to install Angular CLI: 

 
npm install –g @angular/cli

This will install the latest version of Angular CLI globally on your system.

Step3:
Create a workspace and initial application

To create a new Angular project, navigate to the directory where you want to create the project using the command prompt or terminal and run the following command

  1. Run the CLI command ng new and provide the name filename Ex: my-app, as shown below
    2. 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.

This will create a new Angular project named "my-app" in the current directory.

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/.

Spruha Angular Setup
Step1:

Download the Spruha.rar/zip file.

Extract it there you will find Spruha(main project file), Starter-kit(set of files and code that provides a basic structure and functionality for a specific type of application), Readme.txt, Documentation.

Step2:

Go to the Spruha folder/directory. open the command prompt/ terminal run the below command. 

 
npm install            // If you faced any issue running "npm install" Please make sure to use,
	                    
npm install --force 	// This command will ignore if there was any dependency issue.
	(or)
yarn install			// yarn can handle dependency issues better than npm.

Once the installation was successful then you can find node_modules folder where all the downloaded libraries are available.

Step3:

To serve the Angular project, In command prompt or terminal run the following command:

ng serve

Once you serve your application by default port is set to 4200 :http://localhost:4200/

To change the Angular port manually, you can specify the port number when running the ng serve command. By default, the port is set to 4200, but you can specify a different port number by appending `--port` followed by the desired port number.

ng serve --port 1234
Ahead-of-Time (AOT) compilation

An Angular Application consists mainly of components and their Angular 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 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

Installation Video
Video Link
Copyright © Spruha. Designed with by Spruko All rights reserved.