Using Adal.js with $stateProvider

Question

We have an AngularJS SPA, and we have been using Adal.js for authentication. Till now we were handling the routes using $routeProvider (ngRoute module), but due to some recent requirement, we need to move away from the route provider method and adopt $stateProvider (in ui-router). However out authentication mechanism needs to remain similar. Can adal.js work with $stateProvider in the similar fashion as it works with $routeProvider?
We are using requiredADLogin paramter in the routes to specify which routes need Azure AD Authentication. The code looks like below:

app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {

$routeProvider
    .when('/', {
        controller: 'homeCtrl',
        templateUrl: '/Templates/home.html',
        requireADLogin: true
    })
    .otherwise({
        //template: "Invalid"
        redirectTo: '/'
    });

On changing to $stateProvider will a code like below be valid:

app.config(function($stateProvider, $urlRouterProvider) {
           $stateProvider
        .state("dashboard", { url: "/dashboard", templateUrl: "Templates/dashboard.html" })
            .state("health", { 
                parent: "dashboard", 
                url: "/agent_tier1", 
                templateUrl: "Templates/health.html",
                requireADLogin: true 
        })
});

Or if we can put the requireADLogin property in the parent state.

Answer 1

adal.js will work with ui-router, requireADLogin should be at every state you want to protect not just in the parent state.