CODEWITHSUNDEEP
asp.netangularjsasp.net-mvc-4
Photonic
Photonic

Reputation: 1431

Angularjs + MVC - TemplateUrl cannot be found

Hi ive been following a tutorial on Asp.net Core with angular. But i am only interested in the angular part and i am not using Asp.net core. I am at the part where you can easily include any partial html to my mvc/asp/angular application by using this method:

Main module

(function(){
    "use strict";
    angular.module("app-test", ["simpleControls"]);
})();

Directives

(function () {

    "use strict";

    angular.module("simpleControls", [])
        .directive("waitCursor", waitCursor);

    function waitCursor() {
        return {      
            templateUrl: "/Views/Helper/WaitCursor.html"
        };
    }
})();

Partial html - located in Views/Helper/

<div class="text-center">
    <i class="fa fa-spinner fa-spin"></i> Loading...
</div>

Main html

<wait-cursor ng-show="true"></wait-cursor>

Errors It seems like it cannot find what is looking for Cannon find the templateUrl

I have tried: templateUrl: "~/Views/Helper/WaitCursor.html"

templateUrl: "Views/Helper/WaitCursor.html"

templateUrl: "WaitCursor.html" -> with the file in the main root folder

Why is it working in ASP Core as i am seeing in the tutorial but not in normal asp.net mvc 4 (what i am using) and how to fix this.

Upvotes: 3

Views: 687

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039468

Files that are inside the ~/Views folder are protected and cannot be directly served to the client. Their purpose is to be used and rendered only on the server and not returned as static files to the client.

If you want to use angular HTML templates then put them inside some ~/public/templates folder (or something you like but outside of ~/Views) which will be available to be called from the client browser.

Upvotes: 4

Related Questions