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
jane1234jane1234 

how to include angular js 6 with Salesforce visualforce

I need to use the angular 6 with salesforce visualforce . Is that possible
Parmanand PathakParmanand Pathak
Hi,
Follow the below references - 
https://www.algoworks.com/blog/develop-salesforce-visualforce-apps-using-angularjs/
https://www.w3schools.com/angular/default.asp

Include the  CDN of AngularJs  in your VF  page and then use the library according to your requirement.

Mark it as best answer if it helps you.

Thanks,
Parmanand Pathak
 
Paul BarberPaul Barber
I think this question is about Angular 6 and not AngularJS.
jane1234jane1234
yes angular 6
 
santosh latpate 5santosh latpate 5
Does anyone got the answer for this. I am also searching for the same. Does anyone know how to use angular 6 on salesforce visualforce page.
Vineeta Sharma 7Vineeta Sharma 7
Hi, Here is solution of your question you can easily combine angular js with salesforce visualforce using the given code
Using this code you can find all the opportunities records related to particular account by providing account id.


Test.vfp
  
<apex:page standardStylesheets="false" sidebar="false"
   showHeader="false" applyBodyTag="false" applyHtmlTag="false"
   docType="html-5.0" controller="AngularDemoController">
<html lang="en" ng-app="demoApp">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Angular </title>
   <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>
     // define the app
     var demoApp = angular.module('demoApp', []);
     // add the controller
     demoApp.controller('DemoCtrl', function ($scope) {
         $scope.account = {!account}
         $scope.opportunity = {!opportunity}
     });
   </script>
</head>
<body class="container" ng-controller="DemoCtrl">
   <h1 style="color:Green">{{account.Name}}</h1>
   <p class="lead" style="color:Gray">
   {{account.BillingStreet}}<br/>
   {{account.BillingCity}}, {{account.BillingState}}
   {{account.BillingPostalCode}}
   </p>
    <b>Search</b>&nbsp;&nbsp;&nbsp;<input ng-model="query" /><br/><br/>
    
    
   <table class="table table-bordered">
     <tr>
       <th>Name</th>
       <th>Email</th>
       <th>Amount</th>
       <th>Revenue</th>
       <th>Id</th>
     </tr>
     <tr ng-repeat="opportunity in opportunity | filter:query">          
       <td>{{opportunity.Name}}</td>
       <td>{{opportunity.Email__c}}</td>
       <td>{{opportunity.Amount}}</td>
       <td>{{opportunity.ExpectedRevenue}}</td>
     
       <td>{{opportunity.Id}}</td>
       
     </tr>
   </table>
</body>
</html>
</apex:page>



AngularDemoController  is the controller class for the given visualforce code

AngularDemoController 
global with sharing class AngularDemoController {

    

   // hardcode an account id for demo purposes
   static String accountId = '0010o00002BlG17AAF';
 
   global static String getAccount() {
       return JSON.serialize([select name, billingstreet,
           billingcity, billingstate, billingpostalcode
           from account where id = :accountId][0]);
   }
   global static String getOpportunity() {
        return JSON.serialize([select id, name, email__c,amount,ExpectedRevenue
           from opportunity where accountId = :accountId]);
    }    
 
   }


 
Ajay K DubediAjay K Dubedi
Hi Jane,
please visit below link:
https://webkul.com/blog/angular-js-with-visualforce-page/
here you will come to about all advantage and limitations

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Deepali KulshresthaDeepali Kulshrestha
Hi Jane,

In this post, I am going to share the information about how you can use Angular JS with Visualforce to display records onto your Visualforce Page.
Please refer the links given below, that may be helpful to you:
https://webkul.com/blog/angular-js-with-visualforce-page/
https://www.youtube.com/watch?v=vWo3nwwfSKI

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
NagaSudheer Kamepalli 4NagaSudheer Kamepalli 4
Hii vineeta sharma7
In your code working fine but in Opportunity we have required fileds CloseDate and Stage