상대 templateUrl을 로드하는 중

상대 templateUrl을 로드하는 중

모듈러형의 확장성이 뛰어난 애플리케이션을 만드는 최선의 방법을 찾고 있습니다.angular-boilerplate, angular-app과 같은 프로젝트 구조가 마음에 듭니다.모든 관련 파일이 파셜과 디렉티브의 기능별로 그룹화되어 있습니다.

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

단, 다음 예에서는 템플릿 URL이 현재 파일이 아닌 기본 URL에 대해 로드됩니다.

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', // this is not very modular
    controller: 'AccountCtrl',
  });
})

이것은 그다지 모듈화되어 있지 않기 때문에 대규모 프로젝트에서는 유지보수가 어려워질 수 있습니다.이 경우, 이 설정을 변경할 필요가 있습니다.templateUrl이 모듈들 중 하나를 이동할 때마다 경로를 지정합니다.다음과 같이 현재 파일을 기준으로 템플릿을 로드할 수 있는 방법이 있으면 좋겠습니다.

templateUrl: './account.tpl.html'

이런 걸 각도에서 하는 방법은 없나요?

이를 위한 최선의 방법은 browserify, webpack, typescript 등의 모듈로더를 사용하는 것입니다.다른 많은 것들도 있다.는 파일의 상대적인 위치로부터 요구 사항을 작성할 수 있으며, 변환이나 partialify와 같은 로더를 통해 템플릿을 Import할 수 있다는 추가 이점도 있으므로 템플릿 URL을 사용할 필요도 없습니다.요구 사항을 통해 템플릿을 인라인하기만 하면 됩니다.

이전 답변은 다음과 같습니다.

나는 정확히 이 주제에 대해 글을 썼고 지역 Angular Meetup에서 그것에 대해 이야기했다.우리 대부분은 현재 그것을 생산에 사용하고 있다.

모듈 내에서 파일 구조가 효과적으로 표현되어 있는 한 매우 간단합니다.다음은 솔루션의 간단한 미리 보기입니다.전체 기사 링크가 표시됩니다.

var module = angular.module('myApp.things', []);

var all = angular.module('myApp.things.all', [
    'myApp.things',
    'things.someThing',
    'things.someOtherThing',
    'things.someOtherOtherThing',
]);

module.paths = {
    root: '/path/to/this/thing/',
    partials: '/path/to/this/thing/partials/',
    sub: '/path/to/this/thing/sub/',
};

module.constant('THINGS_ROOT', module.paths.root);
module.constant('THINGS_PARTIALS', module.paths.partials);
module.constant('THINGS_SUB', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things',
        url: '/things',
        templateUrl: THINGS_PARTIALS + 'things.html',
    });
});

다음으로 서브모듈 또는 "상대적인" 모듈은 다음과 같습니다.

var module = angular.module('things.someThing', ['myApp.things']);
var parent = angular.module('myApp.things');

module.paths = {
    root: parent.paths.sub + '/someThing/',
    sub: parent.paths.sub + '/someThing/sub/',
    partials: parent.paths.sub + '/someThing/module/partials/',
};

module.constant('SOMETHING_ROOT', module.paths.root);
module.constant('SOMETHING_PARTIALS', module.paths.partials);
module.constant('SOMETHING_SUB', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things.someThing',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + 'someThing.html',
    });
});

이게 도움이 됐으면 좋겠네요!

전문 기사: Relative AngularJS 모듈

건배!

js파일에 대한 상대적인 패스를 유지하는 것은 가능하다면 더 어려워질 것이라고 생각합니다.출하 시에는 모든 javascript 파일을 하나의 파일에 연결하고 싶을 가능성이 높습니다.이 경우 템플릿은 baseUrl에 상대적인 것이 좋습니다.또한 템플릿을 $templateCache에 미리 패키지화하지 않는 한 Angular에서 기본적으로 가져오는 경우 baseUrl을 기준으로 템플릿이 필요하므로 js파일이 브라우저로 이미 전송되면 서버는 템플릿의 위치를 알 수 있습니다.

개발 중에 baseUrl과 관련지어 있는 것이 마음에 들지 않는 이유는 로컬에서 서버를 실행하고 있지 않기 때문일 수 있습니다.만약 그렇다면, 나는 그것을 바꿀 것이다.특히 루트로 일을 할 경우, 그것은 당신의 삶을 훨씬 더 편하게 해줄 것입니다.Grunt를 확인해 보겠습니다.Grunt Connect라는 프로덕션 설정을 모방하기 위해 로컬에서 실행할 수 있는 매우 단순한 서버가 있습니다.또한 Yeoman과 같은 프로젝트도 체크 아웃 할 수 있습니다.Yeoman은 Grunt를 사용하여 프런트 엔드 개발 환경을 미리 패키지화했기 때문에 셋업에 많은 시간을 할애할 필요가 없습니다.Angular Seed 프로젝트는 로컬 개발을 위한 Grunt 설정의 좋은 예입니다.

나는 이 문제에 대해 한동안 곰곰이 생각해 왔다.생산용 템플릿을 gulp로 포장하지만 개발에 만족할 만한 솔루션을 찾느라 고생했습니다.

여기가 내가 끝낸 곳이야.아래 스니펫을 사용하면 URL을 원하는 대로 다시 연결할 수 있습니다.

angular.module('rm').config(function($httpProvider) {

  //this map can be defined however you like
  //one option is to loop through script tags and create it automatically
  var templateMap = {
    "relative.tpl.html":"/full/path/to/relative.tpl.html",
    etc...
  };

  //register an http interceptor to transform your template urls
  $httpProvider.interceptors.push(function () {
    return {
      'request': function (config) {
        var url = config.url;
        config.url = templateMap[url] || url;
        return config;
      }
    };
  });
});

systemJs 모듈 로더를 사용하여 원하는 작업을 수행할 수 있습니다.

import usersTemplate from './users.tpl';

var directive = {
   templateUrl: usersTemplate.name
}

https://github.com/swimlane-contrib/angular1-systemjs-seed 에서 좋은 예를 확인할 수 있습니다.

가 계속 있었거든요.는그 i i i i i 。templateUrl: './templateFile.tpl.html데이업츠키노

Gruntfile.js html2js 오브젝트에서 사용하고 있습니다.

html2js: {
  /**
   * These are the templates from `src/app`.
   */
  app: {
    options: {
      base: '<%= conf.app %>',
      rename: function( templateName ) {
        return templateName.substr( templateName.lastIndexOf('/') );
      }
    },
    src: [ '<%= conf.app %>/**/{,*/}<%= conf.templatePattern %>' ],
    dest: '.tmp/templates/templates-app.js'
  }
}

갈등으로 수 것을 , 그것은 편집해야 하는 보다 더 입니다./path/to/modules/widgets/wigdetName/widgetTemplate.tpl.html모든 파일에, 매번 다른 프로젝트에 포함시켜요.

언급URL : https://stackoverflow.com/questions/22830310/loading-relative-templateurl