Friday, 2 December 2016

Angular with a Moodle webservice

Getting Angular to work with a Moodle webservice

I am building an application to get Json data from a Moodle web service, and using AngularJs to display the data in the app. There are multiple functions on the Moodle webservice, so I need multiple controllers in the Angular app.

I am using Visual Studio and Cordova to write the app.

I have come up with a solution for getting the token from Moodle, storing it using jstorage, and displaying it on the various panes of the single-page mobile app.


Step 1. Get web token from where you stored it in jstorage (in myApp.js)
 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=';
Step 2. create Angular module (in myApp.js)
angular.module('myApp.controllers', []);

var myApp = angular.module('myApp', ['ui.bootstrap']);
(the ui.bootstrap part is optional depending on whether you are using Bootstrap UI elements)
Step 3. create controllers (in 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;
    })
});
Step 4. create ng-app instance in html (in index.html of your mobile app)
<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>
Step 5. Create one ng-repeat element for each controller (in 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>
NB: code is supplied 'as is' without any commitment to it being fit for purpose and is also supplied without any commitment to maintenance or support.

(See this on StackOverflow)