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).
On Tuesday, January 27, 2015 at 11:50:56 AM UTC-6, Brian Power wrote:
>
> 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]
> <javascript:>> 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>
>>>> 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/ <http://www.blah.com/Office/?officeid=52>
>>>> Index/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] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> 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.
