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"> </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; | |
| }) | |
| }); |