I created routes below, the story/new doesn't show it's story-new.html template. It always go to story-view.html because I got dynamic :storyID so new consider as a dynamic name.
How to combine them so /new will route to the story-new.html or I got wrong with my route structure?
$routeProvider.when('/story/new', {
templateUrl: 'js/modules/story-new/story-new.html'
});
$routeProvider.when('/story/:storyID', {
templateUrl: 'js/modules/story-view/story-view.html'
});
I'm unsure this works, but switching them around could solve your problem.
Check the following plunker
http://plnkr.co/edit/pgQu8nwGYrOQusZnThUy?p=preview
Let me know if anything
Related
I was wondering if it was possible with AngularJS to do something like this :
I currently have a route with a first parameter called 'resource' that can be "device" or "group". There is a second parameter called 'id' but it doesn't matter. With the following code the route accepts anything as first parameter :
.when("/templates/:resource/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
It makes me check in the controller if the value of the first parameter is either 'device' or 'group'. I would like to get rid of this verification part without creating two routes if possible :
.when("/templates/group/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
.when("/templates/device/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So my question is, is it possible, using ONE route, to have several urls ? Something like this for instance :
.when("/templates/('device'|'group')/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So I don't have to check the value of the parameter afterwards in the controller myself using
if([('group', 'device'].includes($routeParams.resource))...
Do you know if it's possible ? Or a similar way to do it?
Best regards,
You can't do what you want. If you want to use ui-router you can pull it off but AngularJS ngRoute does not give you the ability to use regexes, or bind route parameters to types. If you are willing to switch to ui-router I can give you an example of how to do what you want.
I am willing to switch to ui-router if it can help me achieve what I want to do.
Also, if it supports types it's nice as I have parameters that must be integers. I am going to have a look at some examples.
If you have any example with regexes It would be nice !
I am trying to get query strings to work in my Angular setup, but it is behaving weirdly.
When i go to a URL like this:
http://localhost:3000/?query=test
The URL changes and removes anything after the '=' to end up with:
http://localhost:3000/?query
Has anyone had this problem before?
I am currently using Angular UI Router with defined states and HTML 5 mode. I have also tried specifying the query parameter in the route as below:
.state('home', {
url: '/?referrer',
templateUrl: 'app/views/home/home.html',
controller: 'mainController'
})
UPDATED........
OK. In my controller i had this:
var referrerURL = $location.search('referrer');
Removing this, fixes the issue. Why would this cause the problem?
For $location.search() method, you should use it like this:
$location.search('key','value').
If you don't set the value, it would be "true" by default.
More information here
Thanks for all your input.
I fixed this by changing my controller to use:
var referrerURL = $location.search().referrer;
First, let me show the piece of pseudo-code to illustrate functionality I am trying to achieve
<a data-ng-href="{{getPath('InsuredProfileSummary',{insuredId:insured.insuredId})}}">Summary</a>
Basically, I have a routes defined so that I can refer to them by name, for example
{
name:'InsuredProfileSummary',
url: '/insureds/:insuredId/profile/summary',
config: {
templateUrl: 'app/insured/profile/summary/inProfileSummary.html',
reloadOnSearch: false,
settings:{}
}
}
and I have a service that, given the route, builds the url. So in my example it would replace insuredId with the value, and one would get correct url to the insured profile. This works fine in controller, such as this code
$scope.closeEditModal(vm.insured);
var summaryPath = routesSvc.getPath("InsuredProfileSummary", { insuredId: vm.insured.insuredId });
$location.path(summaryPath);
My question is how would one achieve this binding in html template. Is there a native way to bind result of a function to a value of the attribute, or do I have to write my own directive?
Ok, I had an error, I was missing a "#" in the path, that is why the code did not work.
don't see an issue here.
http://jsfiddle.net/STEVER/2YkeH/
$scope.genUrl = function(){
return 'http://js4.it'
}
Probably I didn't get the idea of the question.
If you want to update it asynchronously it's better to bind a model -
http://jsfiddle.net/STEVER/2YkeH/6/
I'm trying to redirect to an external page from my AngularJS file if the user enter a special url, for instance /test. I have gotten this to work in multiple different ways but all the different ways show a "flash" of the design from index.html. I would like it to go direct without rendering any html at all!
Here is a fiddle of one of the examples, but it is not the best place to test since I cant redirect from jsiffle.net :-)
$routeProvider.when("/test", {
resolve: {
controller: "Redirect"
}
});
Also had one example where I just used a controller and a empty template in the routing, but it gave me the same result.
Any ideas?
If you know the URL(routing) then use,
$location.path('the_URL');
I'm trying to redirect to another route using:
$location.path("/route");
But for some reason it is not working. I did an auto-complete widget using jQuery-UI and I'm calling a function from the scope once the user selects an option. I debugged it and it enters the function but it is never redirected to the other route. It only changes the route when I press a key.
I think it is kind of strange but I haven't figured out how to solve this. I used
window.location = "#/route";
and it works but I want to use the path() function.
Does anybody have any idea why this is happening?
With an example of the not-working code, it will be easy to answer this question, but with this information the best that I can think is that you are calling the $location.path outside of the AngularJS digest.
Try doing this on the directive scope.$apply(function() { $location.path("/route"); });
Don't forget to inject $location into controller.
Assuming you're not using html5 routing, try $location.path("route").
This will redirect your browser to #/route which might be what you want.
If you need to redirect out of your angular application use $window.location. That was my case; hopefully someone will find it useful.
Check your routing method:
if your routing state is like this
.state('app.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'templates/register.html',
}
}
})
then you should use
$location.path("/app/register");
It is hard to say without knowing your code. My best guess is that the onchange event is not firing when you change your textbox value from JavaScript code.
There are two ways for this to work; the first is to call onchange by yourself, and the second is to wait for the textbox to lose focus.
Check this question; same issue, different framework.