etags vs url parameter for caching

Question

I would like to cache semi dynamic html templates. They will change probably once a week.

Currently i'm seeing two options:

1. Generate Etag for the html.
   • Pros: Requires little additional scripting
   • Cons: Requires a http call for every resource. (The website can have ~10-20 calls per session)
2. Use parameters for getting the html. e.g. (http://example.com/header.html?v=5)
   • Pros: You can set the cache timeout with http headers so it wouldn't need a http call. Probably faster loading time.
   • Cons: Not as flexible. If expire time is to large it could conflict in the future.

I'm currently thinking about using the second option. What would be the best option and why?

background:

I'm using a CMS to dynamically generate html templates that are used by UI router (Angular) to combine to a full application. I would like to cache the html templates client side so the client would only need to update its files if the content has changed.