Angular Tutorial – Basics of Angular

The main aim of this Angular Tutorial is to provide you with an overview of the Evolution of Angular, Angular project setup using CLI and the building blocks of Angular. If you are new to Angular, then this article helps you to understand it.

First of all, to get started with Angular, you need to have Node.js installed on your computer. Furthermore, Node even helps you to run your application on your local system.

The Ultimate Managed Hosting Platform

Evolution of Angular:

Let’s see the evolution of angular from version 1 (Angular Js) to version 9 (Angular). Here, you can get the overview of major changes and release dates of all versions of Angular.

Angular versions Release Dates
Angular 1 20th October 2010
Angular 2 September 2016
Angular 4 March 2017
Angular 5 Nov 2017
Angular 6 May 2018
Angular 7 Oct 2018
Angular 8 May 2019
Angular 9 Feb 2020

Angular 1 or Angular Js: 

  • Released in 20th October 2010
  • It’s an open source framework built using JavaScript on the base of MVC (model view controller)architure.
  • Aimed to simplify the development and testing process of the web application.

Angular 2 :

  • Released in 2016 September
  • Major change to version 1, a complete rewrite using TypeScrip on the base of component structure.

Angular 4 :

  • Released in 2017 March
  • An enhanced version of Angular 2 
  • It offers better loading speed with less code size with easy bug identification.
  • It made the email validation easier.

Angular 5:

  • Released in 2017 November
  • Latest version was introduced with the new library @angular/common/http for making HTTP requests. Earlier versions were having @angular/http module for the same purpose
  • For better standardization Angular 5 has introduced with new pipes (Currency, date and number)

Angular 6:

  • Released in 2018 May
  • New commands were introduced in this version of Angular for easy upgradation of version to the latest with New Angular Command Line Interface 6
  • Supports multiple form validators.
  • New observable can be created using new function in React Js

Angular 7:

  • Released in 2018 October
  • Updated CLI with prompts to auto complete the commands
  • Minor UI enhancements in Material design
  • Easy ways to create drag & drop functionality and virtual scrolling

Angular 8:

  • Released in 2019 May
  • With an opt-in major feature ivy compiler and option to import lazy routes dynamically, modery javascript differential loading and support to 3.4 version of TypeScript.

Angular 9:

  • Released in 6th Feb 2020
  • Major change is Ivy as a default compiler and runtime. 
  • Improvements for better testing, easy debugging and binding of CSS class and styles.

Node Installation – Angular Tutorial

Even though Node installation is a simple procedure, you have to follow the below given steps to make the process easier and avoid some pitfalls. To install node on you computer, the first and the most basic step is opening the official node website (Click Here) and downloading the installation file by selecting Windows/Mac installer. After downloading the .msi file, double click on it to get started with Node installation and then follow the steps below to complete the installation.

Node Download

After the successful completion of installation process, open ‘cmd’ and run ‘ node -v ‘ to see the installed version of the node.

Now, to set up a project in Angular, you need to install ANGULAR CLI. Here is a step up step process of Angular Project setup.

Angular Project Setup – Angular Tutorial

Step 1: Angular CLI Installation

The installation of Angular CLI starts with opening the terminal and typing the below given command to initialize the setup process.

npm install -g @angular/cli

Step 2: Project Creation

Soon after initializing the setup process, you need to start creating a project using the following command.

ng new angularProject

(Where, Command to create a project in Angular is ‘ng new’  and it is followed by the name of the project)

As soon as you finished entering the command above, press ‘enter’  and it will prompt you with the feature to include in this project, you just go along with the default options and press enter then it starts installing all the dependencies.

With this, a project on the name of “angularProject” will be created.

Step 3: Run the app

Now, to run the app that you have created, open CMD and go top the folder where you installed the app by using ‘cd foldername’ and run it by using ‘ng serve –open’ or ‘ng serve -o’.

