AngularJS directive: "templateUrl" does not work while the "template" is running

Question

I have an AngularJS directive named areaOne . When I use template , the template is displayed, but when I use templateUrl in area1.js, the HTML template is not displayed.

What am I missing here?

Server Side : ASP.NET MVC 5
Client side : AngularJS 1
Source code is available here on github.

Project Structure :

 Root Scripts app.js directives area1.js templates area1.html Views Home Index.cshtml 

Index.cshtml

 @{ ViewBag.Title = "Index"; } @section Scripts{ <script src="~/Scripts/angular.js"></script> <script src="~/Scripts/app.js"></script> <script src="~/Scripts/directives/area1.js"></script> } <h2>Index</h2> <div ng-app="app"> <area-one></area-one> </div> 

app.js

 (function() { angular.module("app", []); })(); 

area1.js

 (function() { angular.module("app") .directive("areaOne", function() { return { restrict: 'E', templateUrl: '~/templates/area1.html', controller: function ($scope) { $scope.button1Click = function () { alert("button1 clicked"); } } } }); })(); 

area1.html

 <div> <button id="button1" ng-click="button1Click()">Button 1</button> </div> 

Answer 1

Edit

If you just need to get the URL of the root / base of the site to add it to get a different URL, you can just use / as the first character of your URL.

 var getUsersUrl = "/api/users"; 

---

An alternative approach for creating a relative URL using helper methods is MVC.

Because the url pattern is wrong! Javascript cannot convert your ~ to a base application path like a razor. If you check the browser network tab, you may see a 404 error.

You do not have to hardcode your base path to your application. You can use the Url.Content or Url.RouteUrl helper methods in your razor mode to generate the URL in the application database. It will take care of the proper construction of the URL regardless of the current page / path. When you get this value, assign it to the javascript variable and use this in your other js code to create other urls. Always avoid using the javascript namespace in this case to avoid possible problems with javascript global variables.

So in your razor mode (layout file or specific view) you can do this

 <script> var myApp = myApp || {}; myApp.Urls = myApp.Urls || {}; myApp.Urls.baseUrl = '@Url.Content("~")'; </script> <script src="~/Scripts/AngularControllerForPage.js"></script> <script> var a = angular.module("app").value("appSettings", myApp); </script> 

And in your angular controllers / files you can access it, e.g.

 var app = angular.module("app", []); var ctrl = function (appSettings) { var vm = this; vm.baseUrl = appSettings.Urls.baseUrl; //build other urls using the base url now var getUsersUrl = vm.baseUrl + "api/users"; console.log(getUsersUrl); }; app.controller("ctrl", ctrl) 

You can and should access this in your data services, directives, etc.

 (function () { angular.module("app") .directive("areaOne", function (appSettings) { return { restrict: 'E', templateUrl: appSettings.Urls.baseUrl+'/templates/area1.html', controller: function ($scope) { $scope.button1Click = function () { alert("button1 clicked"); } } } }); })();