Angular 7 Tutorial

Angular 7 is an open source JavaScript framework for building web applications and apps in JavaScript, html, and Typescript which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn have features such as auto-complete, navigation, toolbar, menus, etc. The code is written in Typescript, which compiles to JavaScript and displays the same in the browser.

Why to Learn Angular 7?

Angular 7 is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain. I will list down some of the key advantages of learning Angular 7:

• Angular is the most stable and most popular javascript based platform now-a-days.
• Angular development is a complete suite for an application development and you can have following roles after learning Angular in a company.
  • Web developer
  • Web app developer
  • UI developer
  • UX developer
  • Front-end developer
  • JavaScript developer

Applications of Angular 7

As mentioned before, Angular 7 is one of the most widely used language over the web. I’m going to list few of them here:

• Google Supported Community – Google actively supports Angular and its development. Angular is used in various Google Apps.
• POJO based development – Angular heavily used Plain Old JavaScript Object and it helps in learning Angular in an easier way.
• Declarative User Interface – Angular uses HTML as view language and extends its functionality. It helps in handling UI vs code differentiation and UI is loosely coupled with code.
• Typescript – Typescript is super set of javascript and is easy to debug. It is highly secure and is object oriented.
• Modular Structure – Angular development is highly modular, is component based and is highly maintainable.
• Multi-platform support – Angular code works well on all platforms without much change in code.

Learning Angular: What is Angular?

Angular is a platform for building mobile and desktop web applications. It has a big community of millions of developers who choose Angular to build compelling user interfaces.

Angular is a JavaScript open-source front-end web application framework. It is primarily sustained by Google together with an extended community of people and companies. Angular solves many of the challenges faced when developing single page, cross platform, performant applications. It’s fully extensible and works very well with other libraries.

My goal in this Angular real world example tutorial is to provide a complete guide for you to learn Angular step by step. We will start explaining the why’s and basic concepts and then continue exploring more advanced notions.

We want to help beginners through their first steps on the Angular world. As developers, we know that starting with a new technology can sometimes be a bit frustrating so want to help here. We will learn enough core Angular to get started and gain confidence that we can build any kind of app with Angular. We will be covering a lot of ground at an introductory level, but also, you will find plenty of references to topics with greater depth.

To help you through your Angular learning process, we created an Angular app with a question and answer format (Q&A), where users will be able to ask, answer and vote questions. Also, we will explain how to connect this app with a remote API to handle data integration. So, in this complete tutorial you will learn all the concepts needed to create your first angular application.

You can download all the source code of this angular free template by clicking the GET THE CODE button from above. Also, we published an online demo of the app we are going to build in this Getting Started with Angular guide.

Our journey with Angular

We began testing and experimenting with the very first release of Angular 2.0.0-beta.0 on december 2015 with hopes of finding a framework that was clearly better than its predecessor (Angular 1.x also know as AngularJS).

I’m going to be completely honest with you here, we almost give up with all the inconsistency, breaking changes and a sort of identity crisis that happened in the middle of the Angular 2+ development.

It was a long way until Angular reached a solid milestone with Universal (server-side rendering), ahead-of-time compilation (AOT), lazy loading and a solid bundling config working together nicely. Back in those years it was not easy to create a production ready angular application. 

Being working, using and trying things out with Angular from the very beginning made us really understand the way it was designed and how it evolved. We were witnesses of the constant improvements and saw how they were all aligned to one simple yet important goal: “Creating an app wit Angular should be easy”.

As I mentioned before, for some time during the process, it wasn’t. Now I can tell you, Angular is a super solid and stable framework you will love to work with. Current versions of Angular had evolved to the point where you will be quickly impressed.

Angular is a great tool that will:

• Enable you to create software quicker and with less effort
• Result in a more maintainable software
• Encourage good programming practices and design patterns like MVC
• Allow you to collaborate easier with other people
• Allow you to become proficient in a reasonable time
• Address problems that may arise in your software architecture such as Dependency Injection, DRY (Don’t Repeat Yourself), etc.

Angular for beginners: AngularJS vs Angular 2 vs Angular 10+

Differences between Angular versions

When it all started, back in 2010, this framework was called AngularJS, and alludes to what we now know as Angular 1.x. Then in 2016, Angular 2 arrived as a complete rewrite of the framework, improving from lessons learned and promising performance improvements, and a more scalable and more modern framework.

