External view html files in Angularjs Route

Question

Please advice how to include(use) commonly used and shared between few projects html files. so html files from external server needs to be included in Angularjs router. Here is a short example of what i have and what i am trying to solve. Now .html is in my project folder:

 .state('chatbase', {
            url: '/cn={cn}',
             onEnter: function ($stateParams, ParamsShareService) {
               ParamsShareService.updateCnValue($stateParams.cn);

            },
            views: {
                'content@': {
                    templateUrl: 'views/chat_wv1.html',
                    controller: 'ChatController'
                }

            }

             })

And i am trying to get them work like this.So i can share the structure for few projects.

 .state('chatbase', {
            url: '/cn={cn}',
             onEnter: function ($stateParams, ParamsShareService) {
               ParamsShareService.updateCnValue($stateParams.cn);

            },
            views: {
                'content@': {
                    templateUrl: 'https://my-website/views/chat_wv1.html',
                    controller: 'ChatController'
                }

            }

             })

Maxim Shoustin · Accepted Answer · 2017-08-13 11:47:01Z

1

I think the way you implemented it will not work.

templateUrl support explicit path to your project or String.

HTML is a static file with static content. However calling file from HTTP means get file content by using HTTP protocol - different flow and templateUrl doesn't support this way.

Further, Angular state is loaded before any controller and I believe templateUrl: 'views/chat_wv1.html', is what we have today.

You can try this approach (but its a bit complicated):

1) you can load some teplate.html

views: {
            'content@': {
                templateUrl: 'views/teplate.html',
                controller: 'ChatController'
            }
        }

2) The teplate.html will be bind to some Controller that will load HTML content from server and you can use $compile + ng-include to achieve what you look for

edited Aug 13, 2017 at 11:47

answered Aug 13, 2017 at 11:22

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Beny Over a year ago

Thank you, what about this thing ` $sceDelegateProvider.resourceUrlWhitelist([ 'website/view.html' ]);`

Beny Over a year ago

Here is the link, or am i missing something? w3schools.com/angular/…

Maxim Shoustin Over a year ago

@Beny well, its not related to state -> templateUrl

Beny Over a year ago

Thank you for your help and advice, i will mark you answer as correct.And will take a look at compile.Thank you

Collectives™ on Stack Overflow

External view html files in Angularjs Route

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related