Sign Up ›

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

AngularJs not rendering when used with Visualforce Remoting

I'm having trouble rendering angularjs with the below code 

APex COntroller Code:
  
global class ApexRemoteInvokeManagerController {

    public ApexRemoteInvokeManagerController() {

    }
    
    public ApexRemoteInvokeManagerController(ApexPages.StandardController controller)
    {
  
    }
    
    @RemoteAction
    global static void saveAccountWithContact(String contactJson,String accountJson)
    {
       Account a = (Account)JSON.deserialize(accountJson,Account.class);
       insert a;
       Contact c = (Contact)JSON.deserialize(contactJson, Contact.class);
       c.AccountId = a.Id;
       upsert c;
    }
    
}

VisualForce Page as well as AngularJs
  
<apex:page controller="ApexRemoteInvokeManagerController"    
 docType="html-5.0" sidebar="false">
 <html>
 <head>
  <link href="//cdn.jsdelivr.net/webjars/bootstrap-sf1/0.1.0-   
beta.6/css/bootstrap-namespaced.css" rel="stylesheet"/>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-   
beta.11/angular.min.js"></script>
  <script>
   var accountApp = angular.module('accountApp',[]);
      accountApp.factory('accountAndContactsFactory', ['$q',   
'$rootScope', function($q, $rootScope) {
        this.save =  function() {
            var deferred = $q.defer();
            var contactJson = JSON.stringify(contact);
            var accountJson = JSON.stringify(account);
            Visualforce.remoting.Manager.invokeAction(

'ApexRemoteInvokeManagerController.saveAccountWithContact',
            contactJson,
            accountJson,
            function(result, event) {
                $rootScope.$apply(function() {
                  if (event.status) {
                    deferred.resolve(result);
                  } else {
                    deferred.reject(event);
                  }
                })
            },
            { buffer: true, escape: true, timeout: 30000 }
        );

        return deferred.promise;
    }

}]);


 accountApp.controller('MainController',function($scope,
'accountAndContactsFactory',function($scope,   
accountAndContactsFactory))
 {

  $scope.save = function(contact,account){

accountAndContactsFactory.save(contact,account).then(function(result) 
               {$scope.message = "success";},
         function(error) {$scope.message = "wrong";}
          )
    }
 });

 </script>  
 </head>
 <body>  
<div class="bootstrap" ng-app="accountApp" ng-   
controller="MainController">
<form name="simpleForm" novalidate="novalidate">
    <table>
    <tr>
        <td>First Name:</td><td><input type="text" name="FirstName" ng-  
model="contact.FirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td><td><input type="text" required="true"   
name="LastName" ng-model="contact.LastName"/>
        <span class="error" ng-  
show="simpleForm.LastName.$error.required">Required!</span></td>
    </tr>
    <tr>
        <td>Business Name:</td><td><input type="text" required="true"   
name="BusinessName" ng-model="account.Name"/>
    <span class="error" ng-
show="simpleForm.BusinessName.$error.required">Required!</span></td>
    </tr>
     <tr>
       {{message}}
    </tr>
    <tr>
       <input type="button" ng-click="save(contact,account)" ng-  
disabled="simpleForm.$pristine || simpleForm.$dirty &&   
simpleForm.$invalid"     value="Save"/>
      </tr>
      </table>

      </form>
   </div>
   </body>
   </html>
   </apex:page>

I have tried several options like using Visualforce merge fields for remoting,  removal of html tags.. and all but the above code is not detecting angularjs and nothing execution of code happens.

Please suggest.
ajay varmaajay varma
After referring to tons of articles, I found the solution. (Actually I understood what actually is Factory and Service in Angular , thats the reason I found the answer.
  
app.factory('appFactory', function(){
    return {
        saveAccountWithContact: function(contact,Account) {
          var reply ="";
           var jsonContact = JSON.stringify(contact);
           var jsonAccount = JSON.stringify(Account);
           Visualforce.remoting.Manager.invokeAction(
          '{!$RemoteAction.SampleRemoteActionPageController.saveAccountWithContact}',
            jsonContact,jsonAccount,
            function(result, event) {
             if (event.status){
                reply = "Factory Saved Data";
             }else
             {
               reply  = "Failed";
             }
       }); 
       return reply;
     }
    };             
});

Angular Controller
  
app.controller("ContactCtrl", function($scope,appFactory) {
   
   $scope.contacts = [];
   $scope.getContacts = function() {
     Visualforce.remoting.Manager.invokeAction(
     '{!$RemoteAction.SampleRemoteActionPageController.myContacts}', 
     function(result, event) {
       $scope.contacts = result;
       $scope.$apply();
     }); 
     }
     
     $scope.saveData = function(contact,Account) {
        $scope.message = appFactory.saveAccountWithContact(contact,Account);
        $scope.apply();
     }    
   });

Need to move getcontacts to Factory as well...but ...here's the code for someone ...who is stuck like me.