2

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

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

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

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

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

另请参阅 -从移动应用程序使用 Moodle 进行身份验证

4

1 回答 1

3

步骤 1. 从您在 jstorage 中存储的位置获取 Web 令牌（在 myApp.js 中）

（有关如何存储会话令牌，请参阅通过移动应用程序使用 Moodle 进行身份验证）

 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']);

（根据您是否使用 Bootstrap UI 元素，ui.bootstrap 部分是可选的）

步骤 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>
于 2016-09-02T09:16:01.477 回答