Using Angular JS with Remote Actions
public class AngularRemoteClass {
<apex:page controller="AngularRemoteClass" showheader="false" sidebar="false" doctype="html-5.0" standardstylesheets="false">
(function(){
Nowadays Angular JS is a great front end framework to bind DOM objects easily and do many more things in the DOM. Here I'm going to describe how to use Angular with visual force and apex remote actions. So we can add angular code in the visual force page itself or we can add angular code to the static resource. As per the my understanding , If we use angular code in the visual force page itself it will break the single page application concept. Because when rendering a new visual force page we have to create one angular application for each visual force page. So in this post I'm going to use static resource to write angular code. And also I'm going to use welkin suite for as the IDE. Because from welkin suite we can modify the static resource bundle (But currently we cannot add js files for partial pages to static resource , only thing what we can do is modify the bundle , but it is great because we can compare the modifications what we have done) and also welkin suite is really familiar to me because I'm from .NET background. When we using static resource we have to consider one things of the sales force governor limit. That is static resource is limited to 5 MB. If you using more that 5MB for the static resource bundle you have to separate the bundle.
You can download welkin suite from https://welkinsuite.com/downloads/
Create Static resource Angular Bundle
Hope you have some knowledge of the Angular developments.And I'm going to use UI route for the routing mechanism for the app. Initially you have to create the folder structure for the angular static resource bundle as below. Here I'm using two controllers (firstController.js) and one service (firstService.js) and two partial html (firstView.html , secondView.html) pages and app.js file. So create this folder structure with the empty js and empty html files and add it to the static resource.
app
- controllers
- firstController.js
- services
-firstService.js
- views
-firstView.html
-secondView.html
app.js
If you going to use welkin , create a new project by giving your credentials and security token. Or else you can you MavensMate or another tool to edit static resource.
Now you need to create a visual force page to make the root page container for the angular app. So go and create a visual force page . I have created as AngularTest.page .
Then create a apex class to create the remote action. I have created as AngularRemoteClass.
Here I'm going to demonstrate an really simple angular application in order to call to a remote action. So I have wrote a RemoteAction method as 'angularRemoteFunction'. It will return and Boolean true value once you give any name. According to the requirement you can make the modifications to the RemoteAction. Here I will keep it as a very simple.
public class AngularRemoteClass {
@RemoteAction
public static Boolean angularRemoteFunction(String name) {
return true;
}
}
Below I have added apex page content. Here I have added angular.js file and angular ui route file from the cdn. If you like you can add those angular files to the static resource. I have create angular app as MyApp. And I have added <ui-view></ui-view> tags to add html partials dynamically from angular.
And also here I have added SitePrefix javascript variable, because from the static resource we cannot directly call to the apex global variables. So I have added it to the js variable and then I can call to the SitePrefix from the static resource js files. This SitePrefix will use in the angular bundle. (AngularApp is the static resource bundle name)
var SitePrefix="{!URLFOR($Resource.AngularApp)}/app/" ;
After the ui view tag I have referenced to the app.js file , firstController.js and firstService.js file from the static resource.
<apex:page controller="AngularRemoteClass" showheader="false" sidebar="false" doctype="html-5.0" standardstylesheets="false">
<html lang="en">
<head title="MyApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script type="text/javascript">
var SitePrefix="{!URLFOR($Resource.AngularApp)}/app/";
</script>
</head>
<body ng-app="MyApp">
<ui-view></ui-view>
<!-- Add JS Files HERE -->
<script src="{!URLFOR($Resource.AngularApp)}/app/app.js"></script>
<script src="{!URLFOR($Resource.AngularApp)}/app/controllers/firstController.js"></script>
<script src="{!URLFOR($Resource.AngularApp)}/app/services/firstService.js"></script>
</body>
</html>
</apex:page>
app.js file
I have used ui-route for the routing , therefore I have injected $stateProvider to the config.
(function () {
'use strict';
angular.module('MyApp', [
'ui.router',
'MyApp.services',
'MyApp.controllers'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/default');
$stateProvider
.state('default', {
url: '/default',
views: {
'': {
templateUrl: SitePrefix + 'views/firstView.html',
controller: 'firstController'
}
}
})
})
angular.module('MyApp.services', []);
angular.module('MyApp.controllers', []);
}());
firstController.js
In here I have injected myFirstService factory method to call Apex Remote Action.
(function(){
'use strict';
angular.module('MyApp.controllers').
controller('firstController', ['$scope' , '$rootScope' , 'myFirstService' , function ($scope , $rootScope , myFirstService ) {
myFirstService.authenticateUser({ name : 'prasad' } ,
//success calla back
function(data) {
console.log(data);
},
//error call back
function(data) {
console.log(data);
});
}]);
}());
firstService.js
Comments
Post a Comment