2014-12-30 5 views
9

로컬로 단일 페이지 앱을 개발 중입니다.Angularjs templateUrl 파일 위치를 찾을 수 없음

Angularjs에서 간단한 사용자 지정 문을 사용하여 HTML 파일을 템플릿으로로드 할 수 없습니다. template: 속성을 사용하여 원시 html을 사용하려고하면 정상적으로 작동하지만이 템플릿에서 사용해야하는 코드가 400 줄 이상 있습니다. 사용하려고하면 바로 사용하십시오. templateUrl:로드가 없습니다. 간단 내가 사용하고 유지

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

: 여기에 내 프로젝트 구조, 필사적 인 시도에 /my-customer.html : 나는 HTML의 C와 같은 많은 다른 위치에 파일을 복사 포함한 30 개 가능한 경로와 같은 시도

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

내가 다시 시도 경로와 같은 : 등등 ../my-customer.html ../templates/my-customer.html하고 있지만 아무것도 templateUrl: 위해 일하지, 나는에 여기 angular docs의 예는 (내 컨트롤러 main.js 내부) 지시어 내 코드입니다 이것이 도움이된다면 로컬 웹 서버가 실행되지 않는 윈도우.

여기 몇 가지 콘솔 오류가 있지만 그 의미가 확실하지 않은 초보자에게는 웹 서버를 실행하고 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) 

New to Angularjs. 프로젝트에서 벽에 부딪 혔고 지금 완전히 붙어 있습니다.

+0

비슷한 질문이 도움이 될 수 있습니다. http://stackoverflow.com/questions/16887018/stating-directive-templateurl-relative-to-root – lwalden

+0

게시하기 전에이 기사를 사용해 보았습니다. 불행히도 문제가 해결되지 않았습니다. 난 그냥 콘솔 오류를 추가, 어떤 도움을 크게 주시면 감사하겠습니다. – dylpickle

+1

CORS 오류가 발생합니다. 즉, html의 URL과 webapp의 URL이 서로 다른 것을 의미합니다. –

답변

11

이미 루트와 관련되어 있어야합니다. 그래도 문제가 해결되지 않으면 첫째,

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

을 당신이 당신의 템플릿 디렉토리를 검색 할 수 있는지 확인하십시오 : 그래서,이 작업을해야

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

가 직접 템플릿을 얻을 수 있어야합니다. 템플릿을 찾으면 호스트와 포트를 제거하십시오.

+0

시작/제거 할 수도 있습니다 – Martinsos

+0

어떤 이유로이 방법도 작동하지 않습니다. – dylpickle

+0

서식 파일을 직접 찾아 보셨습니까? –

관련 문제