AngularJS с Salesforce

Question

Нужна помощь в знании того, как использовать AngularJS на страницах Salesforce Lightning и VisualForce? Я знаю, что он должен использоваться с использованием статического ресурса, но для его использования нужны подробные пошаговые инструкции.

Answer 1

Ну, когда мы говорим об AngularJS, я полагаю, что вы говорите о версии 1.x, потому что версию 2.0, которая в настоящее время 6.0, нужно использовать по-другому по сравнению с более ранней версией.

Для Angular 1.x я перечисляю здесь шаги:

• Самый первый шаг - загрузить последнюю версию AngularJS. Вы можете получить это здесь. https://angularjs.org/

• Сжатие файла AngularJS и создание статического ресурса, чтобы вы могли ссылаться на него на своих страницах. Если вы хотите узнать, как создать статический ресурс в Salesforce, обратитесь к документации SF. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm

(У вас также есть возможность напрямую ссылаться на файл CDN на ваших страницах VF, однако рекомендуется использовать статические ресурсы.)

Теперь, чтобы запустить AngularJS в действие, вы должны сделать что-то, что называется «начальной загрузкой» вашего приложения.

Это можно сделать двумя способами:

• Используйте директиву «ng-app». (ПРИМЕЧАНИЕ. В вашем HTML-документе может быть только одна директива ng-app. Если появится более одной директивы ng-app, будет использовано первое появление.)

• И второй способ - это ручная загрузка. Вы можете обратиться к этому блогу, чтобы узнать больше об этом. http://blogs.quovantis.com/process-to-use-manual-bootstrapping-in-angularjs-with-examples/

Вы можете использовать следующий код, чтобы увидеть ручную загрузку в действии.

<apex:page showHeader="true" sidebar="true">
<apex:includeScript value="{!URLFOR(<your-static-resource-name>,'angular.min.js')}">
<div id="demo" ng-controller="demoAngularController">
        {{testVar}}
</div>    
<script>
    var demoModule = angular.module('demo', []);
        demoModule.controller('demoAngularController', function ($scope) {
        $scope.testVar = 'Prem';
    });
    angular.bootstrap(document.getElementById("demo"),['demo']);
</script>

Убедитесь, что вы заменили статическое имя ресурса реальным именем, которое вы создали в системе.

Я также добавил фрагмент кода.

var app = angular.module('demo', []);


app.controller('demoAngularController',function MyController($scope) {

    $scope.testVar = 'Prem';
});    
angular.bootstrap(document.getElementById("demo"),['demo']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="demo">


<div ng-controller='demoAngularController'>

    <h1>Hello, {{ testVar }}!</h1>
    
</div>
</div>

для угловых 2.0

Если вы хотите узнать, как использовать Angular2.0 (или Angular6.0, как известно в настоящее время), вы можете взглянуть на этот справочник и сообщить мне свой отзыв.

https://premjpal.wordpress.com/2018/09/06/getting-started-with-angular6-in-salesforce/

Удачного кодирования!