Learn Angular 7 In 12 Days (Day 1)


In this 12 Day Series we will learn Angular. Angular is one of most popular front end framework. Angular let’s us develop rich client side applications Like Dashboards, Real-time Apps etc. We will be using the latest and greatest version of Angular, the version 7.0. Today on day 01 we will setup Angular development environment in our local machine and create our first Angular app. So after a little intro about the Angular framework let’s start setting up the local environment.

What is Angular?

learn angular 7 - angular main image

Angular 7 is a JavaScript framework for building awesome Web and Mobile applications using JavaScript, HTML, and Typescript. We can build Hybrid and Native Mobile Applications with Angular by using mobile frameworks like Ionic and Native Script. These Mobile Frameworks are written in Angular. Angular also provides built-in features for HTTP service, animation and materials.

Local Environment Setup:

Angular 7 development environment can be setup in Mac, Linux, Windows. For setting Angular environment in our local machine these are the following tools that we need to install on our local machine.

Nodejs: Node.js is an open-source javaScript runtime environment that executes javaScript code.

NPM: Node Package Manager.

TypeScript: TypeScript is a programming language developed and maintained by Microsoft.

Angular CLI: Angular cli is a command line interface to scaffold and build Angular applications using node.js style modules.


To check if node is installed on your computer, enter the following command in the terminal.

$ node -v
// v10.15.1

If it does not print anything, it’s mean node.js is not install on your computer. To install nodejs, go the https://nodejs.org/en/download/  and install the package based on your Operating System.

NPM (Node Package Manager) is included in Node.js installation, so there is no need to install it separately.

To check if npm is installed or not, enter the following command in the terminal. It should display the version of the npm.

$ npm -v
// 6.4.1

For Mac OS or Linux OS users, you can directly install Node.js from the command line using Homebrew package manager for Mac OS or Linuxbrew package manager for Linux OS.

$ brew install node


As you have already installed Node.js, it’s time to install the TypeScript Package using the NPM. Open your terminal window and enter the following command:

$ npm install -g typescript

This will download the latest version of typeScript from the server, extract it and install on your computer. 

Angular CLI

To Install  Angular CLI, type the following command in the terminal:

$ npm install -g @angular/cli

This will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run the following command:

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
Angular CLI: 7.0.2
Node: 8.12.0
OS: linux x64

Package                      Version
@angular-devkit/architect    0.10.2
@angular-devkit/core         7.0.2
@angular-devkit/schematics   7.0.2
@schematics/angular          7.0.2
@schematics/update           0.10.2
rxjs                         6.3.3
typescript                   3.1.3

Now that you have Angular CLI installed on your system, you can use it to generate your Angular app, generate a new angular app.

Create new Angular App

With the Angular CLI, we can create a new project using the following command:

$ ng new my-first-angular-app

At this point you have a working Angular app and your new directory my-first-angular-app structure looks like this:

angular apps project structure image
Angular apps project structure

You can now navigate to the new directory to run:

$ cd my-first-angular-app

Then start the Angular CLI development server to run:

$ ng serve

This will start a local development server that you can now navigate to in your favorite browser at http://localhost:4200/ to see your first angular application in action.

our first angular app image

Angular CLI development server includes Live Reload support, so your browser automatically reloads the application when a source file changes.

Recommended Resources to Learn Angular, Firebase and ionic 4

Leave a Reply

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