AngularJS was completely based on controllers and the view communicates using $scope whereas Angular 2 is 100% a component-based approach. In Angular 2, we don’t have anymore the controllers and $scope. Components are the building blocks of an Angular 2 app. We will see the benefits of this change in a few minutes.

The first version of Angular was named Angular 2. Later on, it was renamed to “Angular”. Between Angular 2 and Angular 10 (the current latest stable version) there was Angular 4 (released early 2017), Angular 5 (released late 2017), Angular 6 (released early 2018), Angular 7 (released late 2018), Angular 8 (released mid 2019), Angular 9 (released early 2020). Angular 10 was released on June 2020. All the information related to versions can be found on the CHANGELOG.

Don’t freak out will all these versions. Because all versions from Angular 2 to Angular 10 are the same framework, they share the same core but they differ in lots of amazing improvements!

From now on, every time we use the term Angular we are referring to the latest version of the framework that currently is Angular 10.

Main differences between AngularJS and Angular:

• Angular is a complete rewrite of AngularJS.
• An Angular application and its architecture are different from AngularJS. The main building elements for Angular are modules, components, templates, metadata, data binding, directives, services and dependency injection.
• Angular does not have a “scope” concept or controllers, instead, it uses a component hierarchy as its main architecture.
• Angular follows a modularity concept. Similar functionalities are kept together inside modules. This gives Angular an optimized lighter core.
• The controller concept, which was present in AngularJS, was removed from Angular 2 and above which are component based UI. This help developers divide applications in components with desired features. These helped improve the flexibility and reusability compared to AngularJS.
• Angular expression syntax is focused on “[ ]” for property binding, and “( )” for event binding.
• With AngularJS, building a search engine (SEO) friendly Single Page Application was a major difficulty. But this bottleneck was eliminated with Angular 2 by enabling application rendering in the server. These tasks are possible thanks to the Angular Universal module.

Angular recommends using the TypeScript language, which introduces these features:

• Static Typing
• Object Oriented Programming based on classes
• Support reactive programming using RxJS

On top of TypeScript features, Angular also includes the benefits taken from ES6:

• For/Of loops
• Improved dependency injection
• Iterators
• Reflection
• Dynamic loading
• Asynchronous template compilation
• Simpler Routing

From Angular 2 to Angular 4

There were some major changes, but mostly on the project structure with lots of refactors that made the framework more stable.

• Smaller and faster. The upgrade from 2.0 to 4.0 has reduced the bundled file size by 60% while also improving the applications speed.
• Angular 4 is compatible with newer versions of TypeScript 2.1 and TypeScript 2.2.
• Angular Universal: The vast majority of the Angular Universal code has been merged into Angular core.
• Animation Package: Animations taken from the Angular core and set within their own package. Meaning that if you don’t use animations, the excess code won’t end up in your app.

From Angular 5 to Angular 7

Angular 6 was the first release of Angular that unifies the versions of Framework, Material and CLI. This change was made to clarify cross compatibility.

Angular 7 was full of new features, bug fixes, performance improvements, and some code deprecation as a clean up of the refactors from old versions.

• Optimizations to the build process that reduces the application size by removing unnecessary code.
• Material Design components with server-side rendering.
• Angular Universal improvements for code allocation between the server and client-side versions of the application.
• Lots of improvements in the Angular CLI
• Smaller bundle sizes
• Improved compiler that supports incremental compilation meaning faster rebuilds.
• RxJS (reactive programming library) has been updated to version 6.x or later.
• Angular now requires TypeScript 3.x

From Angular 8 to Angular 10+

Angular 8 was a release that spanned the entire platform, including the framework, Angular Material, and the CLI. This release improved application startup time on modern browsers. Also it changed the route configurations to use dynamic imports in favour of lazy loading.

Angular 9 was very expected by the community because it introduced the Ivy compiler and runtime. Ivy is the name for Angular’s next-generation compilation and rendering pipeline. With this release, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.

The Ivy compiler offers the following advantages:

• Smaller bundle sizes
• Faster testing
• Better debugging
• Improved CSS class and style binding
• Improved type checking
• Improved build errors
• Improved build times, enabling AOT on by default
• Improved Internationalization

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

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.

Understand the Angular 7 Project Structure

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

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.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.

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 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.

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.

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

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.