Getting Started with Angular

Angular is a full flegged javascript front-end framework used to create single-page applications like gmail, upwork, nike and forbes among others are built using angular. Now there is a great demand for angular developers in the market today.

All of you use mobile and web applications be it from social media to health care, e-commerce and net banking. These apps are used by billions of people across the globe. Now the main reason we use these apps is that they offer seamless user experience and interface. But how are they developed to provide such relaiability. On of the frameworks that is widely used to build such robust apps is angular.

Why Angular?

Now javascript is the most commonly used client-side scripting language. It’s written into html documents enabling interactions with web pages in many unique ways. So as a relatively easy to learn language with almost pervasive support it is exceptionally well suited to develop modern applications.But the question arises is javascript ideal for developing single page applications that require modularity, testability and other features, perhaps not. However we have a variety of frameworks and libraries, designed to help us with such things with respect to front-end development. Angular and javascript together bring in structure and consistency to the web applications and also provide scalability and maintainability. Angular is specifically developed for single page applications.

What is Angular?

Angular is an open source Javascript Framework, which is completely written in TypeScript.It was primarily aimed to develop Single Page Applications, and is maintained by google. Angular uses HTML’s syntax to express the application’s components clearly. Angular as a framework provides a few advantages while also providing a standard structure for developers. It is designed for web desktop and mobile platforms. If we have a doubt here as to what exactly single page applications are.These single page applications are basically applications that get loaded just once. So the main page gets loaded in to the browser. So any further interactions does not lead to loading of subsequent pages. Anything that has to be done further, is just an addition to the already loaded page. So these single page applications are primarily developed using angular.

Features of Angular

Let’s look at the features of angular.

We have four features that we’re going to be discussing. We have

Document Object Model (DOM)
Typescript
Data Binding
Testing

Document Object Model (DOM)

DOM treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.

Angular uses regular DOM. This will update the entire tree structure of HTML tags until it reaches the data to be updated. Consider about 100s of updates on the same HTML page and the HTML block is replaced for each request.

Typescript

Angular is written in TypeScript .It is a superset of javascript and offers excellent consistency.

Typescript is installed as an NPM package, and thus can be installed with the following command.

Npm install -g typescript

Data Binding

Data binding is a process that allows you to manipulate web page elements using the web browser. Now, it mainly employs dynamic HTMl and does not require complex scripting or programming. It is used in web pages that include interactive components like calculators, tutorials, games etc. Incremental display of web pages make data binding extremely convenient when pages contain a large amount of data. When it comes to angular, it uses two way data binding. So any changes meeting the ui element is reflected in the corresponding model state and conversely any changes made in the model state are reflected onto the ui state. This allows the framework to connect the DOM to the model data via the controller.

Testing

Angular uses Jasmine to run various tests. The Jasmine framework allows various functionalities to write different kinds of test cases. Karma is the task runner for the tests

Angular Architecture

Angular is a full fledged MVC framework. It provides a strong opinion on how the application should be structured, and offers bi-directional data flow and updates to real DOM. MVC (Model View Controller) is an architectural pattern that separates the application layer into model, view and controller. The model here relates to all the data related logic. View on the other hand is used for the ui logic of the application. Controller is the brain of the setup. Now it is an interface between the model and view.

Advantages of Angular

Custom Components-Angular allows us to build our own component that can pack functionality along with rendering logic into reusable pieces.
Data Binding- Angular allows us to effortlessly move the data from our javascript code to the view and react to user events , without having to write any code yourself.
Dependency Injection- Angular allows us to write modular services and have them injected whenever they are needed.This greatly improves the testability and reusability of the same.
Testing- Angular has been built from the ground up with testability in mind.We can literally test every part of the application.
Comprehensive -Angular is a full-fledged framework which provides out of the box solutions for server communication, routing and more.
Browser Compatibility — Angular is cross platform and browser compatible. An angular application can typically run on all browsers, beat chrome, firefox, safari and platforms like windows, mac os and linux.

Angular Versions

Angular 1: Built on JavaScript and completely based on controllers.
Angular 2: Incorporated the component based approach.
Angular 4: Included router updation.Angular CLI 1.0 was introduced.
Angular 5,6: Angular CLI was optimized and the commands ng -update and ng -add were added.
Angular 7: Prompts were introduced which provide tips in CLI about the functions.
Angular 8: Ivy renderer and Bazel were introduced.
Angular 9: Came with better framework and Angular material included full switch to the Ivy renderer as a default compiler.