How to mention angular custom directive templateUrl path when working with Asp.net MVC

Question

i have a sample directive where i need to mention templateUrl file location. my template file exist in this location Views/Home/searchableMultiselect.html

app.directive("showdata", function ($timeout) {
    return {
        templateUrl: '~/Views/Home/searchableMultiselect.html',
        restrict: 'AE',

the above code is in app.js file. now tell me how to instruct angular to load template file from this location '~/Views/Home/searchableMultiselect.html'

thanks

Shyju · Answer 1 · 2016-05-07T17:35:52.123

1

Since it is an asp.net mvc app, you should take advantage of helper methods like Url.Action or Url.Content or Url.RouteUrl. In your razor view you may use either of these methods to generate the path to your app base root/or a specific root and pass that to your angular controller/angular services/directives.

So in your razor view/layout file, you may do this.

@section Scripts
{
   <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script>
   <script>
        var yourApp = yourApp || {};
        yourApp.Settings = yourApp.Settings || {};
        yourApp.Settings.BaseUrl= "@Url.Content("~")";
        angular.module("app").value("appSettings", yourApp);
   </script>
}

You can access this appSettings object in your angular directive and use the Settings.BaseUrl property to build the full url to your directive template.

(function () {
    angular.module("app")
        .directive("myDirective", function (appSettings) {           
            return {
                restrict: 'E',
                templateUrl: appSettings.Settings.BaseUrl
                                       +'Scripts/MyDirectives/searchableMultiselect.html',
                controller: function ($scope) {
                    // some code
                }
            }
        });
})();

This will load the searchableMultiselect.html file from ~/Scripts/MyDirectives location.

edited May 07 '16 at 17:35

answered May 07 '16 at 17:22

Shyju

214,206
104
411
497

no luck...did not work i got this error "NetworkError: 404 Not Found - http://localhost:2283/Views/Home/searchableMultiselect.html" – Monojit Sarkar May 07 '16 at 17:30
No. [That is by design](http://stackoverflow.com/a/17949486/40521). You are not supposed to directly access contents inside your Views folder. Since it is an angular directive, I suggest putting under the Scripts folder ( you may create a sub directory there) – Shyju May 07 '16 at 17:37
i am getting this error.....what i am missing. i am new in angular. the error `Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.14/$injector/nomod?p0=app return new ErrorConstructor(message);` – Monojit Sarkar May 07 '16 at 17:41
i declare my module in app.js this way `var app = angular.module('app', ["ui.bootstrap"]);` – Monojit Sarkar May 07 '16 at 17:41
May be the order of loading ? Are you sure you have all the files needed in the right order ? The above code should work fine. I just verified in a local project. – Shyju May 07 '16 at 18:04
i am new in ng so may made mistake for order of loading. can u please give me a jsfiddle version so i can see the order. thanks – Monojit Sarkar May 07 '16 at 18:08
yes problem solved. there was problem of loading order and fixed now. thanks a lot :) – Monojit Sarkar May 07 '16 at 18:21

score 0 · Accepted Answer · answered May 07 '16 at 17:16

0

Here is a possible way:

_Layout.cshtml

<body data-root='@Url.Content("~")'>

In Javascript:

function getDataRoot() {
    var root = null;

    if (document.body) {
        root = document.body.getAttribute('data-root');
    }

    if (!root) {
        return '/';
    }

    return root;
}

// This can be registed with angular, so it can be injected...
// Right now I will use it directly
var appUrls = {
    templateBase = getDataRoot() + 'Views/Home/';
}

....

app.directive("showdata", function ($timeout) {
return {
    templateUrl: appUrls.templateBase + 'searchableMultiselect.html',
    restrict: 'AE',

answered May 07 '16 at 17:16

VRPF

3,118
1
14
15

no did not work i got this error `"NetworkError: 404 Not Found - http://localhost:2283/Views/Home/searchableMultiselect.html"` – Monojit Sarkar May 07 '16 at 17:28
You are supposed to adapt it to fit your case. It is unlikely it would work out of the box. The idea is there though... – VRPF May 07 '16 at 17:30

How to mention angular custom directive templateUrl path when working with Asp.net MVC

2 Answers2