Make AngularJS route accessible ONLY from application code / links - angularjs

Question

i want create a route for angularJs which will be accessible only from application code and links. The main idea is to prevent the user to access the page after directly typing route url in browser's location bar.
For route configuration i use "ngRoute" module's $routeProvider.
I can't find an answer for this question. Is the thing i need possible?
Thanks in advance.

Answer 1

You can listen $locationChangeStart event. In your routes you can set a parameter (I've called it "restricted" but you could call it whatever you want) like this:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to main page',
restricted: false
})
.when('/main', {
controller: 'MainCtrl',
template: 'Allowed from anywhere.<br>Go to restricted page',
restricted: false
}).when('/restr', {
controller: 'RestrictedPageCtrl',
template: 'Allowed only from main',
restricted: '/main'
});
});
If it's false, that means there's no restriction, if it's set to a path, then the route is only accessible from that path. And you can check it with this:
app.run(function($rootScope, $location, $route) {
$rootScope.$on('$locationChangeStart', function(event, next, current) {
var nextRoute = $route.routes[$location.path()];
var currentPath = current.split('#')[1];
if (nextRoute.restricted && nextRoute.restricted !== currentPath) {
$location.path('/');
alert('You are trying to reach a restricted page!!!!');
}
});
});
You can change the behaviour and redirect user to another link or prevent location change with event.preventDefault();.
Note that if you are not using hashtag (#) in your links (html5Mode) you should change the way to get the current link.
Here's a plunker.