Introduction to the Angular Concepts

What is ANGULAR?

Angular is a framework for building a single page client side application/desktop application using HTML and Typescript. Angular is fully-featured and it is very flexible to use.

Angular is Model View Controller Architecture and therefore, its performance is very high.

Angular is open-source and is written in Typescript and compiled into JavaScript.

WHY Angular?

Following are several reasons why we choose Angular:

1. Light Weight
2. Multiple Compilers
3. Google Supports
4. To secure a binding of data in HTML elements
5. To provide Cross-platform
6. Reduce Code
7. To provide Dependency Injection
8. Multi-threading (Web Workers)

One question is always in your mind why we choose angular? The massive reason is salary package and its demand. The best example is Netflix and PayPal

Architecture of MVC:

MVC stands for Model View Controller:

Let’s discuss the components:

Model: This component manages the application data and carry data between view and controller.

View: This component manages with how data is displayed to user. This component sends the request to controller to get the particular data that is requested by user

Controller: This component manages the relation between view and model. Controller respond the user input and performing action on data model objects.

Installation of Angular

1. Firstly, Installation the Node.js and its environment can be setup into your operating system like Linux, Window etc.
2. Secondly,we need to install some development tool and editor that are following below:
3. Node Package Manager ( npm )
4. Text Editor (Visual Studio Code)
5. After installation of the above said, you need check your Node Package Manager version by following command by running the command prompt.

• Install Angular CLI:
• CLI stands for Command Line Interface.
• Angular provide cli command to create a project template.
• You can run following commands to install Angular CLI:

npm install @angular/cli -g

How to create Angular Project?

• Firstly, we need to create a folder in your system.
• Then open the folder and write cmd in its path. After this Command prompt will open.
• You create new project in Angular by given command:

ng new project name 

Here, I had given the name Angularproject as project name

Moving to next step, they ask you for add Angular routing: and you have to type ‘y’ to sayyes

Then command prompt will ask you for adding a style sheet for the project, and you have to type ‘y’ or ‘n’ as per your convince.

Finally, your Angular project are created. You can check your Angular project folder structure.

Moving on next step, you need to open your text editor (VS Code) and check your folder structure that is created and we need to write code .in command prompt for this.

Then we are adding the node module in our project by adding command:

That is npm start

This command is used for creating a node module in our project. The Node Modules is a directory that is only used for build tools and root defines where libraries will be installed.

The Last command of our project is for build and run the application that is created in angular that is ng s (where ng stands for next generation and s stands for serve)

Ng serve command builder and serve the application that you had created and it rebuilds, when the application if changes occurred afterwards the project is running the browser. And following screen will appear in the browser.

This is the Overview of Angular project and I hope you understand the concept of Angular. If you are interested to take Online/Offline Angular courses, we are providing Angular training in Jalandhar