Referring remote angular javascript controller files in UWP application

Question

Hello,

I am developing a Windows 10 app using Angular JS and Win JS. I want to load html files and corresponding angular controllers from a remote location (say azure cloud) and render the same inside my UWP application. Is it a possible scenario in UWP application? Referring to remote HTML files work, but angular controllers are causing issue, as they are not recognized at run time. I can see the controller files being downloaded (in debug mode), but not sure what is causing the controllers not being recognized as angular controllers. Please help.

Answer 1

Hi Ritesh,

>> I want to load html files and corresponding angular controllers from a remote location (say azure cloud) and render the same inside my UWP application. Is it a possible scenario in UWP application? 

As far as I know, it is not possible to load controller dynamically. See similar case on SO: http://stackoverflow.com/questions/25401271/angularjs-load-remote-js-controller-provided-by-webservice

Answer 2

Thank you Elvis for your reply. When i specify the remote path of the controller and view in angular web application it works. Even when i do the same in UWP application when it runs in web mode, it works.

Issue arises when the UWP app runs in windows mode. I followed the example as shown here (https://social.msdn.microsoft.com/Forums/en-US/f5a852c1-c757-40f2-bc41-8d6a190a233e/the-metro-application-does-not-allow-javascript-to-use-external-network-file?forum=winappswithhtml5). I have made the reference to external JS controllers inside the map.html and then added that inside iframe on home page to run in web context. By doing this, the controller files gets downloaded ( i can see them in debug mode), but they are not recognized as controllers to the angular module and i get controller undefined error. 

Answer 3

Hi,

It seems like a specific problem.

Could you maybe share a basic demo that can reproduce this problem?

Answer 4

Elvis, I have uploaded the project here (https://1drv.ms/u/s!AnOCoSYuOtc2tFzFFZqRt-HaiibT). Have a look and let me know if you have any suggestions for the same. Thank you in advance.

Answer 5

Hi Ritesh,

I've downloaded the demo and found the problem:

You use a webview to load map.html. But you didn't add any angular or jquery library in your webview content.

You added the lib reference to index.html. But index.html and map.html are in different context. Index.html->local context and map.html->web context. So any lib that you added in index.html is not available in map.html.

To fix the problem, you need to add the references to map.html. And define the modules and controllers for your webview content independently(Consider the webview to be a independent web app).

If you want the webview content to communicate with your local content. You can use x-ms-webview element and use webview.MSWebViewScriptNotify event.

Answer 6

Elvis, thank you for looking into this.

>> And define the modules and controllers for your webview content independently(Consider the webview to be a independent web app).

For me they both cannot be independent of one another. If you see, angular module is common for both the context (See TestCtrl.js) and its defined in windows context. Its the controllers which are loaded (dynamically, from remote location) in map.html. Also map.html is loaded in web context as that is the only way i can refer to remote java script files.

So its like - 

Windows Context -

Module -

[View 1, Controller 1]

[View 2, Controller 2]

Remote Location

[View 3, Controller 3]

[View 4, Controller 4]

So the views and controllers which are supposed to be loaded from remote locations are loaded in Web Context (is there any other way, i am not sure). And they are added to the module which is already defined in Windows Context (is that the correct/expected behavior, i am not sure). Can you please check this? 

Answer 7

Hi Ritesh,

If you want to load some remote resource I suggest you create a hosted web app instead.

You can refer to this link: https://msdn.microsoft.com/windows/uwp/porting/hwa-create-windows?f=255&MSPPError=-2147217396.

Answer 8

Hi Elvis,

Creating hosted app will not solve my problem. Think of this as - suppose you have a windows 10 app created with Win JS and Angular JS. And i as an independent developer has to latch on to your application framework (i.e. using your angular module, services, directives etc.) and build some more angular views and controllers, but my resources are hosted remotely. As far as i am getting the outcome of our conversation, this is not a feasible scenario. Please let me know your thoughts.

Answer 9

Hi Ritesh,

>>Think of this as - suppose you have a windows 10 app created with Win JS and Angular JS. And i as an independent developer has to latch on to your application framework (i.e. using your angular module, services, directives etc.) and build some more angular views and controllers, but my resources are hosted remotely. 

As far as I know, the scenario you described is not possible.

Answer 10

Thank you Elvis for the whole discussion. Even I am arriving at the same conclusion that my need might not be a feasible scenario. Please let me know if you could think of any option on this in future.