.Net and angular routing - feeling lost

[Brian Power]

Hi Guys,

I read the other threads on this,but I'm still confused.

We are building a web site with .net mvc. We have one complex entity, lets say it an "Office". An office has staff, resources, budgets etc. A user can have many offices to manage. We have other areas of the system already built with just .Net. I have a .net view with a list of offices. When the user clicks on one they're sent to the spa for that Office. The request goes to a .net controller called OfficeController. The Index method takes an Id. I want its view to be an Angular spa.

My route to the spa is http://www.blah.com/Office/Index/73/#!/

My angular stuff is in a folder called 'app' at the root of the website. Within the spa I have links to other views of the spa. I want it to have routes like this.

http://www.blah.com/Office/52/staff
http://www.blah.com/Office/52/budgets

I'm using John Papa's HotTowel demo as a starting point for my spa. In his routing config. He has this...

return [
           {
               url: '/',
               config: {
                   templateUrl: 'app/dashboard/dashboard.html',
                   title: 'dashboard',
                   settings: {
                       nav: 1,
                       content: '<i class="fa fa-dashboard"></i> Dashboard'
                   }
               }
           }, {
               url: '/admin',
               config: {
                   title: 'admin',
                   templateUrl: app/admin/admin.html',
                   settings: {
                       nav: 2,
                       content: '<i class="fa fa-lock"></i> Admin'
                   }
               }
           }
       ];

When I can access these views via the the browser with http://www.blah.com/Office/Index/73/#!/ and http://www.blah.com/Office/Index/73/#!/Admin . Do I need to "pass in" something like "Office/Index/73/#!/"  to angular and build dynamic routes? 

Thanks for reading

Brian

[Nicholas Smith]

The routes "/" and "/admin" are relative to the URL serving your angular app.  So if your app is at "http://www.blah.com/Office/Index/73/", then your dashboard would be at "http://www.blah.com/Office/Index/73/#/" and your admin screen would be "http://www.blah.com/Office/Index/73/#/admin".  Your routes can stay as-is.  As far as getting the "73" value into your angular app there are a few ways to do it.  I'm not a .NET developer but I think whatever page or script is building the "http://www.blah.com/Office/Index/73" page could inject the "73" as a value into your page, something like:

<script>var office_id=73;</script>

[Brian Power]

Thanks for your reply Nicholas. 

How can my angular routes stay as they are the same? '/' points to http://www.blah.com/ and '/admin' points to http://www.blah.com/admin. How do I tell angular "You start at  /Office/Index/73/#/" rather than '/' ? I think I'm misunderstanding something fundamental here.

thanks

Brian

[Nicholas Smith]

It sounds like you have a .NET page serving up your angular SPA app at this url:

http://www.blah.com/Office/Index/73/

Any routes you define within that SPA app are relative to that.  So if you have a route define as "/admin" the URL for it would be 

http://www.blah.com/Office/Index/73/#!/admin

The .NET side will get the request for "http://www.blah.com/Office/Index/73/" and serve up whatever your .NET code generates for that URL.  Presumably contains your html and javascript for your SPA app.  Once the pages loads and angular runs, it examines the rest of the URL after the #! to determine which route to use.  It will see "http://www.blah.com/Office/Index/73/#!/admin" and only use the "/admin" when matching against your route configs. 

Also I see your original post you actually want URLs like:

http://www.blah.com/Office/52/staff
http://www.blah.com/Office/52/budgets

If you don't want the #! in your URLs you'll need to look into html5 mode 

see https://code.angularjs.org/1.3.9/docs/guide/$location

I don't recommend going that route, it's extra complexity to setup within your Angular app, and on the .NET side to make it work.  If you can live with having the # in your URLs, I'd stick with that for now.

[Brian Power]

"It sounds like you have a .NET page serving up your angular SPA app at this url:

http://www.blah.com/Office/Index/73/"

Yes , thats correct. http://www.blah.com/Office/Index/73/" is a .net cshtml page with<html ng-app="app">. It then does a <div data-ng-include="'/app/layout/shell.html'"></div>

shell.html is the angular layout.

"Any routes you define within that SPA app are relative to that.  So if you have a route define as "/admin" the URL for it would be 

http://www.blah.com/Office/Index/73/#!/admin"

This not happening for me. Are you saying I can have a <a href="/"> dashboard</a> with in my angular layout, and it will know I really want <a href="Office/Index/73/#!/"> dashboard</a> ?

I can live with #! in my url for sure.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/TuLtaVNh40A/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Nicholas Smith]

Your links within the HTML will need to contain the #, so they'll look like:

<a href="#/">Dashboard</a>

<a href="#/admin">Admin</a>

[Brian Power]

I tried that, but is not finding the routes.

When I first go to the angular page with this url

http://localhost:15258/Office/Index/73

i get this in the address bar

http://localhost:15258/Office/Index/73/#!/

It shows the view as expected

Changing to <a href="#/admin">Admin</a> results in a url of

http://localhost:15258/Office/Index/73/#/admin

So better than before.

But that route is not found. I tried <a href="#!/admin">Admin</a> , thats not found either. My route config looks like this.

// Configure the routes and route resolvers
app.config(['$routeProvider','$locationProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, $locationProvider, routes) {
 
    $locationProvider.hashPrefix('!');
 
    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });
    $routeProvider.otherwise({ redirectTo: '/' });
   // $locationProvider.html5Mode(true);
  
}
 
// Define the routes 
function getRoutes() {
 
    var baseSiteUrlPath = '/app/';

    
    return [
        {
            url: '/',
            config: {

                templateUrl: baseSiteUrlPath + 'dashboard/dashboard.html',

                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }, {

            url: '#/admin',
            config: {
                title: 'admin',
                templateUrl: baseSiteUrlPath + 'admin/admin.html',

                settings: {
                    nav: 2,
                    content: '<i class="fa fa-lock"></i> Admin'
                }
            }
        }
    ];
}

Thanks again for your help Nicholas.

[Nicholas Smith]

I think in your getRoutes javascript function the URLs should not contain the #.  

// Define the routes 
function getRoutes() {
 
    var baseSiteUrlPath = '/app/';

    
    return [
        {
            url: '/',
            config: {
                templateUrl: baseSiteUrlPath + 'dashboard/dashboard.html',

                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }, {

            url: '/admin',
            config: {
                title: 'admin',
                templateUrl: baseSiteUrlPath + 'admin/admin.html',

                settings: {
                    nav: 2,
                    content: '<i class="fa fa-lock"></i> Admin'
                }
            }
        }
    ];
}

But in your HTML the a href= will need to be "#/" and "#/admin".  (Maybe #!/ and #!/admin for your case, I didn't use the '!' in my applications).

[Brian Power]

Dude! That worked. Thank you so much.

To be clear, in my html i have this

<a href="#!{{r.url}}" data-ng-bind-html="r.config.settings.content"></a>

And in my config i have

function getRoutes() {
 
       var baseSiteUrlPath = '/app/';// $("base").first().attr("href");