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
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.
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);var app = angular.module('app', ["ui.bootstrap"]);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',
"NetworkError: 404 Not Found - http://localhost:2283/Views/Home/searchableMultiselect.html"