Lokalizacja pliku Angularjs templateUrl nie została znaleziona

Question

Lokalnie opracowuję aplikację z jedną stroną.

Nie mogę załadować pliku HTML jako szablonu za pomocą prostej dyrektywy użytkownika w Angularjs. Jeśli spróbuję użyć surowego html przy użyciu atrybutu template:, działa dobrze, ale mam ponad 400 linii kodu, których potrzebuję użyć w tym szablonie, i gdy tylko spróbuję użyć templateUrl: nic się nie wczytuje. Próbowałem jak 30 możliwych ścieżek w tym kopiując plik HTML do wielu różnych miejscach, takich jak C: /my-customer.html w desperackiej próbie, tu jest mój struktury projektu:

App-- 
     | 
     css 
     | 
     img 
     | 
     js-- 
      | 
      main.js 
      | 
      foundation.js 
      | 
      my-customer.html 
     | 
     templates-- 
        | 
        my-customer.html 
     | 
     bcf.html 
     | 
     fluidType.html 
     | 
     start.html 
     | 
     my-customer.html 

ich prostota używam przykład z angular docs Oto mój kod do dyrektywy (wewnątrz main.js z mojego kontrolera):

app.directive('myCustomer', function() { 
    return { 
    templateUrl: 'my-customer.html' 
    }; 
}); 

znowu próbowałem ścieżki jak: ../my-customer.html ../templates/my-customer.html i tak dalej, ale nic nie działa na templateUrl:, jestem na Windows bez uruchomionego lokalnego serwera WWW, jeśli to pomaga.

Oto niektóre błędy konsoli, ale jako początkujący nie wiem, co one oznaczają, mam wrażenie, że muszę uruchomić serwer WWW i parsować przez 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) 

Nowość w Angularjs. Uderzyłem w ścianę w projekcie i jestem całkowicie zablokowany.

Answer 1

Powinien już być względny względem katalogu głównego. Tak, to powinno działać:

app.directive('myCustomer', function() { 
    return { 
    templateUrl: '/templates/my-customer.html' 
    }; 
}); 

Jeśli to nie zadziała, należy najpierw upewnić się, że można przeglądać katalog szablonu:

http://localhost/templates/my-customer.html

Powinieneś być w stanie uzyskać szablon bezpośrednio. Po znalezieniu szablonu usuń host i port.