Sign Up ›

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
 
saith ammsaith amm

Yes, it is possible to use Angular 6 with Salesforce Visualforce. However, there are some considerations and limitations to keep in mind.
Salesforce Visualforce is a framework provided by Salesforce for building custom user interfaces within the Salesforce platform. It primarily uses Apex and Visualforce markup language for development. Angular 6, on the other hand, is a popular JavaScript framework for building web applications.
To integrate Angular 6 with Salesforce Visualforce, you can follow these general steps:
Set up an Angular 6 project: Create a new Angular 6 project using the Angular CLI or any other preferred method.
Build your Angular application: Develop your Angular application as per your requirements, following the Angular best practices and guidelines.
Prepare your Angular app for deployment: Build your Angular application using the Angular CLI, which will generate a set of JavaScript and CSS files that can be included in your Visualforce page.
Create a Visualforce page: In Salesforce, create a Visualforce page that will host your Angular application. You can use Visualforce markup and Apex code to define the structure and logic of your page.
Reference the Angular files in the Visualforce page: Include the generated JavaScript and CSS files from your Angular build in the Visualforce page using script and style tags.
Handle communication with Salesforce: If your Angular application needs to interact with Salesforce data or functionality, you can use the Salesforce REST API or other Salesforce-specific libraries like the Salesforce Lightning Data Service.
It's important to note that there may be some limitations and considerations when integrating Angular with Visualforce. For example, Visualforce uses its own markup language, so you may need to handle any conflicts between Angular directives and Visualforce syntax. Additionally, you might need to address cross-origin resource sharing (CORS) issues if your Angular application makes API requests to a different domain.
Overall, while it is possible to use Angular 6 with Salesforce Visualforce, it's essential to carefully plan and consider the specific requirements of your project to ensure a successful integration.

movers in dubai (https://www.dubaimover.ae/)