Overview of Angular

What is Angular?
angular definition

Angular is an open-source, client side/ front-end web development framework based on  Microsoft’s TypeScript. It is one of the most popular JavaScript frameworks that is mainly developed and  maintained by Google.  it easy to build applications with in web/mobile/desktop using Angular. Angular started as a SPA (Single-Page-Application) framework and now supports dynamic content based on different users through dependency injection. YouTubeTV is the most popular company that uses Angular. It integrates powerful features like

 

• 1.   declarative templates
• 2.   an end to end tooling
• 3.   dependency injection
• 4.   Modular approach
• 5.   Re-usable code
• 6.   Quick and easy development
• 7.   Unit testing
• 8.   Single Page Application development
• 9.   And various other best practices that smoothens the development path.

 

Difference between AngularJS and Angular

 The first version of Angular was released in the year of 2010. Some people call this as AngularJS and some people call as Angular 1. But it is officially named as AngularJS.The Angular 2 was released in the year of 2016. The important point to note is that Angular 2 is not a simple upgrade of AngularJS. Angular 2 is completely rewritten from scratch and as a result, the ways we write in AngularJS and Angular 2 are completely different. The differences between them are given below :

 

AngularJS	Angular
Based on JavaScript	Based on TypeScript
Based on the MVC design pattern	Based on components, modules, and directives
Based on controllers and the View communicates using $scope	controller and $scope are completely gone
No support for mobile app	Supports mobile
Can’t build SEO friendly applications	SEO friendly applications can be easily created
Dependency Injection tokens can only be strings. Also, only the injector is present.	DI Tokens can be of any type, for example, strings or class. Angular follows a tree-hierarchy for injectors starting with the root injector, and a nozzle for each component henceforth.
No support or backward compatibility	Backward compatibility can be done without issues. Also, there is a lot of support documentation for the same.
Uses $routeprovider.when() for routing	Routing is done using @RouteConfig[()]
Requires specific ng directive for each of property, event, and image	For event binding, () is used and for image or property binding [] is used
No facility of Unit testing	Greater facility of Unit testing
Used ng-directive for binding an event, or a property	Used Expression for binding an event, or a property. property binding is done using "[ ]" attribute and event binding is done using "( )" attribute

Angular’s History

 

Time	Version
2010	Angular Js
2016	Angular 2
2016 Dec	Angular 4
2017 Nov	Angular 5
2018 May	Angular 6
2018 October	Angular 7
2019 May	Angular 8
2020 February	Angular 9
2020 June	Angular 10

Angular Version Change

Semantic Versioning:

Version:1.2.3

 

Major            Minor               Fix(Patch)

For example, version 7.2.11 indicates major version 7, minor version 2, and patch level 11.

Pacth: Increase when any bug fixes.

Minor : Increases when added feature that does not break any functionalities.

Major : Increases when break any functionality.

Advantages of Angular

A few of the major advantages of using Angular framework are listed below:

• It supports two-way data-binding
• It follows MVC pattern architecture
• It supports static template and Angular template
• You can add a custom directive
• It also supports RESTfull services
• Validations are supported
• Client and server communication is facilitated
• Support for dependency injection
• Has strong features like Event Handlers, Animation, etc.
• We can add custom animations, directives, and services.

What is Angular mainly used for?

Angular is typically used for the development of SPA which stands for Single Page Applications. Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI,  Angular is regarded as a full-fledged web framework.

In which scenario Angular is not a right choice ?

Angular may not be the right fit in some scenario, For example, for short-term projects or light-weight websites that have more static content do not require a complex framework like Angular. Same way, apps that have a microservice design approach will find too many unused features if they use Angular since it is a complete solution. There is less flexibility with the developer to choose additional tools.

Development Environment for Angular

1.   Node

2.   Npm

3.   Angular CLI

4.   Text Editro (VS Code)

Check Development Environment for Angular

To check Development Environment for Angular  , check version of Node,NPM and angularcli.

Command for Check node version in cmd

Node –v

Command for Check npm version in cmd       

 Npm –v

Command for Check angular cli version in cmd

ng  --v

Transpiling in Angular

Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler). Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.

 

Angular CLI

CLI  stand for Command Line Interface Angular CLI(Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. You need to install using any one of the  below npm command.

npm install @angular/cli@latest

npm install @angular/cli@9

Below are the list of few commands, which will come handy while creating angular projects

                     i.        Creating New Project: ng new

                    ii.        Generating Components, Directives & Services: ng generate/g The different types of commands would be,

§  ng generate class my-new-class: add a class to your application

§  ng generate component my-new-component: add a component to your application

§  ng generate directive my-new-directive: add a directive to your application

§  ng generate enum my-new-enum: add an enum to your application

§  ng generate module my-new-module: add a module to your application

§  ng generate pipe my-new-pipe: add a pipe to your application

§  ng generate service my-new-service: add a service to your application

                   iii.        Running the Project: ng serve

                  iv.        Running the Project and open in browser : ng serve –o

                   v.        Running the Project and open in browser with port number: ng serve --port 4563 -o

Back to Blogs