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.