CODEWITHSUNDEEP
angularjsasp.net-mvciisroutes
Slava
Slava

Reputation: 6640

Is it possible to define AngularJS route's templateUrl path fully agnostic to IIS app folder structure?

I have have done some research here and in general, but couldnt find a proper way to implement this.

We have and MVC/WebAPI2/AngularJS Web app.

I am trying to achive this goal: being able to put my app anywhere in IIS app folder structure without any code changes. That means, get rid of any IIS Application name in my code.

Here is a simple fragment of ng-route path defined:

.when("/", { templateUrl: "Home/Main", controller: "MainController", controllerAs: "vm" })

Now, the IIS app is called ReportsWeb (but could be any name)

If I set ReportsWeb app under Default Web Site root:

http://localhost/ReportsWeb/

then everything works fine, and templateUrl page is loaded fine.

But if the app is placed under another IIS App (the one we have here is called RealSuiteApps, which is itself under Default Web Site)

http://localhost/RealSuiteApps/ReportsWeb/

then, the templates are not loaded, since constructed URL for templateUrl is no longer valid:

http://localhost/RealSuiteApps/Home/Main

If I change templateUrl to "/Home/Main", constructed URL is not valid again

http://localhost/Home/Main

If I change templateUrl to "./Home/Main", constructed URL is not valid again

http://localhost/RealSuiteApps/Home/Main

Is it possible to define templateUrl only relative to the latest App name in the IIS hierarchy without hardcoding all these names, so that it will work in any IIS app tree

http://localhost/App1/App2/App3/ReportsWeb/

Thanks!

Upvotes: 0

Views: 104

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

I use grunt-html2js tool to convert all html templates to Javascript at build time, which uses Angular's template cache.

I've defined my grunt task to overwrite the default module naming to templates/ so that I can reference any template easily:

html2js: {
      options: {
        rename: function (moduleName) {
          return moduleName.replace(/^.*[\/\\]/, 'templates/');
        }
      },
      all: {
        src: ['./src/**/*.html', '!./src/index.html'],
        dest: 'tmp/templates.js'
      }

    },

This will create a templates.js file that I can include as a script tag. Then I can access any template like so:

templatUrl: 'templates/my-template-filename.html'

Regardless of where it's path was in the source code.

Upvotes: 0

Related Questions