Ошибка CORS — получение ошибки компиляции $ и XMLHttpRequest не может загрузить ошибку?

Почему моя директива Angular не может быть получена, даже если я указал правильный URL-адрес, получая ошибку $compile и XMLHttpRequest не может загрузить ошибку?

Я начал с углового приложения и не могу включить директиву, так как продолжаю получать 2 разные ошибки.

XMLHttpRequest не может загрузиться. Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https, chrome-extension-resource.

  • Я немного исследовал, и были предложения настроить сервер, чтобы избежать того, чего я не понимаю. Почему я не могу просто создать приложение только с использованием angular/html без бэкэнда, если оно мне действительно не нужно. Что могло вызвать эту ошибку?

Ошибка: $compile:upload

  • По-видимому, это происходит, когда URL-адрес шаблона указан неправильно, однако я указываю весь путь от корня ( templateUrl: 'js/navbar/navbar.html') или это неправильно? Спасибо.

проект1/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="public/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js">    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>
    <script src="js/app.js"></script>
   <script src="js/navbar/navbar.js"></script>
</head>

<body ng-app="myApp">
    <header></header>

    <navbar></navbar>
    <ui-view></ui-view>
</body>

</html>

проект1/js/app.js

'use strict';
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);

проект1/js/navbar/navbar.js

'use strict';

app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'js/navbar/navbar.html'
    }
});

проект1/js/navbar/navbar.html

<div class="navbar navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
            Hello
            </li>
        </ul>
    </div>
</div>

xmlhttprequest compiler-errors angularjs url-routing angular-directive
person javascripting    schedule 07.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Всегда используйте сервер для запуска вашего углового приложения, иначе вы можете получить ошибку перекрестного происхождения. Сервер поможет вам восстановить пути к файлам. Затем отредактируйте свою директиву, чтобы она была

'use strict';
app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'navbar.html'
    }
});

Я сделал небольшой plunker, так что мы уверены, что ваш код не содержит ошибок.

Я не уверен в использовании абсолютного пути, но если вы собираетесь его использовать, вам нужно ввести что-то вроде: "C:projects/project1/js/navbar/navbar.js", вы можете использовать http-сервер, его легко установить. и использовать. Я надеюсь, что ответ на ваш вопрос

person Abdelrhman Hussien    schedule 07.01.2017
comment
Хорошо спасибо. Я только что добавил экспресс-сервер узлов, и теперь он работает. Не могли бы вы объяснить, почему угловое приложение не будет работать, если я не создам сервер? Если бы я использовал простой html, это бы сработало - какая разница с угловым? Спасибо! - person javascripting; 07.01.2017
comment
На самом деле, я был неправ. ничего не работает, и я не получаю ошибку XMLHttpRequest, но все же ошибка $compile, которая должна быть вызвана директивой (если я удалю директиву из моего файла index.html, ошибка исчезнет). Я изменил templateUrl: 'navbar.html' на 'nabber.html', как вы предложили. - person javascripting; 07.01.2017