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. On Tue, Jan 27, 2015 at 5:14 PM, Nicholas Smith <[email protected]> wrote: > Your links within the HTML will need to contain the #, so they'll look > like: > <a href="#/">Dashboard</a> > <a href="#/admin">Admin</a> > > > > On Tuesday, January 27, 2015 at 11:05:54 AM UTC-6, Brian Power wrote: >> >> "It sounds like you have a .NET page serving up your angular SPA app at >> this url: >> http://www.blah.com/Office/ <http://www.blah.com/Office/?officeid=52>Ind >> ex/73/" >> >> Yes , thats correct. http://www.blah.com/Office/ >> <http://www.blah.com/Office/?officeid=52>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/ <http://www.blah.com/Office/?officeid=52>Ind >> ex/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/ <http://www.blah.com/Office/?officeid=52>Index/73/#!/"> >> dashboard</a> ? >> >> I can live with #! in my url for sure. >> >> >> >> On Tue, Jan 27, 2015 at 4:49 PM, Nicholas Smith <[email protected]> >> wrote: >> >>> It sounds like you have a .NET page serving up your angular SPA app at >>> this url: >>> http://www.blah.com/Office/ <http://www.blah.com/Office/?officeid=52>Ind >>> ex/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/ <http://www.blah.com/Office/?officeid=52>Ind >>> ex/73/#!/admin >>> >>> The .NET side will get the request for "http://www.blah.com/Office/ >>> <http://www.blah.com/Office/?officeid=52>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/ >>> <http://www.blah.com/Office/?officeid=52>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/?officeid=52/staff> >>> http://www.blah.com/Office/52/budgets >>> <http://www.blah.com/Office/?officeid=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. >>> >>> >>> >>> >>> >>> >>> >>> On Tuesday, January 27, 2015 at 10:26:36 AM UTC-6, Brian Power wrote: >>>> >>>> Thanks for your reply Nicholas. >>>> >>>> How can my angular routes stay as they are the same? '/' points to >>>> http://www.blah.com/ >>>> <http://www.google.com/url?q=http%3A%2F%2Fwww.blah.com%2FOffice%2FIndex%2F73%2F%23%2F&sa=D&sntz=1&usg=AFQjCNGv33lTp_RF-rWvxxmKJ6hHJAV6EQ> >>>> and >>>> '/admin' points to http://www.blah.com/ >>>> <http://www.google.com/url?q=http%3A%2F%2Fwww.blah.com%2FOffice%2FIndex%2F73%2F%23%2F&sa=D&sntz=1&usg=AFQjCNGv33lTp_RF-rWvxxmKJ6hHJAV6EQ>admin. >>>> How do I tell angular "You start at /Office/Index/73/#/ >>>> <http://www.google.com/url?q=http%3A%2F%2Fwww.blah.com%2FOffice%2FIndex%2F73%2F%23%2F&sa=D&sntz=1&usg=AFQjCNGv33lTp_RF-rWvxxmKJ6hHJAV6EQ>" >>>> rather than '/' ? I think I'm misunderstanding something fundamental here. >>>> >>>> >>>> thanks >>>> Brian >>>> >>>> >>>> >>>> On Tuesday, January 27, 2015 at 3:10:09 PM UTC, Nicholas Smith wrote: >>>>> >>>>> The routes "/" and "/admin" are relative to the URL serving your >>>>> angular app. So if your app is at "http://www.blah.com/Office/In >>>>> dex/73/", then your dashboard would be at "http://www.blah.com/Office/ >>>>> Index/73/#/ >>>>> <http://www.google.com/url?q=http%3A%2F%2Fwww.blah.com%2FOffice%2FIndex%2F73%2F%23%2F&sa=D&sntz=1&usg=AFQjCNGv33lTp_RF-rWvxxmKJ6hHJAV6EQ>" >>>>> and your admin screen would be "http://www.blah.com/Office/In >>>>> dex/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> >>>>> >>>>> >>>>> >>>>> On Tuesday, January 27, 2015 at 6:41:22 AM UTC-6, Brian Power wrote: >>>>>> >>>>>> 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/ >>>>>> <http://www.blah.com/Office/?officeid=52>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/?officeid=52/staff> >>>>>> http://www.blah.com/Office/52/budgets >>>>>> <http://www.blah.com/Office/?officeid=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/ >>>>>> <http://www.blah.com/Office/?officeid=52>Index/73/#!/ and >>>>>> http://www.blah.com/Office/ >>>>>> <http://www.blah.com/Office/?officeid=52>Index/73/#!/Admin . Do I need >>>>>> to "pass in" something like "Office/ >>>>>> <http://www.blah.com/Office/?officeid=52>Index/73/#!/" to angular and >>>>>> build dynamic routes? >>>>>> >>>>>> >>>>>> >>>>>> Thanks for reading >>>>>> >>>>>> Brian >>>>>> >>>>>> >>>>>> >>>>>> >>>>>> -- >>> 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 >>> [email protected]. >>> To post to this group, send email to [email protected]. >>> Visit this group at http://groups.google.com/group/angular. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> -- > 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 > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
