Front-end development with conditional HTTP and HTTPs routes

I am currently using MEAN stack for web development. My questions is how do I mix HTTP and HTTPs on the same website?

For most scenarios I am communicating with the back-end using HTTP protocol. And for some pages I absolutely need to use HTTP (For example #!/shop/:shopId route, I used an iframe that displays info from other websites. and some pages I need to HTTP GET some info from other API services.) It seems that I cannot achieve these with HTTPs setup.

For some cases I am communicating with the back-end using HTTPs (such as #!/money route) ...etc. And apparently you need HTTPs with money involved.

My back-end has middlewares setup so that if you request /money using HTTP it will return some error (currently returning 301 but not sure if this sound correct..).

But I am not sure how do I proceed with front-end development. For angular should I just do some configurations so when the route consists of /money I just reload the whole page in HTTPs or should I just explicitly make sure the links look someting like this?

<a ng-href="http://ift.tt/1GVe3sV">money page</a>

But that seems like a lot of hard-coding for me.

My question is: 1. Am I thinking in the right direction?
2. Is it doable?

Thanks and any idea is greatly appreciated!