Skip to content Skip to sidebar Skip to footer

Angularjs Include A File Located In A Folder

When I do /sites/all/themes/theme/js/controller.js $scope.template = 'partials/tpl.html' /sites/all/themes/theme/js/index.html
/sit

Solution 1:

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;
         returnconfig;
      },
    };
  });

A regular ng-include, such as:

<divng-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;
         }
         returnconfig;
      },
    };
  });

Solution 2:

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

<html><head><basehref="/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.

Post a Comment for "Angularjs Include A File Located In A Folder"