Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I have read some articles on using $templateCache service of AngularJS. But I cant figure out how to use it when our Angular code runs inside MVC app. The idea is - when the landing page (Home/Index) is loaded (online), I should be able to go offline and still be able to use the app in offline mode. I understand for that purpose (also for performance) there is special service in AngularJS, called $templateCache.

Now, I created a default VS2013 MVC app with HomeController"

namespace TemplateCache.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome()
        {
            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

And here is the typescript(javascript) I am trying to create that can enable this functionality, to use $templateCache so that the App could work Offline.

namespace AppDomain {

    export let app = angular.module("app", ["ngRoute"]);

    app.run(function ($templateCache) {
        $templateCache.put("Home/Welcome", "Home/Welcome");
        $templateCache.put("Home/About", "Home/About");
    });

    app.config(function ($routeProvider, $templateCache) {
        $routeProvider
            .when("/Welcome", {
                //templateUrl: "/Home/Welcome",
                template: $templateCache.get("Home/Welcome"),
                controller: WelcomeController,
                controllerAs: "vm"
            })
            .when("/About", {
                //templateUrl: "/Home/About",
                template: $templateCache.get("Home/About"),
                controller: AboutController,
                controllerAs: "vm"
            })
            .otherwise({ redirectTo: "/" });
    });

    class WelcomeController {
        constructor() { }
    }


    class AboutController {
        constructor() { }
    }

    app.controller("WelcomeController", WelcomeController);
    app.controller("AboutController", AboutController);

}

What I dont understand is - how is it possible to load HTML files under MVC and all the requests must go through MVC routing, meaning Controller/Action ->>> returns a View (HTML we need). Static HTML files cannot be accessed. Even If I use a partial view for my templates Welcome and About, how can i cache them using $templateCache ??

I am a littler bit lost here, please advice.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.