Angularjs 使用Moodle Web服务时变得棱角分明_Angularjs_Json_Single Page Application_Moodle Api_Jstorage

Angularjs 使用Moodle Web服务时变得棱角分明

angularjs json

Angularjs 使用Moodle Web服务时变得棱角分明,angularjs,json,single-page-application,moodle-api,jstorage,Angularjs,Json,Single Page Application,Moodle Api,Jstorage,我正在构建一个从Moodle web服务获取Json数据的应用程序，并使用AngularJs在应用程序中显示数据。Moodle webservice上有多个函数，因此我需要Angular应用程序中的多个控制器我正在使用Visual Studio和Cordova编写应用程序我提出了一个解决方案，可以从Moodle获取令牌，使用jstorage存储令牌，并将其显示在单页移动应用程序的各个窗格中多亏了许多其他的StackOverflow答案，我才得出了这个解决方案（这是一篇“问你的问题，自己回

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

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

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

多亏了许多其他的StackOverflow答案，我才得出了这个解决方案

（这是一篇“问你的问题，自己回答”的帖子，但欢迎进一步的建议。）

另请参见第1步。从存储在jstorage（myApp.js）中的位置获取web令牌

<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>

（有关如何存储会话令牌，请参阅）

第2步。创建角度模块（在myApp.js中）

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

第3步。创建控制器（在myApp.js中）

第4步。在html中创建ng应用程序实例（在移动应用程序的index.html中）


应用程序标题

第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>


您的物品
{{item.name}}

{{item.date}
你的东西
{{thing.name}}

{{thing.date}

NB:code“按原样”提供，但未对其用途作出任何承诺，也未对维护或支持作出任何承诺。

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;
    })
});

<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>

<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>