asp.net - Security for an AngularJs + ServiceStack App -

i have application have 4 modules in front end, i'm trying use as possible angularjs in front end i'm using empty website asp.net project host files , rest servicestack, project have kind of following structure:

~/ (web.config, global.asax , out of box structure asp.net website) - app <-  angularjs      - users  <-  js controllers , views (static html files)     - companies     - backend     - public     index.html     indexctrl.js     app.js - content - js 

i use angularjs service calls , backend i'm using rest servicestack.

the question how can restrict access authenticated users static html files? let's ones inside inside companies, backend , users example

hi after doing research solution worked me:

1. install razor markdown nuget
2. change file structure match default behavior rm [razor markdown] /views
3. modify web config following approach described in this service stack example
4. change static htmls files .cshtml files, default creates same route without extension /views/{pagename} without extension, i'm using approach authorization logic simpler implement (at least me)
5. update service method authorize attribute can find out more in page

to illustrate lit of bit more route definition in far:

'use strict'; angular.module('myapp', ['myapp.directives', 'myapp.services']).config(     ['$routeprovider', function($routeprovider) {         $routeprovider.when('/dashboard', {             controller: 'dashboardctrl',             templateurl: 'views/dashboard'             }).when('/payments', {             controller: 'paymentsctrl',             templateurl: 'views/payments'         }).             when('/login', {                 controller: 'loginctrl',                 templateurl: 'views/login'             });     }]  ); 

notice references pointed razor paths.

this small menu i've done in angular

<div class="container">    <div class="navbar" ng-controller="indexctrl">     <div class="navbar-inner">       <a class="brand" href="#/">header menu</a>       <ul class="nav">          <li ng-class="{active: routeis('/dashboard')}"><a href="#/dashboard">dashboard</a></li>          <li ng-class="{active: routeis('/login')}"><a href="#/login">login</a></li>          <li ng-class="{active: routeis('/payments')}"><a href="#/payments">payments</a></li>       </ul>     </div>   </div>     <ng-view></ng-view>  </div> 

let's payments page restricted, every time click on page 401 unauthorized message.

service host:

 public override void configure(container container)         {               plugins.add(new authfeature(() => new authusersession(), new iauthprovider[] {                 new facebookauthprovider(appsettings),                  new twitterauthprovider(appsettings),                  new basicauthprovider(appsettings),                  new googleopenidoauthprovider(appsettings),                 new credentialsauthprovider()             })); //i'm going support social auth well.              plugins.add(new registrationfeature());              routes.add<userrequest>("/api/user/{id}");             routes.add<loginrequest>("/api/user/login","post");             routes.add<paymentrequest>("/views/payments");           } 

i hope helps