Представление angularJs не загружается из браузера, тот же код загружает представление на plunker

Вот мой plnuker, который загружает представление, как и ожидалось, на веб-сайте plnkr.

Мой первый Angular SPA

Однако, когда я загрузил планки в виде zip-файла, разархивировал его на своем компьютере и открыл index.html, представление не загружается должным образом. Я просмотрел синтаксис href и маршрутов, как обсуждалось в других связанных потоках.

  <body>
   <div ng-app="SmartCartApp">
    <ul>
       <li> <a href="#BaseStationTest">BaseStation Test</a> </li> 
      <li style="float:right"> <a href="#ContactUs">Contact</a> </li>
       </ul>
      <div ng-view=""></div>
   </div>
          <script type="text/ng-template" id="BaseStation.html">  
            <div id="div1">  
                 <br/> {{message}}
            </div>  
        </script>  
       <script type="text/ng-template" id="ContactUs.html">  
            <div id="div2">  
                <br/> {{message}}

            </div>  
        </script> 
     </body>

// create the module and name it smartCartApp
var SmartCartApp = angular.module('SmartCartApp', ['ngRoute']);

// configure our routes
SmartCartApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider 
  .when('/BaseStationTest', {
    templateUrl: 'BaseStation.html',
    controller: 'BaseStationController'
  }) 
    .when('/ContactUs', {
    templateUrl: 'ContactUs.html',
    controller: 'ContactUsController'
  }) 
  .otherwise({
    redirectTo: '/BaseStationTest'
  });
}]);

Я считаю, что, поскольку это AngulaJs SPA и клиентская структура, ему не нужна поддержка бэкэнда (как и любой веб-сервер для его размещения). Итак, поместив все html и javaScript в папку и открыв index.html, вы должны открыть SPA. Пожалуйста, поправьте меня, если это понимание неверно, и помогите мне решить проблему.


person ari    schedule 16.03.2017    source источник


Ответы (1)


Если вы откроете консоль, вы увидите это сообщение об ошибке:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Вам нужно запустить его на веб-сервере. Самый простой способ сделать это:

  1. Скачайте ваш плунжер. Предположим, что вы загружаете /Users/username/Downloads/plunk-tDKn84
  2. Беги cd /Users/username/Downloads/plunk-tDKn84
  3. Запустить python -m SimpleHTTPServer Это запустит базовый HTTP-сервер на порту 8000.
  4. Откройте браузер и введите http://localhost:8000/index.html

Вы должны увидеть загрузку вашего приложения. Надеюсь это поможет!

Вот как я это вижу на своем локальном хосте:

введите здесь описание изображения

person clever_bassi    schedule 16.03.2017
comment
Я только что проверил ваше сообщение, а перед этим я установил веб-сервер Apache и проверил то же самое. У меня пока нет права голоса. Я все еще узнал из вашего поста о запуске сервера на основе Python, что круто. - person ari; 17.03.2017
comment
Это нормально. вы можете принять мой ответ, если он сработал для вас. Рад, что смог помочь! - person clever_bassi; 17.03.2017