Я не могу запустить свое приложение Angular локально

#javascript #angularjs

#javascript #angularjs

Вопрос:

Я не могу запустить свое приложение angular локально. Я получаю сообщение об ошибке, что мой interview.js и angular.js их не находят. Кроме того, angular не определен в interview.js файл, когда я открываю его из консоли разработчика.

Вот моя структура каталогов:

 mock
public
    index.html
src
    services
    interview.js
vendor
    angular.js
  

Вот мой index.html

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Interview Practice</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../vendor/angular.js" type="text/javascript"></script>
</head>
<body ng-app="interviewapp">
  hello world!

  <script src="../src/interview.js" type="text/javascript"></script>
</body>
</html>
  

Вот мой interview.js

 angular.module("interviewapp", []);
console.log("does this work");
  

Я использую http-сервер для запуска приложения.

 Starting up http-server, serving ./public
Available on:
  http://10.66.87.184:8080
  http://192.168.56.1:8080
  http://127.0.0.1:8080
  

Перейдя на localhost или любой из перечисленных там https, я получаю эту ошибку:

 http://10.66.87.184:8080/vendor/angular.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://10.66.87.184:8080/src/interview.js Failed to load resource: the server responded with a status of 404 (Not Found)
  

Как мне исправить это, чтобы мое приложение работало?

Комментарии:

1. Переместите src и vendor каталоги в public каталог и удалите .. с начала ваших путей к файлам, например, измените src="../src/interview.js" на src="/src/interview.js"

2. Я связал cdn для angular и сделал то, что вы сказали для папки src. Не могли бы вы сказать мне, почему это сработало?

3. Добавлен ответ для вас с объяснением

Ответ №1:

Как указано в комментарии:

Переместите src и vendor каталоги в public каталог и удалите .. из начала ваших путей к файлам, например, измените src="../src/interview.js" на src="/src/interview.js"

Это работает, потому что ваш сервер используется public в качестве корневой папки, поэтому он не может видеть другие папки, к которым вы пытаетесь получить доступ. Переместив их в public папку, он сможет получить к ним доступ.

Ответ №2:

Ваш сервер обслуживает public папку. Таким образом, все, что находится в этой папке, может быть доступно через ваше имя хоста. Но вы сохранили src и vendor отключили public , следовательно, они не обслуживаются через ваш сервер. Чтобы получить к ним доступ, поместите их в public папку и удалите .. ссылку before your js.

Ответ №3:

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

 mock
public
    index.html
    src
    vendor
  

также измените это:

 <script src="../vendor/angular.js" type="text/javascript"></script>
  

к этому:

 <script src="/vendor/angular.js" type="text/javascript"></script>
  

и это:

 <script src="../src/interview.js" type="text/javascript"></script>
  

к этому

 <script src="/src/interview.js" type="text/javascript"></script>
  

Поэтому все ваши javascripts должны быть в вашем общедоступном каталоге. Также никогда не используйте относительные пути для тегов включения. Все общедоступное должно быть доступно, поскольку это корневая папка.