Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS クイックスタート > 参照と基本的なマークアップ |
Wijmo および Angular で使用する HTML マークアップの基本的なフレームワークは、次のようになります。ここにはモデル(オプション)およびコントローラー(必須)が含まれます。以下に、このフレームワークの各要素について説明します。
基本的なフレームワーク |
コードのコピー |
---|---|
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> <script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) {} </script> </head> <body ng-controller="MyController"> </body> </HTML> |
AngularJS コンポーネントを使用するには、jQuery、Wijmo、Angular、および Wijmo AngularJS 統合ライブラリへの参照を追加する必要があります。Angular の参照は、jQuery および Wijmo のすべての参照の後に指定しなければならない点に注意してください。上記の「基本的なフレームワーク」において、参照は <head> 内のスクリプトの前に指定します。
ドロップダウンすると、Wijmo で AngularJS を使用するために必要となるすべての参照を確認できます
参照 |
コードのコピー |
---|---|
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script> |