function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ajay varmaajay varma 

VisualForce Remoting not working with Separate AngularJS Controller File

I'm facing an issue while working with Visualforce remoting and angularjs. Whenever I'm putting my controller code in separate js Static resource, my code doesn't work. Please help me in figuring out this. ( Below code works if i include controller script in same VF page)

My Visualforce page
    
<apex:page controller="ApexRemoteActionPageController" docType="html-5.0">
<html>
<body>
 <div class="bootstrap" ng-app="ngApp" ng-controller="ContactCtrl" >

 <h1 align="center">Click The Button</h1>
 <button ng-click="getContacts()" class="btn btn-lg btn-default btn-block">Get Contacts</button> 

 <p>
 <ul>
 <li id="{{current.Id}}" ng-repeat="current in contacts" ng-class-even="'rowEven'">{{current.Name}}</li>
 </ul>
 </p>
</div>
<apex:stylesheet value="//cdn.jsdelivr.net/webjars/bootstrap-sf1/0.1.0-beta.6/css/bootstrap-namespaced.css"/>
 <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"/>
 <apex:includeScript value="{!$Resource.ContactCtrl}" />
</body>
</html>
</apex:page>

My Controller Static Resource
  
<script>
var ngApp= angular.module("ngApp", []); 
 ngApp.controller("ContactCtrl", ["$scope", function($scope) 
                                 {
                                  $scope.contacts = [];
                                  $scope.getContacts = function() {
               ApexRemoteActionPageController.myContacts(function(result, event) {
               $scope.contacts = result;
               $scope.$apply();
});
}
}]);
</script>

My Apex Controller
  
global class ApexRemoteActionPageController {
@RemoteAction
global static List<Contact> myContacts() 
{
   return [select id, name, email from Contact Order By LastModifiedDate DESC LIMIT 30];
}

 
Best Answer chosen by ajay varma
Pramodh KumarPramodh Kumar
please Remove script tag from the static resource it is not required when the file is text/javascript

Syntax is different when referring to the static resource 

it should be

namespace.ControllerName.ControllerMethod.

for default namspace go the packages from the setup 
var ngApp= angular.module('ngApp', []); 
        ngApp.controller('ContactCtrl' ,['$scope',function ($scope)
        {
            $scope.contacts = [];
             $scope.getContacts = function() {
            pramodht.Ex1Controller.myContacts(
                 function(result, event)
                  {
                      $scope.contacts = result;
                      $scope.$apply();

                    //console.log(result);
                   })
                 };
            
        }]);

User-added image
let me know if you have any issues.


Thanks,
pRAMODH.

All Answers

Pramodh KumarPramodh Kumar
please Remove script tag from the static resource it is not required when the file is text/javascript

Syntax is different when referring to the static resource 

it should be

namespace.ControllerName.ControllerMethod.

for default namspace go the packages from the setup 
var ngApp= angular.module('ngApp', []); 
        ngApp.controller('ContactCtrl' ,['$scope',function ($scope)
        {
            $scope.contacts = [];
             $scope.getContacts = function() {
            pramodht.Ex1Controller.myContacts(
                 function(result, event)
                  {
                      $scope.contacts = result;
                      $scope.$apply();

                    //console.log(result);
                   })
                 };
            
        }]);

User-added image
let me know if you have any issues.


Thanks,
pRAMODH.
This was selected as the best answer
ajay varmaajay varma
worked like a charm. thank you