Prevent access to admin pages in AngularJS

I would put a check inside routeProvider. This has to be done for every route which requires authentication. You can even write a separate method and stick it to each route to avoid duplication.

$routeProvider.when('/profile', {  templateUrl: 'views/profile.html',  controller: 'ProfileCtrl',  resolve: {    validate: function($q, $location) {      // Either you could maintain an array of hashes on client side      // a user do not have access to without login      // Or hit the backend url to check it more securely      var validateAccess = $q.defer();      var isAllowed = ['profile', 'index', 'dashboard'].indexOf($location.hash()) !== -1;      if (!isAllowed) {        $location.path('/login');      }      validateAccess.resolve();      return validateAccess.promise;    }  }}).otherwise({  redirectTo: '/'});

This question is a bit old but if anyone is looking for solution out there , I was using a resource file to store my html templates and then retrieve it with webapi while validating permission and returning the html only when user authenticated.

Why would you "much prefer" not to serve these pages to non-admin users? Do you have an actual reason to care about this, other than some instinct that you should stop people seeing things they're not "supposed" to see?

If your security is configured properly then non-admin users will not be able to access admin data or perform admin operations. That is what you should concentrate on, not inventing elaborate ways to stop them seeing admin screens that they can't use anyway. Any time you spend on this is basically time wasted, and you should spend it on more important things.