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"> </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)
Comments
Post a Comment