I have configured the routes like this in my app :
$routeProvider
.when('/', {action: 'account_landing_page'})
.when('/:resource/:id/:extrajson', {action: 'open_resource'})
.when('/:resource/:id', {action: 'open_resource'})
.otherwise({redirectTo: '/'})
I want to be able to perform different operation if the url contains :extrajson. So I have this URL :
xyz/dashboard/1/%7B%22screen_shot_mode%22%3A%20%22on%22%7D
When this URL loads it loses all the urlencoded extra parameters and becomes :
xyz/#/dashboard/1
Can somebody tell me what am I doing wrong over here?
Can somebody explain me why is it happening?
Here are some snippets of code that might help you understand.
when('/search/:someid', {
templateUrl: 'partials/qviewplaceholder.html',
controller: 'Myctrl as somectrl'
}).
Notice the ":someid" part. Down in the controller will look this.
app.controller('Myctrl', ['$routeParams',function($routeParams) {
this.somedata = $routeParams.someid;
/*controller logic that uses $routeParams.someid for it's logic*/
}]);
You now have a template [partials/qviewplaceholder.html] and a variable passed into it via $routeParams. The $routeParams variable is usually some id that can be used to point to some object. Then display the data accordingly. Also, here is a video demonstrating the use of $routeparams. https://www.youtube.com/watch?v=ziUelciLL5Q
Those parameters are meant to be part of the URL path. So it would match /:resource/:id/:extrajson to /foo/bar/baz, where $routeParams gets parsed into:
{
"resource": "foo",
"id": "bar",
"extrajson": "baz"
}
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Related
I have an odd issue where I use an ng-click to $state.go() to a state, and get the correct url but the wrong template and controller.
These are my states:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/messages");
$stateProvider.state('message', {
url: "/messages/:to/:fro/:messageID",
templateUrl: 'message.html',
controller: 'MessageCtrl'
}).state('compose', {
url: "/messages/compose/a/message",
templateUrl: 'compose.html',
controller: 'ComposeCtrl'
});
});
This is the function triggered by my ng-click and I am in fact getting the console log so I know the right one is firing.
$scope.composeMe = function(){
console.log("You want to compose a message!");
$state.go("compose");
};
When I fire that function I get the url to change to http://example.com/messages/compose/a/message but I get the templateUrl and the controller of the message state.
Why is that? The other state is fired from a similar (ng-click derived) function and works perfectly.
The URL you are trying to go to matches the one you are actually going to.
How would ui-router know that "compose" isn't the to: field you want, "a" isn't the fro: field you want, and "message" isn't the messageID you want?
Move the more specific state definition above the one with URL parameters.
Hi i'm trying to pass a parameter from page A to B.let's say you get a name from user in page A and want to show it in page B.
I Googled a lot but there is not a working result so i can see how all parts work together.
Q :I know i need to use $stateParams here but how it's unclear for me.
Thanks is advance.
Below is an example of state params being used:
var app = angular.module('app', [])
app.config(function($stateProvider){
$stateProvider
.state('sample', {
url: '/sample/:name',
templateUrl: '.sampleView.html',
controller: 'SampleController'
})
app.controller('SampleController', function($stateParams) {
//access params by using $stateParams.<param name>
var name = $stateParams.name;
}
The scenario you described sounds more like something where you would want to use a factory/service or maybe even some browser caching.
I posted a question recently about how to set parameters in the URL with Angularjs so that they could be preserved on page reload. But it caused a problem with Google Maps.
I am using ngRoute to navigate around my application. And the problem that I've experienced with setting parameters in the URL, was that every time I would set a parameter (be it $location.search() or just a plain old window.location.hash='something'), the Google Maps map would get unloaded. I tried changing parameter names, because I thought Google Maps listens to some of those options by default. But that wasn't the case.
Once I got rid of the ngRoute code completely, and instead of the ngView directive, I included my pages with ng-include, the map didn't get unloaded anymore when I manipulated the parameters.
I'm not that good as to know exactly what or why is going on, but I would guess that ngRoute thinks it has to compile my template file again because "something" changed in the URL. So what I would like, is to explain to ngRoute somehow, that if the part after ? changed, then it shouldn't try to compile my template file again (and subsequently destroy the loaded Google Maps), because those are just my additional options. But if the part before ? changed, then that's fine, because then the page changed.
Or, is there another, better, more Angular-way of getting around this issue?
This is my ngRoute configuration:
app.config(function($httpProvider, $routeProvider) {
// Routing
$routeProvider.when("/", {
redirectTo: "/Map"
}).when("/Map", {
controller: "MapController",
templateUrl: "tpl/view/map.html"
}).when("/Table", {
controller: "TableController",
templateUrl: "tpl/view/items-table.html"
}).otherwise({
templateUrl: "tpl/view/404.html"
});
});
This is my code for changing pages:
$scope.navigate = function(location) {
$location.path(location);
};
And this is how I would set up a custom GET parameter, as per the code from my other Stackoverflow question:
var params = $location.search();
params.source = source.filename;
$location.search(params);
You're looking for the reloadOnSearch property.
app.config(function($httpProvider, $routeProvider) {
...
}).when("/Map", {
controller: "MapController",
templateUrl: "tpl/view/map.html",
reloadOnSearch: false
})
...
});
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I'm learning AngularJs at present and I've hit a brick wall due to my lack of knowledge on it.
What I'm trying to do is pass in a Id (guid) within the URL and inside my controller I'll retrieve it and pass it to a WebApi to return some data linked to that Id.
However I'm unable to get the route correct, my currently URL looks like this:
http://localhost:15216/
When I pass in the Id it will look something like this
http://localhost:15216/573637
Quite straight forward, my page is called index.html, after browsing the web and looking at this question and basically replicating what he/she has provided I'm still unable to retrieve the value from my URL.
This is my current configuration:
var myApp = angular.module('christmasvip', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller: 'mainController' }).
otherwise({ redirectTo: '/index.html' });
}]);
And this is my Controller:
myApp.controller("mainController", function ($scope, $http, $routeParams) {
var userId = $routeParams.userId;
alert(userId);
});
I then manipulate the URL so it would look like :
http://localhost:15216/573637
But when I alert the userId it say's "underfined"
I've also included angular-route.js in my project
Any help/solution would be great.
In the documentation of ngRoute you can find an example... Try using the URL: http://localhost:15216/index.html#/573637
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
Can you try the url
http://localhost:15216/#/573637
I assume your root is http://localhost:15216/
your confusing the $routeProvider in the config you say
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller:'mainController' }).
so your telling it, "if we see any url like this '/anything' take 'anything' and supply it as a parameter to the $routeParam service
then you add
otherwise({ redirectTo: '/index.html' });
which tells it, if you get any other url redirect to "/index.html", but index.html is something so its going to want to route you to '/' with the route param as 'index.html'
also you need to make sure you have <ng-view></ng-view> inside of your index.html file for the $routeProvider to load the route correctly, that is probably your main issue, but the first thing i mentioned would probably be an error once you add it.
If I have a route as such:
$routeProvider.when('/event/:id', { templateUrl: 'view/event-details.html', controller: 'EventDetailCtrl'});
Is there a way to check if the user is on the /event/:id route
Is using if ($location.path().indexOf('/event/') !== -1) a safe way to check if the user is on this route?
Of course there is. Either you can use a console.log in controller or another way you can use an ng-init in the template URL to call any function. So if the template is loaded then it will call the function and hence you get to know that the user is on that route :)
I'm not sure to fully understand what you want to achieve. Your $routeProvider relays your incoming request to a particular controller. It is inside the controller you can fully access the tokens parsed by your $routeProvider.
Declare $routeParams in your controller to access the tokens of your matched route.
$routeProvider
.when('/event/:id', { templateUrl: 'view/event-details.html', controller: 'EventDetailCtrl'});
In your controller:
.controller('EventDetailCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
})