Есть ли способ удалить эту ошибку в Angular Js?

Я новичок в Angular JS и пытался использовать в нем маршрутизацию, но столкнулся с некоторыми проблемами. Вот ошибка

<!DOCTYPE html>

Главный

<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>

<p>Click on the links.</p>

<p>
  Note that each "view" has its own controller which each gives the "msg"
  variable a value.
</p>

<div ng-view></div>

<script>
  var app = angular.module("myApp", ["ngRoute"]);
  app.config(function ($routeProvider) {
    $routeProvider
      .when("/", {
        templateUrl: "main.htm",
      })
      .when("/london", {
        templateUrl: "london.htm",
        controller: "londonCtrl",
      })
      .when("/paris", {
        templateUrl: "paris.htm",
        controller: "parisCtrl",
      });
  });
  app.controller("londonCtrl", function ($scope) {
    $scope.msg = "I love London";
  });
  app.controller("parisCtrl", function ($scope) {
    $scope.msg = "I love Paris";
  });
</script>

london.htm

<h1>London</h1>

Лондон — столица Англии.

Это самый густонаселенный город Соединенного Королевства с населением более 13 миллионов человек.

{{сообщение}}

paris.htm

<h1>Paris</h1>

Париж – столица Франции.

Район Парижа является одним из крупнейших населенных пунктов в Европе с населением более 12 миллионов человек.

{{сообщение}}


javascript html angularjs
person Deep Nandi    schedule 15.10.2020    source источник
comment
да, не делайте кросс-запросы, если они не поддерживаются другим сервером - однако ошибка в этом случае проще... вам нужно использовать http-сервер для обслуживания вашей страницы... file:/// не является протоколом для использовать, чтобы делать какие-либо разработки с ... использовать по крайней мере http   -  person Jaromanda X    schedule 15.10.2020
comment
Я делаю это на локальном сервере. Я не запрашиваю никаких файлов с сервера. Я сбит с толку.   -  person Deep Nandi    schedule 15.10.2020
comment
нет, вы не делаете это с http сервера... вы загружаете страницу, используя file:/// протокол` - опубликованная вами ошибка не лжет о том, как вы загружаете страницу   -  person Jaromanda X    schedule 15.10.2020
comment
Это означает, что мне нужно развернуть приложение angular js.   -  person Deep Nandi    schedule 15.10.2020
comment
Можете ли вы сделать скрипку с вашим кодом?   -  person Pieterjan    schedule 15.10.2020
comment
вот так - jsfiddle.net/4rqyeoxh   -  person Deep Nandi    schedule 15.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Эти ошибки возникают из-за того, что вы не запускаете его под каким-либо сервером или локальным хостом. Маршрутизация Angular JS не будет работать, если вы откроете файл прямо в браузере.

Как это исправить

Установите сервер wamp или любой другой сервер. переместите ваши файлы в корневой каталог сервера и запустите его, используя его адрес.

Если вы используете сервер WAMP, скопируйте файлы в папку и переместите папку в C:/Wamp64/www/
В веб-браузере введите: http://localhost/‹your_folder›

и для справки я также добавляю код:
index.html

<html>
    <head>
        <title>Angular Sample</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.1/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    </head>
    <body ng-app="myApp">

        <p><a href="#/!">Main</a></p>
        
        <a href="#!red">Red</a>
        <a href="#!green">Green</a>
        <a href="#!blue">Blue</a>
        
        <div ng-view></div>
        
        <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.config(function($routeProvider) {
          $routeProvider
          .when("/", {
            templateUrl : "pages/red.html"
          })
          .when("/red", {
            templateUrl : "pages/red.html"
          })
          .when("/green", {
            templateUrl : "pages/green.html"
          })
          .when("/blue", {
            templateUrl : "pages/blue.html"
          });
        });
        </script>
        </body>
</html>

страницы/green.html

<html>
    <head>
        <style>
            body{
                background-color: green;
                color:#ffffff;
            }
        </style>
        <body>
            <h1>Green</h1>
        </body>
    </head>
</html>

страницы/red.html

<html>
    <head>
        <style>
            body{
                background-color: red;
                color:#ffffff;
            }
        </style>
        <body>
            <h1>Red</h1>
        </body>
    </head>
</html>

страницы/blue.html

<html>
    <head>
        <style>
            body{
                background-color: blue;
                color:#ffffff;
            }
        </style>
        <body>
            <h1>Blue</h1>
        </body>
    </head>
</html>
person trickymind    schedule 15.10.2020
comment
Я использую angular js без какого-либо сервера, он отлично работает. Я делаю что-то неправильно? - person Deep Nandi; 15.10.2020
comment
Я использую угловой js - person Deep Nandi; 15.10.2020
comment
Я следую этому руководству w3schools.com/angular/angular_routing.asp. - person Deep Nandi; 15.10.2020
comment
обычно ошибка XMLHTTP отображается, когда вы не запускали ее на сервере. Пожалуйста, wai8, я отправлю образец - person trickymind; 15.10.2020
comment
я проверил ваш образец, он работает, просто попробуйте запустить его под сервером или локальным хостом - person trickymind; 15.10.2020
comment
Да, я попробовал запустить его на хосте, и это сработало! Спасибо! - person Deep Nandi; 15.10.2020
comment
Я проголосовал за вас, но моя репутация меньше 15, поэтому это не записывается. Извиняюсь. - person Deep Nandi; 15.10.2020