Make a web page with a folder of external files

Question

Make a web page with a folder of external files

1k views Asked by SoftTimur At 24 November 2024 at 07:40

Previously, I used $sce.trustAsHtml(aString) to inject a string (eg, <html>...</html>) to a template <div ng-bind-html="content"></div> to display a graph when loading a generated URL:

.state('urls', {
    url: '/urls/{id}',
    template: '<div ng-bind-html="content"></div>',
    controller: 'UrlCtrl',
    resolve: {
        url: ['$stateParams', 'urls', function ($stateParams, urls) {
            return urls.get($stateParams.id);
        }]
    }
})

app.controller('UrlCtrl', ['$sce', '$scope', 'url', function($sce, $scope, url) {
    $scope.content = $sce.trustAsHtml(url.content);
}]);

Now, the html to generate a graph contains references to other files, eg, <script src="script.js"></script>. So I need a folder of files (.html, .css, .js) to draw a graph. I can put the whole folder in my server, but the problem is how to inject these files to the template.

I tried templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html', loading localhost:3000/#/urls/58b8c55b5d18ed6163324fb4 in the browser does load the html page. However, script.js is NOT loaded, an error Failed to load resource: the server responded with a status of 404 (Not Found) is shown in the console log.

Does anyone know how to amend this?

Otherwise, is there any other ways to say something like src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html (like in iframe)? Then, <script src="script.js"></script> in index.html will know it refers to the script.js in the same folder.

Edit 1: Following the comment of @Icycool , I changed to templateUrl: '/htmls/test.html', and test.html contains <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>. The test showed it did load test.html and index.html, but NOT script.js: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found).

Edit 2: I have created two files for test purpose: index.html and script.js. Here is a plunker, neither template nor templateUrl works, as explained...

Original Q&A

There are 4 answers

SoftTimur On 07 March 2017 at 23:12

I share also a solution by <iframe>:

<iframe src="https://www.matrixlead.com/tmp/index.html" frameBorder="0" scrolling="no" seamless="seamless"></iframe>

and a plunker.

The problem with iframe is that I'm afraid there are still (hidden) borders, and the frame may not occupy the full web page by default.

Chris Tarasovs On 08 March 2017 at 00:56

You script that you are including is it just radom javascript or it is from other angular project?

I have done this before but can't remember exactly the step by step process, but hope this directs you in the right direction:

White list the URL that you are including.
Istead for ng-include have a look on how I did with function that return the path.
Also in the routing you need to add lazyload to inject Views + controller

Here is how I did: To load the external controller and the view I used ocLazyLoad.

https://github.com/ocombe/ocLazyLoad and had something like this defined:

 .state('Home', {
            url: "/home",
            views: {
                'content': {
                    templateUrl: 'http://localhost:3333/app/views/home.html',
                    resolve: {

                            loadPlugin: ['$ocLazyLoad', function ($ocLazyLoad) {
                                return $ocLazyLoad.load('http://localhost:3333/app/views/header.html');
                            }]
                        }
                }
            }
        }

To load external view I had created a function in my app that basically takes the external base url and appends the view and than returns it, because when I loaded an external app it mixed up all my URL and I had 404.

app.js

 $rootScope.OtherAppUrl = 'http://localhost:3333/';

 $rootScope.appendOtherAppUrl  = function(relativeURL) {
            return $rootScope.OtherApp + relativeURL;
        }

And in the view to include I had like this

<footer relativeurl="App/views/footer.html"></footer>

And don't forget to whitelist the URL's in your app.js

angular.module('App').config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',

      // This code is CASE SENSITIVE
      'http://localhost:3333/app/views/header.html',
      'http://localhost:3333/app/views/footer.html',


    ]);

    // The blacklist overrides the whitelist so the open redirect here is blocked.
    $sceDelegateProvider.resourceUrlBlacklist([
      'http://myapp.example.com**'
    ]);
});

tanmay On 10 March 2017 at 06:39

I found a solution but might have gone a little too far. I created a script directive instead which will put the not-loaded script to the head of document. Something like this:

app.directive('script', function() {
  return {
    restrict: 'E',
    scope: false,
    link: function(scope, elem, attr) {
      var scriptNode = document.createElement('script');
      scriptNode.src = attr.src;
      scriptNode.type = 'text/javascript';
      document.head.appendChild(scriptNode);
    }
  };
});

But, this obviously has few limitations including the src must be some absolute path. (Can overcome that but it would be dirtier..)

I have put the sample HTML file somewhere I can tweak a little and use it to come up with this working plnkr

**Kursad Gulseven** · Accepted Answer · 2017-03-07 08:38:16

Kursad Gulseven On 07 March 2017 at 08:38 BEST ANSWER

You may use <object> if you prefer.

<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>

See updated plunker here.

TechQA.

Make a web page with a folder of external files

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in CANVAS

Related Questions in ANGULAR-UI-ROUTER

Related Questions in ANGULARJS-SCE

Popular Questions

Popular Tags

Trending Questions