Angular basics and Installation steps

Angular basics and Installation Steps is a technical journal on Angular basics and Angular installation steps.

Angular is a framework to develop single-page applications(SPA) using HTML and Typescript.

 

Basics of Angular

You want to know what is a single page application right?

The name indicates itself the Single page application(SPA) is a web application that contains only one page. All the code(Typescript, HTML, CSS) processing and different page loads happen under one page. 

Can I learn Angular directly? Any prerequisites required?
Yes, you need to have some working knowledge of the below concepts. If you have, then you are ready to learn Angular.

1.CSS
2. HTML
3. JavaScript

I’m interested to learn Angular, can I set up locally?
Yes. You can setup Angular in your local machine. For that, you need to install the below
components: 

a. Node JS 
b. npm 
c. TypeScript 
d. Angular CLI

Are there any good scripts to look after other than Angular?
Yes. React JS is one of them. 

What about coding in Angular?
Typescript is the language we need for Angular coding. 

What is Typescript?

Microsoft Typescript is just more than a javascript with additional feature support. The compile-time type checking is one of the key features of typescript. At runtime typescript compiled into javascript only.

What about version history for Angular?
The current running version is Angular 9. The other versions are Angular JS or Angular 1, Angular 2,3,4,5,6,7,8, and 9. 

Is Angular JS or Angular 1, same as the other Angular versions 2,3,4 etc…?
The answer is No. Angular JS or Angular 1 is completely different from other versions. The other versions are based on the component model or architecture. Angular JS based on MVC architecture. Another variance is Angular JS uses only JavaScript whereas other versions use the Typescript. 

We know JavaScript, then what is this Typescript about?
Typescript is an extended version of JavaScript. Is this just extended anything else special? Yes, it supports type checking at compile time also it's converted to javascript. 

What are the steps for installations in my local machine?
Step 1:
Download the Node JS latest version from nodejs.org
Step 2:
Install the Nodejs latest version in local
Step 3:
Use npm(node package manager) in the node.js console to install the required packages
Step 4:
Install the TypeScript latest version using npm commands
Step 5:
Use command-line interface tools like Angular CLI for development
Also, you can use IDE’s like Visual studio code and Webstorm for angular development 

How to install packages?
Open the node.js command prompt in administrator mode and enter the below command
>> npm install
This command installs the required packages. If you want to install the default package.json in your project, copy the package.json file from the node.js installation folder and paste it in your current project folder.
Navigate to your project folder in command prompt, then type >> npm install command
Once installed, you can see the node_modules folder in your project folder.

How to install the Angular CLI using npm?
Open the node.js command prompt in admin mode and enter the following command: 

 >> npm install -g @angular/cli  (here g mean global installation) 

Once installed we can use CLI to create and maintain angular projects. 

How to create and run the angular project?
Open the node.js command prompt in admin mode and enter the following command: 

 >> ng new newproject_name
 >> cd newproject 
 >> ng serve 

What is the basic folder structure of the Angular Project?

Once the project created successfully, we can see the below main folders:

1. src

   1.1. app

        1.1.1 app.component.html

        1.1.2 app.component.styl

        1.1.3 app.component.ts

        1.1.4 app.module.ts

   1.2. assets

   1.3. environment

   1.4. main.ts

   1.5. test.ts 

   1.6. styles.styl

   1.7.  index.html

2. node_modules

In this folder, we can find a large number of modules, out of that @angular is the main module for angular. Typescript is also another noted module.

What are the basic keywords used in the Angular Project?

Below are the keywords we use accross Angular programming.

1. NgModule 

2. Component 

3. Import

4. Export

5. Providers

6. Declarations

7. Selectors

8.TemplateUrl

What are the 'NgModules' in Angular?

'NgModules' (i.e. Modules) are like classes in Angular. Angular is also called modular programming. The Angular app needs to start with at least one NgModule i.e, root module. The programming hierarchy is like 

1. Define the root module

2. Define the Components view templates

3. Include any services in module

4. Import or export components  

What are the Components in Angular?

Components are like classes used to define the View templates in Angular.

How to define Modules and Components in Angular?

Angular provides the decorators to define modules and components. To define modules, use the @NgModule decorator. For components, use the @Component decorator.

What is View and Templates in Angular?

The view is a UI associated with components. A template is an HTML page.

Use the Angular code along with HTML code to make the view for components.

Conclusion

Now navigate to the browser then type the https://localhost:4200/ to view the default welcome angular app.