Why should you use Angular JS in Salesforce Visualforce pages

Angular JS in Salesforce Visualforce pages

Before the advent of mobile (about two years), HTML and JS were primarily used for creating web documents. When mobile devices entered the market, the toolbox for creating applications had to be enhanced. While HTML is outstanding for producing static documents, it cannot publish dynamic views within web-apps effortlessly. Single-page Visualforce based apps have been on a rise. Here Visualforce and Salesforce1 can be used for making Salesforce compatible with mobile and also for connecting people to the Salesforce data. AngularJS allows the easy development of Visualforce pages.  With AngularJS, you can expand the HTML vocabulary to suit needs of your web application.

JavaScript MVC Frameworks emerged as a leading development tool over the last year. Along with it, a series of other frameworks entered the market and were appraised positively. Of these, the well-received include Backbone.js, Ember.js and particularly, AngularJS.

Angular is a Google-produced MVC framework where you can generate web applications and maintain them. With AngularJS, you can disassemble your application into smaller modules related to one another. AngularJS introduces new expressions, directives and tags to enrich HTML. These can be used for formulating forceful templates. Scripts can be organized and tested easily in AngularJS. With AngularJS, the code factory can be used for converting the utility code for later introduction to the controllers. AngularJS is ideal for development of user interface or front-end intensive app which requires high amount of organization and structuring along with swift response time.

Single-page Visualforce applications can be developed by bringing together the capacities of AngularJS and Salesforce. Such a fusion will not only reduce the time spent in development but also enhance the user interface.

Deep Linking

In today’s web pages and apps, the URLs are not confined to single pages. The URL can be linked to specific regions of the pages. This capacity is known as Deep Linking and can be utilized in your web-app easily through AngularJS.

When you click on a certain URL, you do not end up on the Home Page but the specific section within the page that it is deep-linked with. For instance, when discussing Frida Kahlo’s career as a painter with a friend, you can send them the specific section (https://en.wikipedia.org/wiki/Frida_Kahlo#Career_as_a_painter) instead of the entire page (https://en.wikipedia.org/wiki/Frida_Kahlo).

AngularJS allows you to apply deeplinking within Visualforce apps. When you send help library to a user, you can direct them to the specific intended section (ABC.ap1.force.com/help-library#Section3) instead of sending them the entire library URL (ABC.ap1.force.com/help-library).

Live Data Binding

When you are manipulating and handling data within AngularJS, there is no need to worry about DOM. In AngularJS, there is reciprocal (two-way) data binding.

Here is how the traditional data binding works. Standard applications bring together data in a singular way. A static view is created by merging the view template and data components. When you make a change to the data, it is not instantly indicated in the view. For reviewing the change, you will need to refresh the web page each time in the older web app.

With AngularJS, you have the advantage of enhanced connection between view and model. Whenever the model is modified, it is directly reflected in the view. In AngularJS vocabulary, views are the projection of model. While this might sound simplistic, what occurs behind the scene is an incredibly intricate piece of coding where the static DOMs are substituted with dynamic DOMs. This happens in the compilation phase where a watcher thread is also added in. This watcher thread tracks user actions and updates the DOM accordingly. The introduction of dynamic DOMs and addition of watcher threads allow instant reflection of any changes made to the model in the view.

Such reciprocal data binding is significant for applications which engage with live data and need features that can manipulate the user input data instantly. For instance, consider Netflix which was built with Angular JS and provides on-request streaming of media to the users.

Dynamic User Experience

When you create a web app with AngularJS, the aesthetic appeal of the interface is given great value. The Visualforce pages can override the UI of Salesforce (which is now possible with the Lightning experience). The inbuilt library, modules and components of AngularJS can be used for visually enhancing the app.

Injection of Dependencies

With dependency injection, you can carry over one object (called the ‘service object’) to another object (called the ‘client object’). Such a carrying over is done through a microprogram known as “injector”. This process is dependent upon the condition of client object. Injector also has the function of creating the service objects. AngularJS is home to one of the best module development tools where you can easily inject dependencies into the components.

Consider an application that calculates taxes. As a replacement to the heavy-coding tax slab rates, a dependency can be generated which holds the tax rates and carries it to the calculator components. It is also possible to generate ‘service’ dependencies that multiply or divide two numbers. These dependencies can be injected into the complex calculator through a component.

The main advantage of using such a design structure is greater flexibility and regulation over the ultimate business process tree of the app. The modules and components can be recycled and reused throughout the app, reducing the time required for coding each of them separately. With AngularJS, the app development time is brought down considerably through such dependency injection modules.

Suyati is a keen evangelist of Salesforce technology. To know more about our expertise, please send an email to services@suyati.com.

Author : Sahana Rajan Date : 26 Apr 2016