Как включить HTML-страницу, которая имеет контроллер, который обращается к данным с другого сервера в другой HTML-странице? - PullRequest
Новая
       1

Как включить HTML-страницу, которая имеет контроллер, который обращается к данным с другого сервера в другой HTML-странице?

0 голосов
/ 25 мая 2018

Я работаю над одностраничным приложением и пытаюсь включить HTML-страницу в другую HTML-страницу, включаемая страница имеет контроллер, который имеет API для отображения данных с другой платформы.

Когда я захожу на свою страницу (index.html) в браузере, я получаю " Нет заголовка 'Access-Control-Allow-Origin' на запрашиваемом ресурсе. Origin 'http://localhost:9002' поэтому доступ запрещен. Ответ имеет код состояния HTTP 401".CORS уже обрабатывается на доступной платформе, потому что я могу отображать данные с той же платформы с помощью ng-view, но я получаю эту ошибку при использовании ng-include.

Мой index.html состоит из двух частей, одной частиотобразить страницу с помощью ng-view, которая является динамической, и другую, которую я хочу ng-include, для страницы, которая не изменится.

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="./images/favicon.ico"/>
    <title>{{ 'label.heading.amala' | translate }}</title>
    <style>[data-ng-cloak] {
        display: none !important;
   }</style>
<link href="styles/styles.css" rel="stylesheet"/>
</head>
<body class="preview whitebg" id="top" data-spy="scroll" data-target=".subnav" data-offset="80"
  data-ng-controller="MainController">

<!--Loader -->
<div id="loaderWrapper" data-ng-hide="domReady" style="position: absolute; height: 100%; width: 100%; top: 0;">
<div id="loader" style="margin: 175px auto">

    <img src="./images/logo.png" alt="Amala" style="min-width: 50px;   width: 15%; margin: 0 auto"
         class="img-responsive">
    <img src="images/small-loader.gif" style="margin: 10px auto" class="img-responsive">

</div>
</div>

<div data-ng-hide="!domReady" data-ng-cloak>
<!-- Login Form  -->
<div class="container" style="margin-top:10vh;" data-ng-hide="currentSession.user != null" data-ng-controller="LoginFormController">
    <div class = "row">
       <div class = "col-xs-12">
          <div id = "head">

          </div>
       </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="pull-right ">
                {{ 'label.input.changelanguage' | translate }}
                <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-default btn-xs" uib-dropdown-toggle ng-disabled="disabled">
                        {{optlang.name}} <span class="caret"></span>
                    </button>
                    <ul class="lang-dropdown" uib-dropdown-menu>
                        <li ng-repeat="lang in langs">
                            <a href ng-click="changeLang(lang, $event)">{{lang.name}}</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div ng-show="resetPassword">
                <form class="form-inline pull-right" role="form">
                    <label><strong>{{ 'label.message.password.expired' | translate }}</strong></label>

                    <div class="form-group">
                        <input type="password" data-ng-model="passwordDetails.password"
                               placeholder="{{ 'label.input.password' | translate }}" class="input-sm form-control"
                               required
                               id="password">
                    </div>
                    <div class="form-group">
                        <input type="password" data-ng-model="passwordDetails.repeatPassword"
                               placeholder="{{ 'label.input.repeatpassword' | translate }}"
                               class="input-sm form-control"
                               required id="repeatPassword">
                    </div>
                    <button class="btn btn-success" type="submit" data-ng-click="updatePassword()"
                            id="updatepassword-button">{{ 'label.button.resetPassword' | translate }}
                    </button>
                </form>
            </div>

        </div>


    </div>

           <div class="row">
                <div class="col-sm-4 col-sm-offset-4 text-center" id = "image">

                    <img src="images/logo.png" alt="Amala" style="width:80%; margin:auto;"
                         class=" text-center img-responsive"/>
                </div>
            </div>

            <div class="row">
                    <div data-ng-form="loginForm">

                        <div class="row" ng-hide="resetPassword">
                               <div id="myform">

                                    <div id="login">

                                            <form>
                                                <p id = "separator">                            
                                                    <input type="text" name="username"
                                                       ng-model="loginCredentials.username"
                                                       placeholder="{{ 'label.input.username' | translate |lowercase }}"
                                                       required/>
                                                </p>
                                                <p id = "separator">                                
                                                     <input type="password" name="password"
                                                       ng-model="loginCredentials.password" autocomplete="new-password"
                                                       placeholder="{{ 'label.input.password' | translate | lowercase }}"
                                                       required/>
                                                </p>

                                                <button class="btn btn-block btn-primary" type="submit" data-ng-show="!load" data-ng-click="login()"
                                                        id="login-button">
                                                    {{'label.button.signin' | translate }}
                                                </button>
                                                <button class="btn btn-block btn-primary" type="submit" data-ng-show="load">
                                                    <img data-ng-src="images/ring.svg" alt=""> <b>loading...</b>
                                                </button>
                                            </form>
                                            <div class="alert alert-danger" ng-show="authenticationFailed" id = "errorMessage">
                                                    {{ authenticationErrorMessage | translate }}
                                            </div> 
                                    </div>

                                </div>



                        </div>

                    </div>

            </div> 


            <div class="row">
                <div class="col-sm-5" style="margin-top: 1%" ng-init="myVar = 'https://amala.co.tz'">
                    <p style="font-family: Georgia; font-size: 50px;">Lets grow together!</p>
                    <p style="font-family: Berlin Sans FB; font-size: 25px;">
                        Rapid growth in technology is widening development opportunities in the World.  <a ng-href="{{myVar}}" target="_blank">Amala</a> is designed to increase production in financial services organisations in terms of time, money and quality management. 
                    </p>
                </div>
            </div>


                <div id = "footer"> 
                   <font color="#4390df">Powered by Mifos</font>
               </div>   
    </div>

