Make a web page with a folder of external files

Question

Previously, I used $sce.trustAsHtml(aString) to inject a string (eg, ...) to a template

Answer 1

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

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**'
    ]);
});