Angular 구성 요소가 필요한 경우 상대 경로를 찾을 수 없습니다.

Question

Im 번들 및 Angularjs 프레임 워크 용으로 Browserify를 사용하고 있습니다. 혼자 browserify 사용하여 구성 요소를 실행할 때

이

var loginDirective = /*@ngInject*/ function(){ 
    return{ 
    templateUrl:'views/login/templates/loginComponent.html', 
    link:function(scope,ele,attr){ 
    } 
    } 
}; 

이 완벽하게 작동 - 시나리오는 내가로 정의 지시어가있는 AngularJS와 구성 요소를 가지고있다. 이제는 프로젝트 "MyAPP"를 사용하여 NPM을 사용하여 프로젝트의 node_modules 폴더에이 구성 요소를 설치합니다. 나는 다음이 componet를 필요로 포함 DI가 잘 작동이

var angular = require('angular'); 
require ('baseComponent'); 

module.exports = angular.module('mainComponent',['baseComponent']) 

같은 프로젝트의 DI 작업을 수행하지만, 내 프로젝트에 view 폴더를 검색을 시작 원인 난 'views/login/templates/loginComponent.html' 찾을 수없는 구성 요소를 말하는 오류 자신의 view 폴더 대신.

이 문제를 해결하는 방법?

Answer 1

일반적인 방법은 템플릿을 JavaScript 코드에 넣고 템플릿 캐시에 수동으로로드하는 것입니다. 이처럼 :

angular.module('mainComponent').run(function($templateCache) { 
    var template = '<h1> LoginComponent </h1>'; 
    $templateCache.put('loginComponent.html' , template); 
}); 

그리고 지시에 templateUrl

은 다음과 같아야합니다

var loginDirective = /*@ngInject*/ function(){ 
    return{ 
     templateUrl: 'loginComponent.html', 
     link: function(scope,ele,attr){ 
     } 
    } 
}; 

당신은 UI-부트 스트랩, UI 그리드, 예를 들어 같은 많은 오픈 소스 라이브러리에서 볼 수 있습니다