Search code examples
angularjsjsonsingle-page-applicationmoodle-apijstorage

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.

With thanks to many other StackOverflow answers I have used to arrive at this solution!

(This is one of those "ask your question and answer it yourself" posts - but further suggestions are welcome.)

See also - Authenticate with Moodle from a mobile app

Solution

  • Step 1. Get web token from where you stored it in jstorage (in myApp.js)

    (see Authenticate with Moodle from a mobile app for how to store the session token) 

     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>