Why I Chose My Journey To Angular

Make your mind an Angular Library

Episode 1

Photo by Dayne Topkin on Unsplash

Web developers use many javascript frameworks and libraries to build web applications. I have chosen angular as my choice which offers a full solution for developing and deploying a complete web application. This is my first episode on My Journey to Angular. Angular is a feature complete framework from which we can perform

  • generation of a single-page web app using Angular CLI
  • creation a web app that contains a set of components which can communicate with each other
  • client-side navigation using router
  • data communication via replacing services and classes
  • state management via injectable singleton services

Development in Typescript and !Javascript

You may be wondering, why is not developing in Javascript. Development in Javascript is not overly productive. It doesn’t have the restrictions on type of a variable which guess the type of a variable. This will lower the productivity of applications.

Typescript is an open source language which is a superset of Javascript where it follows the ECMAScript specifications like types, interfaces, class members, decorators. Angular applications are build on this. As Typescript is strongly typed, it acts good in inline documentation, syntax checking, code navigation and advanced refactoring. Typescript transpiles to Javascript before the browser execution. Javascript does error caption on runtime only but Typescript is not like that, it won’t even compile code if any errors.

Anatomy of an Angular Application

Angular is a component based framework. It is a set of components and services. Every angular app has one root component, it may have child components and each child component may have its own children. Services provide the functionality across these components. The root component is specified in the bootstrap property.

Main Artifacts of An Angular Application

1. Component

A component can be created using command

ng generate component or ng g c

Each component in an Angular app will contain the template, class and meta data.

Creating component with inline html and inline css

Template

Template is of HTML which defines the view for the application.The template can have the inline HTML and the styles property as inline css. But when the templates are getting complex we have to face lot of issues in automating format, syntax checking. So it is better to use a linked template with html in its own file and css file for that linked html file.

creating component with linked html and linked css file

Class

Class which contains the code associated with the view. It contains the data elements which are used in the view and methods which performs actions on the view. Class will have an empty constructor when it was generated and it may implement the OnInit which is one of the lifecycle interface. when the component implemented the OnInit then it should implement the ngOnInit() which will be invoked after the code in the constructor.

Metadata

Here metadata is the additional information of the class. In angular the class become an angular component when we give the @Component decorator which adds metadata to the class. It provides the information to angular that how to instantiate the component, construct the view and interact with the component.

Here, the selector defines the component directive name. Other components can include a specific component template in their templates using the selector directive name as an html tag. In this instance we are using a component as a directive into another.

Ok… We have discussed about angular components but, how these components are organised in the application. Here the module comes into play.

2. Module

An angular module is a container for a group of related components, services, directives and pipes. It is a class annotated with the @NgModule() decorator to make it as an angular module. Each angular application has at least one angular module which is called root angular module. It can have any other additional angular modules like feature modules that consolidate the component for particular feature in an application.

Module can be create in Angular app using

ng generate module or ng g m

Angular module

Angular module has declarations, imports, bootstrap, entryComponents, providers etc.

Components of the application that can be exposed to the Angular module are declared in the declarations array of Angular module. A component can be declared only once. External angular modules which perform the functions of Angular framework are imported according to the need under the imports array. The bootstrap array defines the start up(root) component of the application.

Angular module performs functions of organising the application into cohesive blocks of functionality, providing boundaries within the application, providing a template resolution environment. When compiling, the angular compiler sees a directive then it will look into angular module for the definition.

There can be feature modules in angular in addition to root module, in the sense of adding features to your application. These feature modules are differ from root module as they can’t have the bootstrap property in @NgModule(). Feature modules can be imported by other modules.

When we are building our components and when they are let to communicate then there is a player come into play “Service”.

Normally when building an angular application developers maintain their data handling in an injectable service rather than in a component.

3. Service

common notation for generating a service

ng generate service or ng g s

Root injector

Service is a class with a focused purpose. We can notice, @Injectable() decorator is annotated in the generated service. This Injectable() makes the service to inject into any components which needs it. The injector can be a root injector or component injector. Registering a service with root injector, is available for all components in an Angular application. Else it is available for its component and that component’s child or nested components. A service includes functions which are independent from any specific component.

We do the dependency injection(making an instance of a service) in needed component’s constructor with a private access modifier parameter.

We have seen how an angular application works based on its artifacts. Service is used to communicate within components. But, Do you have any idea that how a component communicate with its template?

There is an important mechanism called “Data Binding” in Angular which sync the communication between the component’s class and its template.

Yes, in my next episode I will play you Data Binding. See you !!!