Day 1 Of Angular

Day 1 Of Angular

By Olvine George

Brief background

Angular is an open source JavaScript web framework which is managed by the Angular team at Google. It is mostly confused for AngularJS which is not . Angular came about as a product of AngularJS and the two have notable differences. You can check out their differences here

Getting Started

Pre-requisites

In order to get started with Angular, you ought to check out some things:

1. Prior knowledge of HTML , CSS and JavaScript Given that Angular is a web framework, you need to have an understanding of how HTML , CSS and JavaScript works. emphasis on JavaScript

I wouldn't advise you to start on Angular if you don't have a solid understanding of JavaScript. Hey , but don't worry , it's not like JavaScript is a mountain or something. You can go brush up and come back. We will be right here waiting for you.

2. NodeJS

You ought to have nodejs installed so as to run Angular on your terminal (Angular-Cli). If not, you can do that right here

3. Vscode

This is where we will be running your code from. If you don't have vscode installed, don't worry. I got you . Download Vscode

Let's Jump In

1. Installation and set up

In order to run angular on our machine, we need to install some few packages. Let's first check if node is properly installed by running the command below on your terminal (command line)

node -v

Now that we have node set up, we can now install Angular by running the following command on our terminal and ensure that the version is 3.7 or higher.

2. Typescript Installation( not mandatory)

You don't necessarily need to have TypeScript but in order to make our lives more easier, we need to have it. Besides , Angular was written in TypeScript and basically thats what almost everyone uses.

3. Angular-cli installation

This is the last tool we are installing for today , I promise. Angular gives us the ability of creating and managing our projects from the command line. Super cool right?

In order to install angular-cli, run the following command:

npm install -g @angular/cli

This is gonna take some time depending on your internet connectivity

In order to confirm if the installation was successful, run the following command which will list all the things that angular-cli can do

ng help

Let's create our first hello world application

Wooohooo, we can now dive into some code and see how angular works under the hood. To create our first application , run the following command

ng new hello-angular

You'll be asked some questions that'll help you set-up your app in a fancy and classy way. You can ignore those that might not seem of much importance as per now i.e Angular routing.

Screenshot from 2022-07-12 17-37-21.png

It takes a while to install the dependancies but when it's done you will see a message saying packages installed successfully

shot.png Let's move into our directory and check out our starter app

cd hello-angular

You'll see alot of files that might somewhat seem confusing but don't worry, that's all just boilerplate. We will cover file structure on our next article as we build out our own app. For now we need to see our results. In order to do that run , the following command in your terminal

ng serve

Screenshot from 2022-07-12 17-54-18.png

I have an app running on a different port hence my app runs on localhost:38361. Yours should probbably be on localhost:4200 . Let's check it out on our browser. Mine's running on Google Chrome.

Screenshot from 2022-07-12 17-59-39.png

Hurraaay!!!!!! Congratulations on building your first angular application. That's it for day one.

On our next article, we will have a look at the file structure and dive into the actual code and build our own Angular application. Stay tuned.