让 Angular 使用 Moodle 网络服务

Question

我正在构建一个应用程序以从 Moodle 网络服务获取 Json 数据，并使用 AngularJs 在应用程序中显示数据。 Moodle 网络服务上有多个功能，所以我需要在 Angular 应用程序中使用多个控制器。

我正在使用 Visual Studio 和 Cordova 编写应用程序。

我想出了一个解决方案，可以从 Moodle 获取令牌，使用 jstorage 存储它，并在单页移动应用程序的各个面板上显示它。

感谢许多其他 Whosebug 的回答，我已经习惯了这个解决方案！

（这是 "ask your question and answer it yourself" 的帖子之一 - 但欢迎提出更多建议。）

另见 -

Answer 1

第 1 步。从您将其存储在 jstorage 中的位置获取网络令牌（在 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=';

步骤 2. 创建 Angular 模块（在 myApp.js 中）

angular.module('myApp.controllers', []);

var myApp = angular.module('myApp', ['ui.bootstrap']);

（ui.bootstrap 部分是可选的，具体取决于您是否使用 Bootstrap UI 元素）

步骤 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">&nbsp;</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 网络服务

Getting Angular to work with a Moodle webservice

angularjs

json

single-page-application

moodle-api

jstorage