In the last few years, Single page application(SPAs) development increases exponentially. And now most of the company is building or trying to build SPAs for their product. So with the rise of the SPAs, web developers started looking on the tools, libraries and framework to build robust SPAs. There are lots of libraries and frameworks available by using which you can build SPAs. Angular 7 is one of them and web developers and companies using this to build their SPAs.

According to StackOverflow survey, Angular is one of the most famous frameworks among the developers.

In this article, we will learn about the angular 7 and its features and how to use the angular CLI to build the modern application from scratch for the web, mobile or desktop.

This is a very long article, so if you have time and patience then only continue otherwise there are lots of other things which you can do at this time. 🙂

Introduction

Angular is an open-source web application framework led by Google. Angular is based on the typescript.

The latest version of the angular at the time of writing this article is angular 7 and angular 8 is about to come in a few years.

Before angular 7, there four more versions of the angular available: angular 2, angular 4, angular 5 and Angular 6. Each version contains some enhancement and new features which makes this framework awesome.

Here you must need to understand that angular and angularjs both are two different things and they have lots of chnages in terms of their implementations.

Why Should You Use Angular 7

There are lots of factors which force you to use angular for your next awesome web applications. One of the main reason for using this is it is backed by Google and they use it in most of their products.

Now, most of you debate that if Google uses it then it is not necessary that we also use this. Yes, You are right then I am also telling you others feature that makes it a perfect framework to build a modern web application for the website, mobile and desktop.

  • Angular minimise the need to write code
  • It has a very large community and big companies behind it
  • supports the most famous MVC architecture
  • It is based on the modular structure
  • It has two-way data binding which makes your tasks much easier
  • It also has dependency injection which forces you to change your components if you make any changes in the dependency.

What’s New In Angular 7

Every version of the angular introduces new features and enhancement. And the same thing is also applicable for the angular 7.

Following are the list of new features which introduced into angular 7

  • It supports the latest release of TypeScript 3.1
  • Improvement in the CLI
  • Supports Virtual scrolling
  • Introduced the DRAG and DROP feature
  • Increate in the application performance
  • and lots of minors enhancement
image from angularminds.com

Prerequisites

You are still reading this article means you are interested to learn the angular. So before moving further with this article, make sure you have basic knowledge about the following things

  • HTML, CSS, Javascript
  • npm modules
  • Basic of TypeScript
  • basic knowledge about node.js and how to install it
  • how to use IDE for the development

Install Angular CLI

Angular CLI is one of those features which make the angular app development much easier and easy to maintain.

Most of the angular development done by the angular CLI. It helps to create new modules, components, services, directories and their respective configuration and initialization in the app.

To install angular CLI globally, run the below command in the terminal

npm install -g @angular/cli

After successful installation, you can use the CLI by using ng before any command.

Create Angular 7 App

To create a new angular 7 app, you can run the below command

ng new your-project-name

Above command create a new directory with the same name which you provide in the place of your-project-name.

Understand the Angular 7 Project Structure

After creating the new angular 7 app now let’s understand the project structure of the app.

Angular 7 App directory structure

The newly created angular 7 app contains the above file including the node_modules directory which is not listed in the image.

You can see there are lots of files in the app but for the beginners like you, most of the files are not really useful to you. So you only concentrate on the src directory of the app.

The src directory contains three other directory app, assets, environments along with favicon, index.html and other tsconfig files.

The app directory contains all the modules, component, services, pipe, guard and other files which will be used to build the angular project. We will learn about angular modules, components, services, routing, pipes and guard in a while. Keep reading this article. 🙂

The assets directory contains the static files likes images and other things which we will use in the angular app.

In the environments directory, we will define the server environments related variables.

The index.html is the root file of the angular app which loads all other modules and component of the angular app.

Rest of the files are for test and other purposes. If you have any doubt regarding those files then comment in the comment box.

Till now we learned the project structure of the basic angular app. Now it is time to learn about some other things which we will use frequently in building any angular app.

What is Module In Angular 7

Every angular app has at least one angular module which is responsible for importing exporting other components and modules in the app.

A basic angular module contains the components, services, pipes and guards depending upon the requirements of the application.

For this article, app.module.ts is the root module of the application which imports other components of the application. The app.module.ts file looks like below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

A ngModule is defined by a class decorated with @NgModule(). The NgModule decorator is a function which takes a single object whose properties describe the module.

The most important properties of the modules are.

  • declarations: It is a group of components which registered here by default whenever you create a new component using the angular CLI.
  • imports: It is a group of other modules which is necessary for the application to run. Here we import all those modules like HTTP module, browser Module, FORMS module etc.
  • providers: It contains the array of the services which need to be used across all the app.
  • bootstrap: This contains the main component of the app which initialize the angular app.

What is Component In Angular 7

In a simple word, an angular component is a part of the web application screen of the app. It is based upon the MVC architecture. Each component contains four files.

  • TypeScript File: In this file, we write all the logic of that component. and then render the things on the browser according to that. In this article, In the src/app directory can find the file which names as app.component.ts
  • HTML file: This file is responsible for what end user will see in their browser.
  • CSS file: This file contains all the styling code related to that component.
  • Testing File: In this file, we write all the unit testing things for that component.

Every component of the angular app contains the @component decorator which has few meta properties who tells about the component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

In every angular component, you will see the above properties. The selector tells the name of the component. The templateUrl tells which HTML file needs to be imported for this component and the styleUrls provide the information of the styling file of the component.

This component can be called in your HTML code just like any standard HTML tag, i.e:

<app-root></app-root>

To generate a component with the Angular CLI just run the following command:

ng generate component component-name

or

ng g c component-name

What is Service In Angular 7

Angular Components doesn’t know how to save and fetch data. They only know how to present the data. To fetch/save the data they need something from which they can communicate. The medium through which angular components fetch/save data is known as an angular service.

An angular service is a singleton object which gets initiated only once during the lifecycle of the angular app.

An angular services are a great way to share the information among other components that don’t know each others.

You can easily create angular service using the angular cli command

ng generate service service-name

How Templating works in Angular 7

In a very simple term, angular templates is a collection of the different components.

Suppose, you are going to make an app which have four section header, content,sidebar and footer of the app. then you have to first create these four components into your app. After creating the components, you can combine them together to build a angular template.

Below code clear you doubt about the templating in angular

<app-header></app-header>
<section>
    <app-content></app-content>
    <app-sidebar></app-sidebar>
</section>
<app-footer></app-footer>

Each components is responsible for dispalying their data only. This makes our templating more clear and clearn and easy to maintain when our app will grow in future.

If we have to change anything in the template or need to add any new things then we can know easily where to go and perform the action.

What is Routing in Angular 7

In simple word, angular routing is to navigate through your app without reloading the whole page.

Angular has npm package called @angular/router. It provides a complete library to have multiple router outlet and easy access to router parameters and other things.

The Angular router is a core part of the Angular platform. It allows navigation between multiple views of the angular app.

Angular routing is a very vast topic and we need an extraa article for that.

For now you can refer the angular official routing guide. If you still have any doubt them comment your doubt in the comment section.

Conclusion

As you see angular is a very powerful frontend framework. In this article, we only learn the basic things about the angular framework and how to use them.

I will suggest you to create one basic angular app and try to learn all stuff by yourself.

Hope you like this article and support by sharing this article. 🙂 If you have any doubt suggestions then comment in the comment box.

Pin It