Angular JS

  Melvin       January 30, 2020

AngularJS, commonly called Angular, is an open-source web application framework in javascript. It is developed in 2009 by Misko Havery and Adam Abrons and now maintained by Google.

AngularJS components

The framework can be divided into 3 major parts:

Ng-app:
This directive defines and links an Angular application to HTML

Ng-model:
This directive binds the values of AngularJS application data to HTML output controls

Ng-bind:
binds the application data to HTML tags

Execution

When the page is loaded in the browser:

An HTML document is loaded into the browser, and evaluated by the browser. AngularJS javascript file is loaded, the angular global object is created. Next, javascript which registers controller functions is executed.

Next AngularJS scans through the HTML to look for AngularJS applications and views. One view is located, it connects the view to the corresponding controller function.

Next, AngularJS executes the controller functions, it then renders views with data from the model populated by the controller.

Core features

Data binding:
It is the automatic synchronization of data between model and view components

Scope:
These are objects that refer to the model. They act as glue between controller and view. All properties found on the scope object are automatically bound to the view by Angular. i.e, Angular quietly watches for changes to these properties and updates the view automatically

Controller:
These are javascript functions that are bound to a particular scope

Services:
Controllers in Angular are simple functions that have one job only, which is to manipulate the scope. Eg. You can use a controller to prefill data into the scope from the server or implement business logic validations. ‘Services’ help controller to do this. Most of the time it synchronizes up to a server to an offline data store and exposes methods to pull and push data to and from a server. Angular has several built-in services.  Eg. $https; to make a XMLHttpRequest.

Directives:
They bring additional functionality to HTML. We never have to manipulate the DOM to simulate them. All that our application needs to do is to assign attributes to elements to get any functionality. How the view behaves is up to the directives

Templates:
These are the rendered view with information from the controller and model.

Routing:
It is the concept of switching views i.e ngRoute module routes your application to different pages without reloading the entire application

Model View Whatever:  
Angular is now closer to MVVM - the $scope object could be considered the ViewModel that is being decorated by a function that we call a controller. Whatever stands for ‘Whatever works for you’

Deep Linking:
This allows us to encode the state of an application in the URL so it can be bookmarked. The application can then be restored from the URL to the same state

Dependency Injection:
This specifies a design pattern in which components are given dependencies instead of hard coding them within the component

Advantages

Data binding provides users a rich and responsive experience

The developer can write less code and get more functionality. Less code cause fewer bugs

Angular is cross-browser compliant  i.e it handles automatically javascript code suitable for each browser

The main advantage is that it is maintained by Google

Disadvantages

Not secure:
Application written in AngularJS is not safe. Server-side authentication and authorization is must to keep an application secure

Not degradable:
If your application user disables javascript, then the user will see the basic page and nothing more

Lagging UI:
If there are more than 2000 watchers, it can get the UI to severely lag. This means that the possible complexity of Angular forms is limited

Name Clashes:
You don’t have the ability to compose many ng-apps on the same page. This can cause name clashes

Examples of popular applications that use AngularJS

Video streaming applications:
YouTube’s application for Sony PS3, Netflix.com

User-Review Applications:
Mobile site of GoodFilms that offers movie reviews to users

Weather Applications:
weather broadcasting application weather.com

User-generated content portals:
Freelancer.com, which is a platform for employees to post their projects and interested candidates need to present their profiles for it.

eCommerce:
Several eCommerce sites use AngularJS

Conclusion

AngularJS applications follow the well established MVC design pattern and implement it with the help of HTML5 templates, external web services as the data sources and javascript logic that glues everything together