Angular 5 Tutorial: Step by Step Guide - WAY2IT

Latest Post :

Angular 5 Tutorial: Step by Step Guide


  • Angular is a most popular web development framework for developing mobile apps as well as desktop applications.
  • Angular is written in TypeScript and so it comes with all the capabilities that typescript offers.
  • Angular is an open source framework written and maintained by angular team at Google and the Father of Angular is Misko Hevery.

Keep and try to upgrading Angular, the Angular’s community has announced Angular releases in every 6 months and its looks like :
  • Angular 5 is in Oct 2017
  • Angular 6 is in Mar 2018 and
  • Angular 7 is in Oct 2018
  • And so on


📌 Knowledge Requirements ?
  • NO Angular 1 or Angular 2 knowledge is required!
  • Basic HTML, CSS and JavaScript knowledge is required.
  • Prior TypeScript knowledge also helps.


📌 What is TypeScript?
  • TypeScript is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript.
  • The TypeScript has some additional features like static typing and class-based object-oriented programming, automatic assignment of constructor parameters and assigned null values and so on.
  • TypeScript may be used to develop JavaScript applications for both client-side and server-side (Node.js) execution. 

📌 What Is Angular Prerequisites ?
  • You must to have Node.js installed.
  • You must to have NPM (Node Package Manager) installed.

📌 How to check that you have node and npm installed or not ?
In cmd type following command :
  • node -v
  • npm -v


📌 We need to setup our machine local environments which are the following.

1] node.js >= 6.9.x

(Installation in windows : npm install -g node-windows)

(Installation in Ubuntu  : 1st command = sudo apt-get update

2nd command = sudo apt-get install nodejs)


2] npm >= 3.x.x

(Installation in Windows = npm install npm@latest -g)

(Installation in Ubuntu = sudo apt-get install npm)


3] Visual Studio Code / Atom / Sublime Text / Angular CLI



📌 Angular CLI ?
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

npm install -g @angular/cli


📌 Boilerplate in angular ?
It's like a skeleton or architecture for your angular application.
Which contain :
  • files (markup , script , style , assets)
  • Build Config (grunt , gulp , etc..)
  • Dependency Definition (npm , jspm , bower , etc..)
  • Documentation on how to use the boilerplate

📌 Component in angular consist of three files  :
  • Typescript file (View related logic)
  • HTML File (View Definition)
  • CSS File (Style Information)

📌 DOM ?
The way document content is accessed & modified is called Document Object Model.


📌 Difference between ng serve and ng build ?
  • ng build : this command is intentionally for building the apps & deploying the build artefacts. (server side)
  • ng serve : this command is intentionally for fast , local , & iterative developments and also for builds , watches & serves the application from local CLI development server.

📌 Generating and serving an Angular project via a development server Create and run a new project:
  • ng new FirstApp // will create new angular project folder
  • cd FirstApp // Now navigate or follow that folder
  • ng serve –open // will compile that project folder & automatically open your default browser here you will see output of your application/project (Navigate to default url http://localhost:4200/)

  • Another method to run app :
  • ng serve –host 0.0.0.0 –port 4201 --open (customized ip and port)
  • ng serve –port 4300 --open (manual way to set the port)

⚡ For more details check out following links :