Я локально разрабатываю одностраничное приложение.
Я не могу загрузить HTML файл в качестве шаблона, используя простую настраиваемую директиву в Angularjs. Если я попытаюсь использовать raw html с использованием атрибута template: он работает просто отлично, но у меня есть более 400 строк кода, которые мне нужно использовать в этом шаблоне, и как только я попытаюсь использовать templateUrl: ничего не загружается. Я пробовал как 30 возможных путей, включая копирование HTML файла во множество разных мест, таких как C: /my-customer.html, в отчаянной попытке, вот моя структура проекта:
App--
|
css
|
img
|
js--
|
main.js
|
foundation.js
|
my-customer.html
|
templates--
|
my-customer.html
|
bcf.html
|
fluidType.html
|
start.html
|
my-customer.html
Сохраняя это просто, я использую пример из угловых документов, вот мой код для директивы (внутри main.js с моим контроллером):
app.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
снова я пробовал пути как: ../my-customer.html../templates/my-customer.html и т.д., но ничего не работает для templateUrl: я нахожусь в окнах без локального веб-сервера, если это помогает.
Вот некоторые ошибки консоли, но как новичок, не уверенный, что они означают, у меня есть чувство, что мне нужно запустить веб-сервер и проанализировать через http.
XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html'.
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:87:261
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:83:133)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:80:366)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)angular.js:11594 (anonymous function)
angular.js:11594 Error: [$compile:tpload] http://errors.angularjs.org/1.3.8/$compile/tpload?p0=templates%2Fmy-customer.html
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:137:65
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)
Новое в Angularjs. Я ударил стену в проекте, и теперь я полностью застрял.
Он должен быть уже относительно корня. Таким образом, это должно работать:
app.directive('myCustomer', function() {
return {
templateUrl: '/templates/my-customer.html'
};
});
Если это не сработает, сначала убедитесь, что вы можете просматривать каталог шаблонов:
http://localhost/templates/my-customer.html
Вы можете получить шаблон напрямую. После того как вы найдете шаблон, просто удалите хост и порт.