AngularJS is an inclusive JavaScript framework for SPA development. The AngularJS framework provides excellent features, such as two-way binding, directives, and so on. To secure the client-side SPA, AngularJS provides $routeProvider. $routeProvider is an AngularJS built-in service, which is a singleton object created by a service factory. $routeProvider provides two functions, .when() and .otherwise(), which are used to define the routing for an SPA. The following code syntax shows how to add routing to the SPA AngularJS application:

var app = angular.model('myApp',[]);

app .config(['$routeProvider',

  function($routeProvider) {

    $routeProvider

      .when('/login', {

        templateUrl: 'myTemplates/loginSink.html',

        data:{

        authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]

        },

        controller: 'CtrlLogin'

      })
      .otherwise({

        redirectTo: '/NotAuthorized'

      });

  }]);

In the preceding code, we defined a /login object and mapped it to the /myTemplates/loginSkin.html view. AngularJS automatically matches it with the route and loads the view.