Angular JS

Javascript   , 18-07-2017

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

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:

  • HTML document is loaded into the browser, and evaluated by the browser. AngularJS    javascript file is loaded, 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. Once 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 a 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 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 upto 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 applicaton 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 to encode the state of 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
  • Developer can write less code and get more functionality. Less code cause less 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 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 to presen their profiles for that
  • eCommerce : Several eCommerce sites uses 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 


You might also look

blog one
14-07-2017
Webservice

Web Services

WebService (WS) is a technology, process, and software paradigm that provides support for busines...

Read More
blog one
14-07-2017
Javascript

Knockout JS

KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps develop...

Read More
blog one
14-07-2017
Game Development

Virtual Reality

Virtual Reality is a fascinating way to travel using nothing more than the power of technology. W...

Read More