Angular 8 Tutorial

Introduction

learn to build web apps using Angular 8




What is Angular 8

Angular is an open source web development framework written and maintained by angular team at Google .

In order to embrace angular's capabilities better, let's look at some of the important points about angular.

  1. Angular 8 or simply Angular is the next logical version of Angular 2 series but it has nothing in common with Angular 1 also called AngularJS
  2. Angular is written in TypeScript and so it comes with all the capabilities that typescript offers
  3. Angular is also utilized in the cross platform mobile development framework called IONIC and so it's not limited to web apps only
  4. To keep upgrading Angular , angular community has announced angular releases every 6 months. Angular 9 is releasing in october 2019.

About this Tutorial

In this Angular 8 tutorial , we'll learn Angular 8 in the following ways:

  1. by understanding fundamental building blocks of angular including modules , components , services , routing , pipes etc.
  2. by going through well commented code examples
  3. and finally we'll also be creating a web application from scrach in Angular

Prerequisites

In order to follow this angular tutorial , you need to setup your local environment which needs the following installed on your machine.

  • node.js >= 6.9.x
  • npm >= 3.x.x
  • ide , you can choose from Sublime Text , Visual Studio Code or Atom
To check the version of node or npm , you can use the following commands in your terminal:
							
#To check the node version 
node -v 

#To check the npm version 
npm -v
							
						

Installing @angular/cli

@angular/cli is an npm package and it's an amazing tool which helps with different repetitive operations when creating and working with Angular apps. You can install @angular/cli by typing the following command in your terminal:

							
npm install @angular/cli -g
							
						

Once @angular/cli is installed , we've setup the environment we need to start creating our Angular app , so now we're all set to create our angular app. In this tutorial , we'll be creating an angular app with the following plot.

What shall we create?

We're going to create a basic angular app called InventionsHub which simply lists different inventions along with some useful information about those inventions. We'll utilize many angular concepts like modules , components , services , routing , pipes etc while creating our project.
So let's get started.

Create your Angular App

In order to create your app , first switch to the directory where you would like to start your angular project by using cd command

							
cd ~/angular/projects
							
						

now use the @angular/cli tool's ng new to create a new angular app as follows:
							
ng new InventionsHub
							
						

Great!, you just created your app. What ng new command did is that it created a bare bones angular app for you creating and placing initial files and folders at right place. Before we dive deeper into the code structure , first lets see how our creation looks like.

Serve your app

To serve your app , use another command ng serve offered by @angular/cli, as follows:

							
ng serve
							
						

this command lifts your app on your local machine at http://localhost:4200 now go to your browser at the above address and you should see your app in action. following is a screenshot of how it looks like:
Ng serve successfull

Summary

In this first part of the angular tutorial , we learned many interesting things about the angular framework like ::

  1. What is Angular 8
  2. How to get started with Angular 8
  3. What is @angular/cli
And we also created our InventionsHub app which we will be using to grasp different building blocks of angular in the upcoming tutorials. Hope you're enjoying learning Angular.