Developing Visualforce Apps using AngularJS

Have you ever wondered how cool it would be to have the flexibility and features Angular JS framework provides, inside a Visualforce page in Salesforce platform? Well, wait no more, keep reading to get a perfect solution for this. This blog will introduce you to AngularJS and how to develop Visualforce apps using angular. Every web application requires client-side JavaScript, HTML, and CSS. Without using any server framework like Rails, Node, PHP, etc. the entire application can be built using just the front-end tools and languages.

What is ANGULARJS?

AngularJS is a powerful JavaScript framework for constructing dynamic web applications. It is used to develop mobile and web applications. The good thing about Angular is that it has a set of primed modules to simplify the building of single page applications. Single page application (SPA) is a web application that dynamically renders the data on the current page without reloading the whole page. All the code (JS, HTML, and CSS) is retrieved with a single page load and navigation between pages is performed without reloading the whole page.

Major Components

  • Controller – It is the main component of AngularJS which contains the state and logic both. It acts as a bridge between services and views.
  • Views/Directives – Here we generate the UI. Directives extend the HTML element and enable us to generate the complex HTML easily. Controllers talks to view in both directions.
  • Services – It contains all the logic and state of the application. In it, we can communicate with the server to get and post the data.

Meghna1

Before getting deeper into how AngularJS works, let us learn how we can start to code in angular:

  1. {{expression}} – It is called expressions and all the code similar to JavaScript can be written inside. It should be used for mainly small operations in an HTML page.
  2. $scope – This is one of the very important variables used in AngularJS. It provides and a link between the data and views. It holds all the required data for the views and used within the HTML template.
  3. ng-* – All the elements that are provided by angular starts from ng-*. So if you see some attribute that ng- and the angular library is also included in the page, then you can assume that this should be angular element only.
  4. ng-app – This directive is used to bootstrap the application. Normally, it is put at in top-level elements like HTML or body tag.

Meghna3

With AngularJS, we can develop Visualforce Apps which helps to reduce the development time of an application and hence enhance the UI of the application.

Now that we know what AngularJS is, let us quickly see a sample application that is built using Visualforce and AngularJS.

Main Visualforce Page

<apex:page showHeader=”false” applyHtmlTag=”false” docType=”html-5.0″ controller=”ApexAngularDemo”>

<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.accounts = {!accounts}

});

</script>

</head>

<body ng-app=”myApp” class=”container” ng-controller=”myctrl”>

<table class=”table table-bordered”>

<tr>

<th>Name</th>

<th>Id</th>

</tr>

<tr ng-repeat=”account in accounts”>

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

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

</tr>

</table>

</body>

</apex:page>

 

APEX CONTROLLER

public with sharing class ApexAngularDemo {

public static String getAccounts() {

return JSON.serialize([select id, name

from account ]);

}

}

 

OUTPUT

Meghna4

So, in this example, we are fetching all the ids and the names of all the accounts using AngularJS approach.

In conclusion, this is a great way to embed and leverage the awesome set of features that Angular JS provides, within a Visualforce page. Not only this makes life easy and fun for the developer, the final output looks better in every aspect.

Posted in apex develeopment, Apex Development, force.com app development, salesforce development. Tagged with , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *

*