Use Angular JS in Visualforce Page.

Posted on December 30, 2020 Post Thumbnail

Hi Trailblazers, In this blog post I'm going to share some information about, How you can use Angular JS with Visualforce to show records onto your Visualforce Page.

Before we start :)

What is AngularJS ?

AngularJS is a JavaScript-based open-source front-end web framework .The

AngularJS framework works by first reading the Hypertext Markup Language (HTML) page,

which has an additional custom HTML attributes embedded into it.It can be added to an

HTML page with a <script> tag.

AngularJS is distributed as a JavaScript file, and can be added to a web page

with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js></script>

AngularJS Extends HTML :

AngularJS extends HTML with ng-directives.AngularJS modules define applications

➔ The ng-app directive defines an AngularJS application.

➔ The ng-controller  directive defines the controller.

➔ The ng-model directive defines how to bind the value of HTML controls

(input, select, textarea) to application data.

➔ The ng-bind directive binds application data to the HTML view.

Let's have a look on the following code.

In following code, We used Scope Object to bind the controller and view.

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="FirstApp" ng-controller="myCtrl">

Enter Your First Name: <input type="text" ng-model="firstName"><br>

Enter Your Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

<script>

var app = angular.module('FirstApp', []);

app.controller('myCtrl', function($scope) {

$scope.firstName= "Asif";

$scope.lastName= "Aly";

});

</script>

</body>

</html>

After rendering above code.

After rendering above code.

It is all about AngularJs

Now let's talk about how we can implement this in the Visualforce page.

Why AngularJS in Visualforce Page?

It supports 2 way data binding, SPA( Single page Application ) and It requires less code.

Let's Start.

Let us see an example of AngularJS with Visualforce page:

In which we fetch all the Contacts

Here is the Code for Vf page:

<apex:page standardStylesheets="false" sidebar="false"

showHeader="false" applyBodyTag="false" applyHtmlTag="false"

docType="html-5.0" controller="AngularJswithvfController">

<html lang="en" ng-app="myApp">

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>Angular Demo</title>

<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 class="container" ng-controller="myctrl">

<br/><center>

<h3 align="center" style="color:Black;"> Angular JS With Visualforce</h3>

</center><br/><br/>

<table class="table table-bordered" id="table" >

<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>

</html>

</apex:page>

Here is the code for the controller:

Public with sharing class AngularJswithvfController {

public static String getContacts() {

return JSON.serialize([select id, name, email

from contact ]);

}

}

After previewing above Visualforce Page.

Preview.

As you can see, It's working now.

This is how we can use Angular JS with Visualforce Pages.

I hope It'll help you somehow.

If you have any question Ask Me

Thanks for Reading :)

Write a comment for suggestions and hit the heart icon.


1008
0

Comments

There are no comments yet.
Your message is required.

Get notified of new posts