Skip to content

Instantly share code, notes, and snippets.

@vogelbeere
Last active April 13, 2018 14:03
Show Gist options
  • Save vogelbeere/fac1f333995c9f81a333047dce5db5d9 to your computer and use it in GitHub Desktop.
Save vogelbeere/fac1f333995c9f81a333047dce5db5d9 to your computer and use it in GitHub Desktop.
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.

This example shows how to get the token from Moodle, store it using jstorage, and display it on the various panes of the single-page mobile app.

<!--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>
<!--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>
</body>
//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)
// https://stackoverflow.com/questions/39290274/authenticate-with-moodle-from-a-mobile-app
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;
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment