Question

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

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

我已经提出了一个解决方案，用于从Moodle获取令牌，使用jstorage存储它，并将其显示在单页移动应用程序的各个窗格上。

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

（这是其中一个“问你的问题并自己回答”的帖子 - 但欢迎提出进一步的建议。）

另见 - Authenticate with Moodle from a mobile app

Answer 1

步骤1.从您在jstorage（myApp.js）中存储的地方获取网络令牌

（有关如何存储会话令牌，请参阅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=';

步骤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中创建ng-app实例（在移动应用的index.html中）

<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 Web服务一起工作

1 个答案: