admin管理员组

文章数量:1415655

When I do

/sites/all/themes/theme/js/controller.js

$scope.template = 'partials/tpl.html'

/sites/all/themes/theme/js/index.html

<div ng-include='template'></div>

/sites/all/themes/theme/js/partials/tpl.html

<b>Ho boy!</b>

I basically moved everything related to angular into js folder.

It returns localhost/partials/tpl.html while I need localhost/sites/all/themes/js/partials/tpl.html. How do I solve that without using an absolute path?

When I do

/sites/all/themes/theme/js/controller.js

$scope.template = 'partials/tpl.html'

/sites/all/themes/theme/js/index.html

<div ng-include='template'></div>

/sites/all/themes/theme/js/partials/tpl.html

<b>Ho boy!</b>

I basically moved everything related to angular into js folder.

It returns localhost/partials/tpl.html while I need localhost/sites/all/themes/js/partials/tpl.html. How do I solve that without using an absolute path?

  • javascript
  • angularjs
Share Improve this question edited Dec 13, 2013 at 15:25 Jonathan de M. asked Aug 23, 2013 at 4:18 Jonathan de M.Jonathan de M. 9,8288 gold badges49 silver badges72 bronze badges 2
  • can you create a jsfiddle/plnkr? I have similar implementation working. – 0xc0de Commented Aug 23, 2013 at 6:55
  • how can I include a file from an other folder in jsfiddle or plnkr – Jonathan de M. Commented Aug 23, 2013 at 7:31
Add a ment  | 

2 Answers 2

Reset to default 4

I solved this issue using $httpProvider.interceptors. The following prepends 'myAppDirectory' to ALL requests.

$httpProvider.interceptors.push(function($q) {
    return {
     'request': function(config) {
         config.url = 'myAppDirectory/'+config.url;
         return config;
      },
    };
  });

A regular ng-include, such as:

<div ng-include="'user/info.html'">

Will load myAppDirectory/user/info.html

You probably want to make some exceptions. In my case:

  $httpProvider.interceptors.push(function() {
    return {
     'request': function(config) {
         // ignore api calls and ui-bootstrap templates.
         if (config.url.indexOf('api')==-1 && config.url.indexOf('template')==-1) {
           config.url = 'myAppDirectory/'+config.url;
         }
         return config;
      },
    };
  });

Add a <base href="/sites/all/themes/theme/js/"> at the top of your <head> element inside index.html.

<html>
  <head>
    <base href="/sites/all/themes/theme/js/">
    ...

Reference

Relative links

Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

Running Angular apps with the History API enabled from document root is strongly encouraged as it takes care of all relative link issues.

本文标签： javascriptAngularJS include a file located in a folderStack Overflow

版权声明：本文标题：javascript - AngularJS include a file located in a folder - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745161556a2645463.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。