AngularJS - generating view from .NET controller only executed once

Question

I have a MVC .NET application with AngularJS. In my route provider I use the controllers of mvc for retreiving the views as follows:

   .when('/Units', {
        templateUrl: 'Unit/Units'
    })
    .when('/UnitsDetail', {
        templateUrl: 'Unit/UnitsDetail'
    })

And my .NET UnitController has the following methods:

 [Authorize]
    public ActionResult Units()
    {
        return View();
    }

    [Authorize]
    public ActionResult UnitsDetail()
    {
        ViewBag.reference = Guid.NewGuid().ToString().Substring(0, 6);
        return View();
    }

For the UnitsDetail view I need a reference that is generated in the UnitsDetail() method.

The problem comes when I go from Units to UnitsDetail several times. The first time the UnitsDetail() method is called and thus, the reference is generated but if I go back to Units and access again UnitsDetail the method is not called and the reference is the same. I need to generate one reference each time.

I know I could generate it using JS in the client or make an AJAX request from Angular to the server but what I really want to know is how to make Angular call the method UnitsDetail() every time I go to "#/UnitsDetail".

Thanks!

Answer 1

By default angular will cache all views in its template cache.

This is by design.

Angular expects the view to be just static HTML with the dynamic part marked using the {{ dynamicScopeVariable }} code. Angular will use scope objects to replaces the dynamic bit . But the static part will be shown from the cache.

The first time you execute the view , the view is cached.

You have 2 options here. Actually just one which is good from the Design point of you #2.

Option #1

Disable template caching in Angular as shown here https://stackoverflow.com/a/27432167/2794980

This means that angular will call the HTML ACTION every time it needs the view.

This is not the best way to use angualar but it will work. You should also consider the performance side .. By far the most time consuming call on a ASP.NET MVC applications are Actions calls. This method means that while you are using a client side MVC framework , you are not utilizing one of its important benifits.

Options #2

Use a angualar service to get the GUID from back end . i.e. the code below.

 ViewBag.reference = Guid.NewGuid().ToString().Substring(0, 6);

Preferably use a WebAPI if u can ( your request will be small ). The use angular to replace the GUID in ur VIEW.

It is not clear from the question why you need the GUID and if you could do with generating a random unique number using Javascript . If that is possible , it might be the best solution . But based on the info in the question you could use either of option 1 or 2.

Edit : Didn't realize that you have already tried option 2 , in that case Option 1 it is.

Edit 2 : If you want to remove a single element from the cache , you can do

 $templateCache.remove("<Element Name>");

or you could use the

$cacheFactory.remove("Name")

Read more about cache factory here : https://docs.angularjs.org/api/ng/service/$cacheFactory

The name is generally the page name , you can look at the template cache or cache factory object in debugger console to find the exact name.