Angular JS in Visualforce Page

AngularJS is extensively used for developing mobile and web solutions. AngularJS can considerably reduce the development time and improve the page UI at the same time.

AngularJS is extensively used for developing mobile and web solutions.  AngularJS can considerably reduce the development time and improve the page UI at the same time.

Let us see how the angular works in html. Before starting with below example, we need to include the angular.min.js it can be accessed from here .

JS Code: 

var angularApp = angular.module(' MyApp',[]); 

angularApp .controller(ControllerName, ['$scope', function($scope) { 

$scope. firstName =”name”

In the first line, we need to create module with app name (like ‘Myapp’). The second line is to create a controller with a name along with scope variables.

Scope object is used to bind the controller and view.

HTML Code: 

<div ng-app="MyApp"> 

<div ng-controller=”ControllerName"> 

<p>Name: <input type="text" ng-model="firstName"></p> 

<p>You wrote: {{ firstName }}</p> 

</div></div>

Here, in the HTML code, need to mention app name in ng-app attributes.

  1. ng-app – initializes an AngularJS application.
  2. ng-controller – It defines a controller and control the data of AngularJS applications
  3. ng-model – binds the value of HTML controls to application data( {{ }}  – double curly braces are used to bind the data from controller).
  4. ng-repeat – Instantiate an element once per item from a collection.

Output: 

Importance of Angular JS: 

  • Real-time Data Binding

AngularJS has an inbuilt two-way data binding feature and it is useful for Salesforce development to process real time data based on user inputs

1. Dependency Injections

AngularJS provides a supreme Dependency Injection mechanism. It provides core components which can be injected into each other as dependencies.

2. User Experience:

It provides great UI experience for the end user for both desktop and mobile view because of bootstrap

3. Deep Linking:

Deep linking allows you to refer to specific module or section of a web-page and pass on the URL to others that point directly to the section.

Let us see an example of Angular JS implementation in Visual force page: 

angularjs in salesforce

In the controller, we have two methods.

  1. getAccount: This method is to get the all the accounts name in the org.
  2. getContacts: It is a Remote method, which is called from Visualforce page along with selected account id and it returns the related contacts of that account.

In the visualforce Page – Script: 

angularjs in salesforce

The highlighted areas need to focus more

  1. Apex controller and angular app – Need to specify the controller and app name
  2. Include the AngularJS and bootstrap css file
  3. Under script tag,  develop an app and controller (angular controller)
  4. After selecting the account, call the remote function to get all the related contacts.

In the visualforce Page – Script: 

angularjs in salesforce
  1. ng-controller – Need to specify the angular controller.
  2. Bind the account into dropdown list
  3. ng- model has the selected dropdown list value
  4. ng-change is to call the ’myFunc’ method in the script to call the remote function in the controller.
  5. ng-repeat used to iterate the collection of items
  6. ng-show is used to show or hide the specified HTML element based on the expression mentioned to the ngShow attribute
  7. ng-repeat used to iterate the collection of items and along with filter option is used to filter the search without refreshing the page
  8. {{ msg}} will display the message when there is no related contact for the selected account.

Output: 

Step 1: Run the visualforce page

angularjs in salesforce

Step 2: Select any account from the dropdown list

Salesforce angualar js

Step 3: Now the related contacts are displayed.

Salesforce angualar js

Step 4: Using the search option, we can do filter from the list of data without page refresh

Salesforce angualar js

Step 5: If the account has no related contact, then a custom message will display like below.

Salesforce angualar js

Pros: 

  1. Two ways Data Binding.
  2. It supports SPA (Single Page Application).
  3. MVC (Model View Controller) pattern supported.
  4. Less code

Cons:

  1. It has a few limitations when we handle huge amount of data.

Conclusion: 

Using Angular JS in Salesforce, we can develop scalable and structured applications with good response times. Some of the attributes like ng-keyup will trigger events automatically based on input given by the user and ng-repeat & filter options will make applications more responsive.

References:

https://www.w3schools.com/angular/
https://angularjs.org/

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

How to improve the performance of Visualforce Page

Whenever possible, try to use the declarative or standard feature such as Approval Processes, Visual Flows, and Workflows because these components are already fully optimized by the Force.com; therefore, it won’t count against most of the governor limits but in some cases business may need complex logic; then we can go for the programmatic features.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.