javascript - AngularJS include a file located in a folder - Stack Overflow

When I do sitesallthemesthemejscontroller.js$scope.template = 'partialstpl.html'sites

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?

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745161557a4614413.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信