Building Angular Applications on Salesforce

Publish Date: September 26, 2019
Reading Time: 5 minutes
1572

About the Author | GetOnCRM

Salesforce Certified Expert

In this post, I am going to share the information about salesforce integration and how you can use AngularJS with Visualforce to display records onto your Visualforce Page.

Introduction Of Angular Js:-

AngularJS is a structural framework for dynamic web apps. Angular is a Google-produced MVC framework where you can generate web applications and maintain them.
AngularJS is what HTML would have been, had it been designed for applications. AngularJS allows the easy development of Visualforce pages.
If you need to display Salesforce data to people other than those that have Salesforce accounts, Visualforce pages is the best way to go.
For developers creating Visualforce apps is way easier than creating ad-hoc third-party web apps that call upon Salesforce data.
JS remoting allowed you to access server-side apex controller methods through JS directly
Along with Remote Objects, this allowed more flexibility and dynamic usage of Visualforce pages resulting in even greater adoption of the tool.
JavaScript remoting gave you the ability to access server-side apex controller methods via JS directly, so this enhanced the flexibility and dynamic usage of Visualforce pages resulting in the higher adoption of the tool.
When building a third-party framework web application in Salesforce, there are three ways to communicate with Apex:

Web Services
Rest API
Remote Action

AngularJS directives attributes :-

The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-repeat directive repeats an HTML element.
The ng-bind Sets the text of a DOM element to the value of an expression
The ng-controller it is used to call the controller of the module.

Learn more Angularjs, Please read this link
https://www.w3schools.com/angular/angular_directives.asp

Reasons to Choose AngularJS :-

Quick Started: – All you need to do is add some attributes to your HTML, and you can have your first, small Angular app in a matter of a few minutes.

Time-Saving: – AngularJS will take over and perform the rest of the functions for you. It saves you of the trouble of writing another code to bind the MVC components together again.

AngularJS Advantages:-

MVC architecture
Two-way data binding
Open-source JavaScript framework, developed by Google
Write less do more
Quite a number of ways to do same thins
Modify DOM directly

AngularJS Disadvantages:-

Limitation in watchers(not more than 2000)
Not build for mobile devices
Two-way binding checks all the variables twice for updating which makes the UI slow
Multiple ways to do the same thing, it is very hard for a developer to tell which is the best way.

What would need to generate Visualforce page with Angularjs:-

Apex Class
Static resource (store JavaScript Application)
Visualforce Page Or Lightning Component (Load Js App)

Code structure: –
Now we can write a small example of Angularjs with Visualforce page. First of all, we can create an apex class with remote action method.
Global class sampleClassOfAngularjs { @RemoteAction Global static List accountList() { Return json.serialize([select Id,Name from Account]); } }

@RemoteAction:-
Remote action function in salesforce allows user to access any method from any class through javasrcipt methods, and get the result as a javascript object for further manipulation.

Global static:-

The method must be Static and either Global and Public.

<apex:page showHeader = “false” controller = “sampleClassOfAngularjs” >

<head>

var App = angular.module(‘myApp’, []);

App.controller(‘myctrl’,

function ($scope) {$scope.

account = {! accountList }});

</script>

</head>

<body ng-app=”myApp” class=”container”

ng-controller=”myctrl”>

<tr>

<th>Industry</th>

<th>Website</th>
</tr>

<td>{{ account.Name}}</td>

<td>{{ account.Industry}}</td>

<td>{{ account. Website}}</td>

</tr>

</table>

</body>

</apex:page>

controller = “sampleClassOfAngularjs” :-Put your controller name into controller attribute.

angular.module :- A module is created by using the AngularJS function angular.module. The “myApp” parameter refers to an HTML element in which the application will run.

App.controller :- Add your controller in app.controller.

Conclusion :-

I hope the above is helpful to someone. Next up is to try to create some application that makes use of this Angular + VF Remoting technique. In this article, I showed how you could build a third-party JavaScript application. How to communicate data between your application and Apex.