Getting started with angular

Hello there !

Today we will be looking at angular 4 & what makes it stand out in a vast community of web frameworks.I would be organizing this tutorial in 2 sections.
1.Introduction
2.Overview of Angular 4

So let’s get started !

Introduction

Angular is successor to the popular framework called angularJS. Previously it was called angular2 but recently it has started using Semver i.e.Semantic Versioning , that’s why all the packages have been upgraded to version 4.x.Thus the name angular 4. Though it will be only called Angular.

Overview of Angular

Angular mainly deals with 5 aspects.
1.Modules
2.Components
3.Services
4.Directives
5.Pipes

1.Angular Modules

These are called ngModules. Basically ngModules help organize your application into cohesive blocks of code i.e. each ngModule will contain all the components, services, directives, pipes and submodules for implementing the given feature.
for eg. If I am developing an application where employee & department interaction takes place then I will create following modules in my application.

1.AppModule (this will be the root module where all the sub-modules will reside)
2.EmployeeModule(Feature Module : this module will contain all employee related features)
3.DepartmentModule(Feature Module : this module will contain all department related features)

2.Components

Components are core building block of angular. Components can contain templates, stylesheets and other metadata attached to them.
A component can use a service to process or request data from given source, it can use pipes to filter/transform the data as per need and can use a directive to manipulate the rendering of the template.

3.Services
Services interact with api server and fetch data from the server or they can be used to separate some processing from component and store data globally.
An angular service may use HTTP client to interact with database server, LocalStorage to setup and destroy cookies and cached data. Services need to be provided in ngModule to instantiate them and can be injected in the constructor of the component/service in order to use it. To put it simply, once injected in the component, this service will return the data to component which can be used by component to display in the template or any other requirement.

4.Directives

Angular Directives are of two types.
1.Structural (those who manipulate the rendering of the template)
2.Behavioural (those who can offer a specific behaviour)

Structural directives help in manipulating the template flow. They are:
*ngIf : for evaluating the condition and render the element if its true.
*ngFor : for repeating the DOM element over an array
*ngSwitch : renders the element when certain case evaluates to be true.
We will look into directives and pipes more deeply in the next post.

Pipes

Pipes in angular offer transformation logic i.e. filtering the data, formatting the date, changing the case of string.
Pipes are also injectable and need to be injected in declarations:[] in ngModule Just like components. Pipes can take values as parameters and transform them according to the need.
For eg. *ngFor doesn’t iterate over objects. So to use *ngFor on object you can use a pipe to transform that object into array and return it to the template.

That’s it folks !
Hope You Liked The Post.
Stay tuned for next post as we will be looking at setting up an angular application from the scratch.
Cheers !