Angular is a JavaScript-based open-source framework, introduced by Google. Here Visualforce and Salesforce1 can be used for connecting people to the Salesforce data. AngularJS allows the easy development of Visualforce pages.
In this post, we will discuss 4 benefits to use angular js with Salesforce visualforce pages.
Why use AngularJS with Salesforce?
AngularJS is widely used for developing web solutions. The combination of Visualforce and AngularJS is very popular because angular decreases the development time and improves the page UI at the same time.
Here I am mentioning 4 benefits to using angular with Salesforce-
1. Two-Way Data Binding
Angular has inbuilt two-way data binding features that free you from worrying about DOM when you play with data. To understand its uses, we have to first understand what two-way data binding is. The standard applications bind data in only one way, i.e. they merge the view template and the model components (data components) to create a fixed unchangeable view. Any change in data is not automatically reflected in the view because of which we have to refresh the web page every time in older web apps to view changes.
Two-way data binding is important in Salesforce Apps especially those that involve real-time data or require features that require real-time manipulation of user input data. For example, a quote calculator that needs user input.
2. Support for SPA (Single Page Application)
A single-page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page
In modern web pages and apps, URL is not limited to pages only, the specific modules of the pages can also be accessed through the URL itself. This feature is named Deep Linking and AngularJS has inbuilt features that allow you to use this technique.
3. MVC (Model View Controller) Pattern supported
MVC is a very popular pattern because of application logic from the user interface layer and separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response.
- Model: The model is responsible for managing application data. It responds to the request from view and to the instructions from the controller to update itself.
- View: A presentation of data in a particular format, triggered by the controller’s decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
- Controller: The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.
4. Less Code
Write less code, get more functionality, for example-
Apex controller class
|
1 2 3 4 5 6 7 8 9 |
public with sharing class AngularWithVfPage { public static String getContacts() { return JSON.serialize([select id, name, email from contact limit 100 ]); } } |
Visualforce page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="AngularWithVfPage"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script> var App = angular.module('myApp', []); App.controller('myctrl', function ($scope) { $scope.contacts = {!contacts} }); </script> </head> <body ng-app="myApp" class="container" ng-controller="myctrl"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Email</th> <th>Id</th> </tr> <tr ng-repeat="contact in contacts | filter:query"> <td>{{contact.Name}}</td> <td>{{contact.Email}}</td> <td>{{contact.Id}}</td> </tr> </table> </body> </apex:page> |
Conclusion:
Visualforce pages are created to bypass the UI of Salesforce and if the resulting pages are not visually appealing, then the purpose is defeated. The libraries, components, and modules of the framework used in fast development.
Habilelabs provides the best web and mobile based developments with the best quality, Contact Us.
If you have any query related to the topic then ask in the comment section.
Hope you enjoy reading about why to use angular with Salesforce, so don’t forget to share on Facebook.
AngularJs is a good JavaScript framework but it has it’s own downside too when you use it with salesforce. Since it provides SPA whereas in salesforce every visualforce page has its own URL and it’s bit typical to leverage SPA functionality of AngularJs completely.
Also, to use two way binding, DOM Control structures and other features of AngularJS – one have to treat every visualforce page as an app.
In order to get the maximum of AngularJs one should have to carefully design the arch. of application like using minimum no of visualforce pages and use of visualforce remoting.
But overall using AngularJs along with visualforce is one of the deadly combination to go with.
Cheers
Yes, if you design your application carefully, you can create very powerful visual force page. You can perfrom lot of operations without even changing the screen.
One example we implemented whole MEDDIC concept on opportunity with one visualforce page using angular.js. User can perfrom every operaton changing stage, change in QM, task creation, adding contacts. Angularjs is deadly combination with salesforce
Yes, Great Article about Why use AngularJS with Salesforce. . Thank you for sharing your knowledge. Keep it up.