+ Start a Discussion
s_macs_mac 

Angualr JS in Visualforce Page

Angualr JS in VF Page, Can Some body please help me in, invoking the contoller and passing parameter to controller from Angular JS.
Thanks in Advance.
 
Pramodh KumarPramodh Kumar
I created small page with input type text and button and i used remoting to invoke the controller method 

I am passing value to the controller and returning same value to the page again

Here is the small code for your scenario
<apex:page standardStylesheets="false" cache="false" showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" controller="angularController">
    <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.15/angular-ui-router.js"></script>
    <body ng-app="uiTest">
        
        <div ng-controller="searchController">
            <input type="text" ng-model="inputString"/>
            {{ inputString }}
            <input type="button" ng-click="queryAccount();" value="button"/>
        </div>
        <script type="text/javascript">
            (function(){
                var uiTestApp = angular.module('uiTest',['ui.router']);
                
                
                uiTestApp.controller('searchController' ,function ($scope, $filter,$http){
                    $scope.queryAccount = function(){
                        inputString = $scope.inputString;
                         Visualforce.remoting.Manager.invokeAction(
                             '{!$RemoteAction.angularController.queryAccount}',
                             inputString,
                             function(result, event) {
                             if (event.status) {
                                alert(result);
                              } else {
                                alert(event);
                              }
                             },
                            { buffer: true, escape: true, timeout: 30000 }                         
                         );
                    };
                    
                });
            })();
        </script>
    </body>
</apex:page>

global with sharing class angularController{
@RemoteAction
    global static string queryAccount(string inputVa){
    
        return inputVa;
        
    }
}


Let me know if you have any issues with the code.

Thanks,
pRAMODH.