0

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

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

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

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

Error: $compile:upload

  • Это, по-видимому происходит, когда URL шаблона пишется incorrectly- однако, я обеспечиваю весь путь от корня (templateUrl: «JS/Navbar/navbar.html») или это неправильно? Спасибо.

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

project1/JS/app.js

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

project1/JS/Navbar/navbar.js

'use strict'; 

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

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

ответ

0

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

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

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

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

+0

Хорошо спасибо. Я просто добавил узел express server, и теперь он работает. Не могли бы вы объяснить, почему угловое приложение не будет работать, если я не создам сервер? Если бы я использовал jus simple html, он работал бы - какая разница в угловой? Спасибо! – javascripting

+0

На самом деле, я был неправ. ничего не работает, и я не получаю ошибку XMLHttpRequest, но все еще ошибку компиляции $, которая должна быть вызвана директивой (если я удалю директиву из моего файла index.html, ошибка ges прочь). Я изменил templateUrl: «navbar.html» на «nabber.html», как вы предлагали. – javascripting

Смежные вопросы