Getting Angular to work with Moodle webservice
I am creating an application to receive Json data from a Moodle web service and use AngularJs to display the data in the application. There are several functions on the Moodle webservice, so I need multiple controllers in my Angular app.
I am using Visual Studio and Cordova to write an application.
I came up with a solution to get a token from Moodle, store it with jstorage, and display it in different panes of a single page mobile app.
Thanks to many other StackOverflow answers I've used to arrive at this solution!
(This is one of the "ask your own question and answer it yourself" questions, but further suggestions are welcome.)
source to share
Step 1: Get the web token you saved it from in jstorage (in myApp.js)
(see Authenticating with Moodle from the Session Token Storage 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;
})
});
Step 4. Instantiate ng-app 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 per 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>
source to share