使Angular与Moodle Web服务一起使用 [英] Getting Angular to work with a Moodle webservice
问题描述
我正在构建一个应用程序，以从Moodle Web服务获取Json数据，并使用AngularJs在应用程序中显示数据. Moodle Web服务上有多个功能，因此我在Angular应用中需要多个控制器.
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.
我正在使用Visual Studio和Cordova编写应用程序.
I am using Visual Studio and Cordova to write the app.
我想出了一种解决方案，用于从Moodle中获取令牌，使用jstorage存储令牌，并将其显示在单页移动应用程序的各个窗格中.
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.
由于有了其他许多StackOverflow的答案，我才习惯了此解决方案！
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.)
推荐答案
步骤1.从存储在jstorage中的Web令牌(在myApp.js中)获取Web令牌
(有关如何操作，请参见通过移动应用程序对Moodle进行身份验证来存储会话令牌)
(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=';
第2步.在myApp.js中创建Angular模块
angular.module('myApp.controllers', []);
var myApp = angular.module('myApp', ['ui.bootstrap']);
(ui.bootstrap部分是可选的，具体取决于您是否正在使用Bootstrap UI元素)
(the ui.bootstrap part is optional depending on whether you are using Bootstrap UI elements)
第3步(在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;
})
});
第4步.在html中(在您的移动应用程序的index.html中)创建ng-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>
第5步.为每个控制器创建一个ng-repeat元素(在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>
这篇关于使Angular与Moodle Web服务一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