‘Ng serve’ runs the server and opens the application in the browser. From now onwards, any changes you made in the project files will be auto reflected in the output right after saving them.

You need to have at the least a basic understanding of the Angular architecture before we discuss the folder structure of an Angular project.

It is essential to read this Angular Tutorial completely to get the overview of the building blocks of Angular which play a significant role in website development.

Angular Architecture – Angular Tutorial

The Angular architecture shows us the building blocks of Angular. So please make sure you understand every building block of Angular that plays a crucial role in application development.

The architecture of Angular is illustrated below:

 

Angular tutorials angular architecture

© Angular.io

Angular Modules:

A group of services, components and directives, which are of a single feature in an application is called a module.

For example,

If you are building a Student Management application and you have included three features like Student Feature, Login Feature, and Reports Feature.

The student feature will deal with the creation/deletion of students, and the Login feature enables the Signup/Sign in functionality and reports feature will give you an option to generate reports.

Now, we have three features here, and we group the components, directives, services, and pipes of an individual feature in a module. So, as we have three features, we create three feature modules.

By default, every angular application has one root module that is ‘appModule’. Based on the size of the application, you will create feature modules and import them into the appModule.

We have core modules to help us to import HTTP service providers, and shared modules contain reusable components, directives that you want to use across your entire application, and a Routing module, which includes all our application routes.

The module comes in handy in code reusability and application maintenance that leads to better app performance.

In app-module you can see the multiple properties of NgModules like declaration, imports, exports, providers and bootstrap.

Angular Directives:

Directives will add custom behavior to your HTML. Also, directives in Angular are classified into three types.

  1. Component
  2. Structural
  3. Attribute

In the next section, you will see the detailed description of the Component with examples. Before that, let’s see the structural and attribute directives.

Structural Directives: These kinds of directives are used to modify the structure of the DOM elements. You can see the examples for a structural directive below.

  1. *ngIf
  2. *ngFor
  3. *ngSwitch

Angular ngIf

 

Attribute Directives:

In contrast to the Structural directives, Attribute directives are used to change the appearance of the HTML elements. The list below features the examples of attribute directive in Angular.

  1. ngStyle
  2. ngClass

Angular attribute directives

Angular Component:

A component is made up of three parts,

1. Template – It represents the view, which is created using HTML.

2. Class – It has a code written in TypeScript, which supports the view. The logic of the view is controlled by the methods & data properties in the class.

3. Metadata: It contains the information that helps angular to decide whether a particular class is an angular component or just a regular class.

By default, every app will have at least one component named App Component.

To create a new component, type the following command in command-line interface.

 ‘ng g c nameOfTheComponent’ 

 

Here, g – Generate ; c – component;

Ex: ng g c home

By running this command, a component on the name of Home will be created. It generates four files, ‘home.component.css,’ ‘home.component.html,’ ‘home.component.spec.ts’, and ‘home.component.ts.’

Angular components

Anytime you create a new component; your application should be aware of it. To do that, you need to include this component in ‘app-module.ts’ file. You can see the syntax below.

Import {HomeComponent} from ‘./home/home.component’

And add,
‘HomeCompent’ in declaration array under ‘@Ngmodule’.

Home.component.css – You can write all the styles related to this particular component.

Home.component.html – It represents the view of the Home component.

Angular html component

You know that we have a default component call ‘App Component’. In app-component, you need to include the newly created home component.

To include, use the syntax below.

Home.component.ts: It contains the code which helps the component to control its behavior.

Angular Component ts

Home.component.spec.ts : spec.ts helps you do unit testing, and every ts file will have spec.ts file. To run the tests, you need to use Jasmin (A framework that allows creating the tests) and Karma (Its a task runner, and it renders our tasks in the browser).

Angular component spec ts

Angular Services:

A service is a class in Angular that helps to reuse the data or logic across multiple components. Another thing of note is that using a service ensures not to have duplicate coding blocks in your application. Also, when you write the logic in service instead of writing it in a component, you can integrate the service across multiple components wherever required.

