この記事の目次
SalesforceでAngular.jsを使用する方法とは?開発環境を構築しよう
Angularとは?
![](https://images.pexels.com/photos/2370935/pexels-photo-2370935.jpeg)
SalesforceのVisualforceにAngular.jsをロードする方法
angular.min.jsを読み込みHello world を表示させてみましょう
静的リソースを作成するときに、ページの入力フォームが表示されますので任意の名前を入力してください。ここでは仮にnewangularと入力します。 既に記述されているコードの上から以下に記載したコードを上書きしてください。< apex:page showHeader=""false"" sidebar=""false"" >
< head >
< link rel=""stylesheet"" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css""/ >
< apex:includeScript value=""{!$Resource.DEMO_Angular}""/ >
< /head >
< body ng-app=""myApp"" class=""container"" ng-controller=""myctrl"" >
< div id=""demo"" ng-controller=""demoAngularController"" >
{{testVar}} World
< /div >
< /body >
< script >
var demoModule = angular.module('demo', []);
demoModule.controller('demoAngularController', function ($scope) {
$scope.testVar = 'Hello';
});
angular.bootstrap(document.getElementById(""demo""),['demo']);
< /script >
< /apex:page >
ここまで進めたら、実際に「Hello world」と出力されているか確認してみましょう。
左上の[preview]ボタンを押してください。新しいタブが開き入力したコードの結果が表示され、「Hello world」と出力されていることが確認できます。
SalesforceにAngularをロードする記述についての詳細説明
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/9e08934fd24485c7d9e691a312f16a4ef7ff96eb/35243f00-6773-4465-8ac2-7ac2bb3bf90c.jpg)
< apex:includeScript value=""{!$Resource.DEMO_Angular}""/ >
この記述はVISUAL FORCEで使用するAPEXの記述です。ダウンロードしたAngular.jsを「DEMO_Angular」という名前で登録したので、 JavaScriptファイルを読み込むincludeScript value=の値に{!$Resource.DEMO_Angular}と記述しています。
HTMLにレタリングされた結果は以下のようになります。
< script type='text/javascript' src='/resource/1233160164000/DEMO_Angular' >
手動ブートストラップ
angular.bootstrap(document.getElementById(""demo""),['demo']);
JavaScriptの基本的な記述が書かれていますが、一箇所だけ手動bootstrapの記述について解説しておきます。
この記述は「Angularアプリケーションを手動で初期化する」という意味です。Angularアプリケーションをブートストラップさせるためのもので、サーバーとのやり取りがすべて完了した後にAngularコンパイルのみが動作する仕組みとなっています。
これはAngularアプリケーションをブートストラップしてコンパイルする前に書かれた何かしらの処理の結果にかかわらず、Angularアプリケーションのコンパイルの動作を保証するための記述です。
ng-app属性の記述
< body ng-app=""myApp"" class=""container"" ng-controller=""myctrl"" >
< div id=""demo"" ng-controller=""demoAngularController"" >
{{testVar}} World
< /div >
< /body >
ng-appの意味は先ほどのブートストラップの記述と同じように「Angularアプリケーションを初期化する」という目的で記述しています。つまりAngular.jsの機能を有効化するために記述しているので必ず記述する必要があります。
ブートストラップが手動で初期化するのに対して、ng-app属性は自動で初期化する挙動となります。ng-app属性はHTMLドキュメント内に1つだけ記述することが可能です。ng-appタグを利用する代わりに、 クラス属性として読み込みこむこともできます。
例えば、ビジュアルフェスページはHTMLのカスタマイズ属性をすることができないため、別の方法でタグを読み込む必要があります。つまり以下のような記述になります。
< body class="" ng-app""> < /body >
どちらの記述も利用するので覚えておくと良いでしょう。
controllerの記述
var demoModule = angular.module('demo', []);
demoModule.controller('demoAngularController', function ($scope) {
$scope.testVar = 'Hello';
});
Angular.jsを利用する上でコントローラーを定義する必要があります。
上記の例では、angular.module(‘demo’, []); と定義したモジュールオブジェクトをdemoModuleという変数に代入しています。そして「demoAngularController」という名前でコントローラーを登録しています。
コントローラーはモジュールオブジェクトに登録してスコープを準備するために必要な構成要素です。つまりcontrollerメソッドの基本構文は以下となります。
controller(ControllerName, Constructor)
コンストラクター関数の引数に設定されている($scope)オブジェクトは、functionの中で設定された値を登録できます。
ここでは「$scope.testVar = ‘Hello’; 」という値を登録しています。
ng-controller属性の記述
< div id=""demo"" ng-controller=""demoAngularController"" >
{{testVar}} World
< /div >
先ほどfunctionの中で設定された値に「$scope.testVar = ‘Hello’; 」を登録しました。
スコープオブジェクトに設定したプロパティを反映させるにはコントローラーが紐付いている要素の中に「{{プロパティ名}}」と記述します。
コントローラーはdiv要素(id=”demo”)に紐づいているため、全体で値を反映させたい場合は、< body ng-controller=””demoAngularController >このようにbody要素に属性を紐付けしてください。
SalesforceにAngular.jsを読み込むだけで利用できる
![](https://b-engineer-media-cms.s3.amazonaws.com/item/image/user/9e08934fd24485c7d9e691a312f16a4ef7ff96eb/92e5f7e9-db15-40b0-a27f-8f192f3215b1.jpg)
この記事の監修者・著者
![株式会社オープンアップITエンジニア](https://tenshoku-careerchange.jp/wp-content/uploads/2023/07/fzxADbr-_400x400-1-150x150.jpg)
-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
最新の投稿
- 2024年3月26日キャリア・転職保安職(自衛官・警察・消防官など)に向いている人の性格・特徴ランキング【現役保安職(自衛官・警察・消防官など)36人が回答】
- 2024年3月26日キャリア・転職保安職(自衛官・警察・消防官など)に必要なスキルランキング&スキルアップの方法とは?【現役保安職(自衛官・警察・消防官など)36人が回答】
- 2024年3月26日キャリア・転職クリエイター職(ライター・デザイナー・編集)に向いている人の性格・特徴ランキング【現役クリエイター職(ライター・デザイナー・編集)64人が回答】
- 2024年3月26日キャリア・転職クリエイター職(ライター・デザイナー・編集)に必要なスキルランキング&スキルアップの方法とは?【現役クリエイター職(ライター・デザイナー・編集)64人が回答】