<!-- Navbar -->
<div ng-class="{fullscreen:true ,blockui:blockUI==true}" id="main" data-ng-hide="currentSession.user == null">
    <div class="loading-widget-div" data-ng-show="blockUI">
        <!-- TODO : insert loader here-->
         <span class="centerloader">
            <img src="images/833.svg" class="img-responsive">
        </span>
        <!--<div style="margin: 175px auto">
        </div>-->
    </div>

    <div id="mifos-reskin-ui-container">
        <div id="mifos-reskin-header-nav" ng-include="'views/_topnavbar.html'"></div>

        <div id="mifos-reskin-body-container" style="background-color: #ebeff1">
            <nav id="mifos-reskin-side-nav"  ng-scrollbar>
                <div class="left-nav">
                    <ul>
                        <li>
                            <a class="black" href="#/help">
                                <i class="fa fa-keyboard-o"></i>
                                <span>{{'label.anchor.keyboardshortcut' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/nav/offices">
                                <i class="fa fa-compass "></i>
                                <span>{{'label.anchor.navigation' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/tasks">
                                <i class="fa fa-check "></i>
                                <span>{{ 'label.anchor.tasks'| translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/entercollectionsheet">
                                <i class="fa fa-tasks "></i>
                                <span>{{'label.anchor.collectionsheet' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/individualcollectionsheet">
                                <i class="fa fa-tasks "></i>
                                <span>{{'label.anchor.individualcollectionsheet' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/freqposting">
                                <i class="fa fa-repeat "></i>
                                <span>{{'label.anchor.frequentpostings' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/journalentry">
                                <i class="fa fa-plus "></i>
                                <span>{{'label.anchor.addjournalentries' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/accounts_closure">
                                <i class="fa fa-folder "></i>
                                <span>{{'label.anchor.closingentries' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/accounting_coa">
                                <i class="fa fa-sitemap "></i>
                                <span>{{'label.heading.chartofaccounts' | translate}}</span>
                            </a>
                        </li>
                        <li>
                            <a class="black" href="#/notifications">
                                <i class="fa fa-bell" ></i>
                                <span>{{'label.heading.notification' | translate }}</span>
                            </a>
                        </li>
                        <li>
                            <a class="black" href="#/createclient">
                                <i class="fa fa-user "></i>+ <span>{{ 'label.anchor.client' |translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/creategroup">
                                <i class="fa fa-group "></i>+ <span>{{ 'label.anchor.group' |translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="#/createcenter">
                            <i class="fa fa-map-marker "></i>+ <span>{{'label.anchor.center' | translate}}</span>
                            </a>
                        </li>

                        <li>
                            <a class="black" href="mailto:xxxxxxxxx?Subject=Need%20assistance">
                                <i class="fa fa-question-circle"></i>
                                <span>{{'label.anchor.help' | translate }}</span> &nbsp; <i class="fa fa-external-link"></i>
                            </a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>
        <div id="mifos-reskin-body-view">
            <div class="" ng-view></div>
            <!-- Footer -->
            <br><br>
            <footer align="right">

            <p><a href="mailto:xxxxxxxxxxx?Subject=Need%20assistance">Support</a> &copy;<script> document.write(new Date().getFullYear()); </script> Amala</p>
            </footer>
            <hr>
        </div>
    </div>
 </div>
</div>

Коды включены _topnavbar.html 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" ng-click="isNavCollapsed = !isNavCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href id="leftnav-toggle">
            <span class="fa fa-bars"></span>
        </a>
        <a class="navbar-brand" href="#/home">
            <img src="./images/logo.png" alt="Amala">
        </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" uib-collapse="!isNavCollapsed">
        <ul class="nav navbar-nav" id="main-menu-left">
            <li class="" uib-dropdown is-open="li.client.status.isopen"
            ng-mouseenter="li.client.status.isopen = true" ng-mouseleave="li.client.status.isopen = false">
                <a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
                   ng-class="{ activate: isActive('clients') }" href >
                   <i class="fa fa-users"></i> {{
                    'label.anchor.clients' | translate }}<b class="caret"></b></a>
                <ul class="" uib-dropdown-menu id="swatch-menu">
                    <li><a href="#/clients" has-permission='READ_CLIENT'>{{ 'label.anchor.clients' | translate
                        }}</a></li>
                    <li><a href="#/groups" has-permission='READ_GROUP'>{{ 'label.anchor.groups' | translate
                        }}</a></li>
                    <li><a href="#/centers" has-permission='READ_CENTER'>{{ 'label.anchor.centers' | translate
                        }}</a></li>
                </ul>
            </li>
            <li uib-dropdown is-open="li.accounting.status.isopen"
            ng-mouseenter="li.accounting.status.isopen = true" ng-mouseleave="li.accounting.status.isopen = false">
                <a ng-class="{ activate: isActive('acc') }" href="#/accounting">
                    <i class="fa fa-money"></i> {{ 'label.anchor.accounting' | translate }}
                </a>
            </li>
            <li class="" uib-dropdown id="reports-menu" is-open="li.reports.status.isopen"
            ng-mouseenter="li.reports.status.isopen = true" ng-mouseleave="li.reports.status.isopen = false">
                <a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
                   ng-class="{ activate: isActive('rep') }" href>
                   <i class="fa fa-bar-chart-o"></i> {{
                    'label.anchor.reports' | translate }}<b class="caret"></b></a>
                <ul class="" uib-dropdown-menu>
                    <li><a href="#/reports/all" has-permission='READ_REPORT'>{{ 'label.anchor.all' | translate
                        }}</a></li>
                    <li><a href="#/reports/clients" has-permission='READ_REPORT'>{{ 'label.anchor.clients' |
                        translate }}</a></li>
                    <li><a href="#/reports/loans" has-permission='READ_REPORT'>{{ 'label.anchor.loans' |
                        translate }}</a></li>
                    <li><a href="#/reports/savings" has-permission='READ_REPORT'>{{ 'label.anchor.savings' |
                        translate }}</a></li>
                    <li><a href="#/reports/funds" has-permission='READ_REPORT'>{{ 'label.anchor.funds' |
                        translate }}</a></li>
                    <li><a href="#/reports/accounting" has-permission='READ_REPORT'>{{ 'label.anchor.accounting'
                        | translate }}</a></li>
                    <li><a href="#/xbrl" has-permission='READ_REPORT'>{{ 'label.anchor.xbrl' | translate }}</a>
                    </li>
                </ul>
            </li>
            <li class="" uib-dropdown id="preview-menu" is-open="li.admin.status.isopen"
            ng-mouseenter="li.admin.status.isopen = true" ng-mouseleave="li.admin.status.isopen = false">
                <a class="" uib-dropdown-toggle data-toggle="uib-dropdown"
                   ng-class="{ activate: isActive('admin') }" href>
                   <i class="fa fa-wrench"></i> {{
                    'label.anchor.admin' | translate }}<b class="caret"></b></a>
                <ul class="" uib-dropdown-menu>
                    <li><a href="#/users" has-permission='READ_USER'>{{ 'label.anchor.users' | translate }}</a>
                    </li>
                    <li><a href="#/organization">{{ 'label.anchor.organization' | translate }}</a></li>
                    <li><a href="#/system">{{ 'label.anchor.system' | translate }}</a></li>
                    <li><a href="#/products">{{ 'label.anchor.products' | translate }}</a></li>
                    <li><a href="#/templates" has-permission='READ_TEMPLATE'>{{ 'label.anchor.templates' |
                        translate }}</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right" id="main-menu-right">
     <li class="" ng-controller="DisplayLogoController"><img ng-hide="office.imagePresent" ng-src="./images/office-image-placeholder.png" alt="Logo">
    <img ng-show="office.imagePresent"  ng-src="{{image}}" alt="Logo">
      </li>
            <li class="" uib-dropdown id="notification-icon" ng-controller="NotificationsController" is-open="li.notif.status.isopen"
            ng-mouseenter="li.notif.status.isopen = true" ng-mouseleave="li.notif.status.isopen = false">
                <a href class="" uib-dropdown-toggle data-toggle="uib-dropdown"
                   ng-click="fetchItemsInNotificationTray()">
                    <span class="fa fa-bell"></span>
                </a>
                <div class="numberCircle" ng-hide="numberOfUnreadNotifications == 0">{{ numberOfUnreadNotifications }}</div>
                <ul class="notification-container" uib-dropdown-menu>
                    <ul class="notification-list" ng-repeat="notification in notifications">
                        <li ng-click="navigateToAction(notification)">
                            <h4>{{ notification.content }}</h4>
                            <span>{{ notification.createdAt }}</span>
                        </li>
                    </ul>
                    <li class="notification-list-link">
                        <a href="#/notifications">Show all notifications</a>
                    </li>
                </ul>
            </li>
            <li class="" uib-dropdown id="user-menu" is-open="li.user.status.isopen"
            ng-mouseenter="li.user.status.isopen = true" ng-mouseleave="li.user.status.isopen = false">
                <a id="user-dropdown" class="" uib-dropdown-toggle data-toggle="uib-dropdown" href>
                    {{currentSession.user.name}}<b class="caret"></b></a>
                <ul class="" uib-dropdown-menu>
                    <li><a id="help" href="xxxxxxxxxxxx?Subject=Need%20assistance"><i class="fa fa-question-circle"></i> {{
                        'label.anchor.help' | translate }}</a></li>
                    <li><a href="#/profile"><i class="fa fa-user"></i> {{ 'label.anchor.profile' | translate
                        }}</a></li>
                    <li><a href="#/usersetting"><i class="fa fa-cog"></i> {{ 'label.anchor.settings' | translate
                        }}</a></li>
                    <li><a id="logout" data-ng-click="logout()"><i class="fa fa-power-off"></i> {{
                        'label.anchor.logout' | translate }}</a></li>
                </ul>
            </li>

        </ul>
        <form ng-submit="search()" class="navbar-form navbar-right">
            <div class="input-group pull-left" >
                <input id="search" type="text" class="form-control input-sm unstyled" style="width:250px;" data-ng-model="search.query"
                       placeholder="{{'label.searchorpress'|translate}}">
                <div class="input-group-btn search-panel" uib-dropdown="">
                    <button type="button" class="btn btn-default btn-sm " uib-dropdown-toggle data-toggle="uib-dropdown">
                        {{currentScope.name | translate}} &nbsp;<span class="caret"></span>
                    </button>
                    <ul class="" uib-dropdown-menu>
                        <li  uib-dropdown ng-repeat=" searchScope in searchScopes" ng-click="changeScope(searchScope)">
                            <a href="">{{ searchScope.name |translate}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>
</nav>

Коды контроллера, которые получают доступ к данным с другой платформы DisplayLogoController.js 

(function (module) {
mifosX.controllers = _.extend(module, {
    DisplayLogoController: function (scope, routeParams, resourceFactory, http, API_VERSION, $rootScope) {
        scope.office = [];
    scope.formData = {};
        resourceFactory.officeResource.getAllOffices(function (data) {
            scope.parentId = data[0].id;
        });

        resourceFactory.officeResource.get({officeId: routeParams.id}, function (data) {
            scope.office = data;
            if (data.imagePresent) {
                http({
                    method: 'GET',
                    url: $rootScope.hostUrl + API_VERSION + '/offices/' + routeParams.id + '/images?maxHeight=150'
                }).then(function (imageData) {
                    scope.image = imageData.data;
                });
            }

            });


    var ViewLargerPicCtrl = function ($scope, $uibModalInstance) {
        var loadImage = function () {
            if (scope.office.imagePresent) {
                http({
                    method: 'GET',
                    url: $rootScope.hostUrl + API_VERSION + '/offices/' + routeParams.id + '/images?maxWidth=860'
                }).then(function (imageData) {
                    $scope.largeImage = imageData.data;
                });
            }
        };

    };

    }
});
mifosX.ng.application.controller('DisplayLogoController', ['$scope', '$routeParams', 'ResourceFactory', '$http', 'API_VERSION', '$rootScope', mifosX.controllers.DisplayLogoController]).run(function ($log) {
    $log.info("DisplayLogoController initialized");
});
}(mifosX.controllers || {}));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...