Introduction to Angular 9

What and why?

Angular is a framework to build client-side applications. Specialty for single-page Applications(SPAs). So any applications that rely on Javascript then Angular is a great choice.

A Couple of Points:

  1. By design, angular promote a Modular approach and hence application build we have a clear structure.
  2. Reusable code.
  3. Development quicker and easier.
  4. Unit testable.
  5. Angular is a product of Google Team and uses the Typescript of Microsoft.

Prerequisites:

HTML, CSS, Javascript

Basics of Typescript

Dev Environment:

  1. Node
  2. Npm
  3. Angular CLI

Text Editor – VS code is best for many developers.

Install Node from https://nodejs.org/en/ and choose the recommended one.

After installation complete on your system. Set the environment path of node js.

Then finally check with commands in terminal 

node -v

npm -v

3. Angular CLI

Install angular CLI via npm commands in your terminal. Check the steps from https://cli.angular.io 

If you want to check the angular was installed. Type the command in terminal ng -v .

Make sure the Angular CLI environment path was set properly.

Finally, we need an editor for code. I am using visual studio code. It’s up to your choice.

You can download it from https://code.visualstudio.com 

Download and install properly the above requirements.

Let’s start the Hello world angular application.

Go to the visual studio code and open the folder you want to create an angular project. Press “Ctrl + ~” to open the terminal in the visual studio code editor.

Type ng new hello-world and press enter.

The command takes some time to create an angular project setup.

After creating the project just navigate to the project folder by typing the terminal cd hello-world and then type ng serve to run the application. Then go to the browser and type in the URL http://localhost:4002. The angular default port was 4002. If you want to change the port in angular run the application by ng serve –port 4000

Now your basic application was created successfully.

Architecture of Angular

Architecture Summary:

1.Angular app – one or more modules.

2.Angular Module – one or more components and services.

3.Angular components – HTML + Class.

4.Angular Services – Business Logic.

Modules interact and ultimately render the view in the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *