Angular.js - Prevent Direct Access to Partial Views

Question

I want the users to not be able to view the partials directly when accessing their url in the browser. For example if my partial view is located in:

/partials/myPartial.html

I can still directly access it and see the odd markup. Is there a way to prevent it and make the partial views only available through angular? Thanks.

Answer 1

I put a <script> at the top of every view partial that checks if the variable containing the main app Module exists, if not redirect to index.html

If in app.js the appModule is defined in this way:

var appModule = angular.module('myApp',["ngRoute","ngResource"]);`

At the top of the partial insert:

<script type="text/javascript">
  if(typeof appModule === 'undefined'){
    document.location.href="index.html";
  }
</script>

Answer 2

Well, not really.

At the end of a day a browser needs to be able to access a partial to download it. If a browser can do this your users will be able to do so as well. You might eventually make it a bit harder for them to hit partials directly (for example to by configuring your server so it only responds to request with a certain header and configure $http to send this header on each XHR request).

The other possibility is to pre-load partials up-front as described here and not expose them via HTTP at all (actually this is a good practice for production deployments anyway).

Otherwise it is hard to propose a meaningful solution without knowing what is the exact problem (functionally speaking) that you are trying to solve.