[Part-1] Introduction to Angular

Hello friends ! In this article we are going to learn angular step by step.

What is Angular?

• Angular is a open source platform which is used for binding UI and business logic or Javascript object. Open source means you can get it without any charges.
• It is a Javascript framework used to build single page applications. You can create both mobile and web applications using angular.

In order to do project in Angular, you need something called Angular CLI(Command Line Interface) which will create template for project.

• To get this, search angular github in the search box and click on the first link as shown below.

• After this you will see the below page -

• Now just concentrate on three things which I have red marked.

1. angular : It is a main framework where you will get all angular properties.
2. components : It helps you to make UI more better and attractive. It contains all about material design.
3. angular-cli : It gives you a basic template to create project so that you need not to create required files manually.

Now, let’s download angular CLI. To do this you have to first install Node.js in your computer.

Node.js :

• Node.js is used to run javascript code outside browser.
• Using Node.js you can download javascript libraries as well as angular cli globally.

Click here to download Node.js

• Download the latest version which I have red marked in above snapshot.
• After successfully installing Node.js, now you can download angular cli.
• If you go to the official angular cli website, you will get all about how to download it, how to create your project, how to run the project,etc.

• As you can see in the above snapshot, in the blue box you can see four commands. We will see them one by one.

To download angular cli run the below command in terminal :

npm install -g @angular/cli

• You can run this command in Node.js terminal or in the terminal of visual studio code . The ‘-g’ in this command specifies that you are going to download angular cli globally.
• Remember if you are working on multiple projects which are developed using different angular versions, you shouldn’t specify ‘-g’ but if you are a beginner then I would suggest you to globally download angular cli.

I have already downloaded it, as I said you just need to run the above command in Node.js cmd. To check if it has downloaded properly run below command in cmd.

ng --version

If angular cli has downloaded successfully you will able to see the below screen.

Now let’s create our first project in angular :

To create angular project you need to run below command in terminal.

ng new my-dream-app

• Let us create a project HospitalManagement in visual studio code. Visual studio code is nothing but an editor but it is a powerful developer tool providing IntelliSense(auto completion) and debugging properties.

Click here to download Visual Studio Code

• Remember to open the folder where you want to create your project. I have run above command to create my first project. While doing this it will ask couple of questions as shown below:

• Say no to add angular routing and select css as stylesheet and press enter. After doing this it will start installing all required packages.
• On left hand side side under the folder you can see your project folder in which basic template gets created as shown below :

Now to run this project, we need to change the directory means we need to be in the project folder using the 3rd command i.e.

cd my-dream-app

Now we can run our project using the last command i.e.

ng serve

• ng serve will take your project files and compile it and finally it will run it on your localhost.
• So after successful compilation, it will show you the port number to run on that localhost in browser as I have shown in below snapshot.

• Just copy the text which I have red marked and paste it in chrome, in order to run your project.
• You have run your project successfully. For the first time the browser will show you the official angular page as shown below.

• Now to display HelloWord on browser, we need to go in app.component.html file which is present under project folder. Use the below path to reach it.

Project Folder → src → app → app.component.html

• Open this file and clear all and just type ‘HelloWord’ and save it.

Note : In angular, you need not to always refresh the browser to see the changes made to your project pages as like .net or any other languages.

This is also one of the advantage of angular over the other languages where after saving the changes to your page it will automatically refresh the page and run the project.

Do let me know if you find this post useful and don’t forget to share this with one who will need it. Thank You.

[Part-1] Introduction to Angular

[Part-2] Directives and DOM in Angular

[Part-3] Camel case and Pascal case

[Part-4] Routing for navigation in Angular

If you want to learn more about angular in a hour please go through the below video :