Mẫu angularjsUrl không tìm thấy vị trí tệp

Question

Tôi đang phát triển một ứng dụng trang đơn lẻ.

Tôi không thể tải tệp HTML dưới dạng mẫu bằng cách sử dụng chỉ thị tùy chỉnh đơn giản trong Angularj. Nếu tôi cố gắng sử dụng html thô bằng cách sử dụng thuộc tính template:, nó hoạt động tốt nhưng tôi có hơn 400 dòng mã tôi cần sử dụng trong mẫu này và ngay khi tôi cố gắng sử dụng templateUrl: không có gì tải. Tôi đã cố gắng như 30 con đường có thể bao gồm sao chép các tập tin HTML với nhiều địa điểm khác nhau chẳng hạn như C: /my-customer.html trong một nỗ lực tuyệt vọng, đây là cấu trúc dự án của tôi:

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

Giữ nó đơn giản tôi đang sử dụng ví dụ từ angular docs đây là mã của tôi cho các chỉ thị (bên main.js với bộ điều khiển của tôi):

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

con đường một lần nữa tôi đã cố gắng như: ../my-customer.html ../templates/my-customer.html và vân vân nhưng không được làm việc cho templateUrl:, tôi đang trên cửa sổ không có máy chủ web cục bộ nào hoạt động nếu điều này có ích.

Dưới đây là một số lỗi trên bảng điều khiển nhưng với tư cách là người mới không chắc chắn ý nghĩa của chúng, tôi có cảm giác tôi cần chạy máy chủ web và phân tích cú pháp thông qua 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) 

Mới đối với Angularjs. Tôi đã đánh một bức tường trong dự án và bây giờ tôi hoàn toàn bị mắc kẹt.

Answer 1

Nó nên đã được liên quan đến gốc. Vì vậy, điều này sẽ làm việc:

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

Nếu điều đó không làm việc, trước tiên hãy chắc chắn rằng bạn có thể duyệt thư mục template của bạn:

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

Bạn sẽ có thể để có được những mẫu trực tiếp. Khi bạn tìm thấy mẫu, sau đó chỉ cần xóa máy chủ và cổng.