In order to create a service class, we use @Injectable(), decorator. For importing the other dependencies, we have metadata, which allows injecting all the dependencies.

To know the real time usage of a service with example check my article on Services in Angular

 

 Angular Routing:

Routing helps to load a respective view when a user clicks on any link in the menu. By using routes, you need to integrate the component file which needs to be loaded and displayed in the browser.

You have ‘router-outlet’ to display the view and you need to place inside app-component.html so that all the routed views will be displayed in place of router-outlet.

Angular Router Outlet

In the screenshot, you can see app.component.html, where a simple HTML nav code followed by a router-outlet (19th line). That navbar code displays the navigation in every page, and will load the respective component based on user clicks.

Angular routing module

To start configuring the routes, first of all, you need to create components on the name of the pages you have on the menu. Let’s say you have two menu links ‘Home’ and ‘Features’ on your website and you need to create two components: one is on the name ‘Home’, and the other is on the name of ‘Features’ using “ng g component NameOfTheComponet” syntax.

After creating those two components, you need to import them in app.routing.ts. For syntax, check the above screenshot (3rd & 4th line). Then, see the (9th & 10th line) inside Routes array; you should add those components by declaring the path with component name.

Now, go to your app.component.html and add the path to the menu items. In app.component.html screenshot, which is right above the app.module.ts I used ‘routeLink’ to configure the respective paths. For Home, Feature links in the nav menu, I have integrated the corresponding components called Home and features.

Whenever the user clicks on the Home link, the code which is in the ‘home.component.html’ will get loaded.

Pipes:

Pipes help us displaying the data in the way we want. Irrespective of the format of data you have stored in a variable you can display it in a user-friendly format by applying the pipe.

Eg:

Entered Name is : {{enteredName | uppercase}}

In the above example, you can see the default pipe “uppercase” is applied to enteredName variable by using “|” symbol. Now, the data stored in enteredName will be displayed in CAPITAL letters.

Angular pipes

As shown above you have built-in pipes that we can directly use. It is possible that you can even create a custom pipe as well in case of any custom requirement. Use the syntax below to create a custom pipe.

 
Syntax:

Ng generate pipe NameofThePipe

Hope you find this Angular Tutorial helpful. You can write your feedback in the comment section below.

Angular Tutorials FAQs

What is Angular?

Angular is a javascript framework that helps to build a robust single page application. Having a more comprehensive community support Angular is a go-to framework for may developers to build web and mobile apps.

What are the prerequisites for learning Angular?

To get started with angular, one must have command in javascript and also good knowledge in HTML, CSS will be an additional benefit.

Why should you learn Angular?

Programs always love to achieve output with minimal coding. With angular you can build high-level applications with less coding. Angular applications are even easy to maintain.

Check my article on Data Binding in Angular.

12 comments on “Angular Tutorial – Basics of Angular

  1. I found this amazing article when I was looking for information on Angular. This article provided a clear understanding of installation and a detailed overview of all the building blocks of Angular.
    I can confidently say that this is one of the best articles I found on this topic.

  2. Hi! This post could not be written any better! Reading this post reminds me of
    my previous room mate! He always kept talking about this.
    I will forward this article to him. Fairly certain he will have
    a good read. Thank you for sharing!

  3. Hey I am so grateful I found your web site, I really found you by error, while I was
    searching on Aol for something else, Nonetheless I am here
    now and would just like to say cheers for a remarkable post and a all round interesting blog (I also love the theme/design),
    I don’t have time to browse it all at the moment but I have bookmarked it and also
    added your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up
    the great b.

  4. Just want to say your article is as astounding.

    The clarity in your post is just nice and i could assume you’re an expert on this subject.
    Well with your permission allow me to grab your RSS feed to
    keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

Leave a Reply

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

Want to learn Facebook Ads for FREE?Subscribe now to get FREE access to Facebook Ads Course