Daily Dose of Angular — Part I

Introduction

Angular is an application design framework and development platform for creating efficient and sophisticated single-page applications. Here, I am going to walk through how to build your first Angular project using a single-page template that you can download for free.

First, you have to create an environment in your PC to work with Angular. To do that you have to have Node.js installed in your development environment.

Setting up Node.js in Your Development Environment.

You can download the setup from https://nodejs.org/en/download/ to your Windows or Mac and install it by double-clicking it. And let it automatically add to your environment path.

Figure: Downloading Node.js to your PC

Figure: Node.js Setup Wizard

After installing Node.js type node -v in your command prompt to see that it is installed correctly.

Figure: Checking whether the Node.js is installed properly.

Installing Angular

The functionalities of Angular and related apps depend on the features provided by a tool called npm or "node package manager". To check that you have installed npm type npm -v in the console/terminal window.

Figure: Checking whether the npm is installed properly.

After these prerequisites are completed we can install the Angular CLI by typing npm install -g @angular/cli

Create a Workspace for Your Application

To create a new workspace for the application, go to the folder you want to create your workspace and type cmd in the address bar of the folder in Windows and use the following code snippet on the command terminal that opens, ng new my-app In Mac, you can start your terminal and go to the relevant folder and type the same code snippet too. But since I will be using a premade template on my application, I will be using the name "Namari" as my application name. So I will be typing ng new Namari and will be calling my application as Namari to avoid complications.

When you press ‘enter’ after typing if asks that Would you like to add Angular routing?(Y/N) type y for yes to add Angular routing. And after that, it asks Which stylesheet format would you like to use? You can just use CSS by pressing 'enter' or select a different option using 'arrow keys'. Here I will be using CSS. After that, the files will be downloaded and added to your workspace.

Figure: Creating the workspace.

Figure: Packages installed successfully.

You can download the template that I will be using from https://onepagelove.com/namari

Figure: https://onepagelove.com/namari

Figure: Namari web page.

Run Your Application

After creating the workspace go to the workspace folder. In Windows, you can go to it by typing cd my-app or cd Namari if you have chosen the same name as me for the application.

After that, you can type ng serve --open or ng serve -o to run your application. Here ng serve snippet is the one actually sets up a local host and runs it. The -o or --open postfix actually opens the local host portal in your default web browser and lets you see the web page. But you can type ng serve in command prompt and type localhost:4200 in your default web browser to open the application too.

Figure: Running the application in the terminal.

Figure: Namari app is running.

After this, we will be looking into the template that we downloaded and we will be dynamically programming that into a dynamic application.