2

Moodle Web サービスから Json データを取得するアプリケーションを構築し、AngularJs を使用してアプリにデータを表示しています。Moodle Web サービスには複数の機能があるため、Angular アプリには複数のコントローラーが必要です。

Visual Studio と Cordova を使用してアプリを作成しています。

Moodle からトークンを取得し、jstorage を使用して保存し、単一ページのモバイル アプリのさまざまなペインに表示するためのソリューションを考え出しました。

他の多くの StackOverflow の回答のおかげで、私はこのソリューションにたどり着きました!

(これは「質問をして自分で答える」投稿の 1 つですが、さらに提案を歓迎します。)

参照 -モバイルアプリからMoodleで認証する

4

1 に答える 1

3

ステップ 1. jstorage (myApp.js) に保存した場所から Web トークンを取得します。

(セッショントークンを保存する方法については、モバイルアプリから Moodle で認証するを参照してください)

 moodleUrl = 'https://moodle.yourwebsite.com/webservice/rest/server.php';
session = $.jStorage.get('session', ''); // syntax: $.jStorage.get(keyname, "default value")
moodlewsrestformat = 'json';
wstoken = session;
concatUrl = moodleUrl + '?moodlewsrestformat=' + moodlewsrestformat + '&wstoken=' + wstoken + '&wsfunction=';

ステップ 2. Angular モジュールを作成する (myApp.js 内)

angular.module('myApp.controllers', []);

var myApp = angular.module('myApp', ['ui.bootstrap']);

( ui.bootstrap 部分は、Bootstrap UI 要素を使用しているかどうかに応じてオプションです)

ステップ 3. コントローラーを作成する (myApp.js 内)

myApp.controller('myFirstCtrl', function ($scope, $http) {
    url = concatUrl + 'local_appname_ws_function_name';

    $http.get(url).then(function (response) {
        $scope.items = response.data;
    })
});

myApp.controller('mySecondCtrl', function ($scope, $http) {
    url = concatUrl + 'local_appname_ws_function_name';

    $http.get(url).then(function (response) {
        $scope.things = response.data;
    })
});

ステップ 4. html で ng-app インスタンスを作成します (モバイル アプリの index.html 内)。

<body>
    <div class="overlay">&nbsp;</div>
    <div data-role="page" id="welcome-page">
        <div data-role="header" class="header">
            <h1 id="app-title">
                App title
            </h1>
        </div>
        <div role="main" id="main" class="ui-content scroll" ng-app="myApp">
   <!--ng-repeat elements will go here-->
</div>

ステップ 5. コントローラーごとに 1 つの ng-repeat 要素を作成する (index.html 内) 

<div role="main" id="main" class="ui-content scroll" ng-app="myApp">
    <div data-role="content" class="pane" id="">
        <h2>Your Items</h2>
        <div class="page-wrap scroll" ng-controller="myFirstCtrl">

            <div ng-repeat="item in items | orderBy : 'item.name'" id="{{item.id}}">
                <div class="item-data">
                    {{item.name}}<br />
                     <time datetime="{{item.date}}">{{item.date}}</time>
                </div>
            </div>
        </div>
    </div>
    <div data-role="content" class="pane" id="">
        <h2>Your Things</h2>
        <div class="page-wrap scroll" ng-controller="mySecondCtrl">

            <div ng-repeat="thing in things | orderBy : 'thing.name'" id="{{thing.id}}">
                <div class="thing-data">
                    {{thing.name}}<br />
                     <time datetime="{{thing.date}}">{{thing.date}}</time>
                </div>
            </div>
        </div>
    </div>  
</div>
于 2016-09-02T09:16:01.477 に答える