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");
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'
}
}
}
];
}
On Tue, Jan 27, 2015 at 6:26 PM, Nicholas Smith <[email protected]>
wrote:
> 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]>
>> 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>
>>>> Index/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>
>>>> 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/ <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/to
>>>>> pic/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 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.
