Angular Get Parameter Off URL with Slashes - javascript

I am developing a single page angular app.
The app takes a token off the URL, then passes it off to an API. Currently my URL looks like this:
www.example.com/?token=3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95
My code is already properly using angular routes, but I have to get the token off the URL like this:
var postToken = $location.search().token;
I have this on config:
app.config(function($locationProvider, $httpProvider, $routeProvider) {
$routeProvider
.when('/token/:token', {
templateUrl : 'views/select-token.html',
controller : 'selectHold'
})
.when('/purchase-hold/token/:token', {
templateUrl : 'views/purchase-token.html',
controller : 'purchaseHold'
});
});
I want my URL to be able to look like this:
www.example.com/token/3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95
What do I need to code to be able to search for a /token/ and grab the data next to it, as opposed to ?token= ?

Build your route like you currently are
.when('/token/:token', {templateUrl : 'views/select-token.html', controller : 'selectToken' })
Then in your controller inject in $routeParams and you will be able to access your route parameter
.controller('selectToken', function($scope, $routeParams){
$scope.token = $routeParams.token
}

you can inject $routeParams in your controller and it will be available in that
app.controller('selectToken', function($scope, $routeParams) {
console.log($routeParams.token);
// We now have access to the $routeParams here
});
then Angular will populate the $routeParams with the key of :token, and the value of key will be populated with the value of the loaded URL.
If the browser loads the URL www.example.com/token/3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95
,
then the $routeParams object will look like:
{ token: '3d2b9bc55a85b641ce867edaac8a979173d4446525230290fc86a0ed8ff18b95' }

Related

ngRouting issues in Angularjs

I have login and sign-up form. I have defined login and sign-up js code in one main controller. If user is new , I have defined link below the login , on-click of url it should get re-directed to another html page. URl is getting routed, but my js code is not responding . I tried to rectify the mistake, but i couldn't achieve it.
Please let me know what mistake, I have done. Any help/advice greatly appreciated.
AngularJS code :
var app = angular.module('logapp',['toastr','ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/login',{
templateUrl : "login.html",
controller : "credientials"
})
.when('/signup',{
templateUrl : "signup.html",
controller : "signctrl"
})
.when('/practice',{
templateUrl : "practice.html",
controller : "practicectrl"
});
$routeProvider.otherwise({ redirectTo: '/login'});
}]);
Controller code :
1. app.controller('credientials',['$scope','$route','$rootScope','$window','$location','$http','toastr','Authentication',function($scope,$route,$rootScope,$window,$location,$http,toastr,Authentication)
2. app.controller('signctrl',function($scope){});
app.controller('head',function($scope){
$scope.hometitle = "Create your account here. It's take only a minute."
});
1. Login controller
2. Signup controller
If you don't use HTML5 mode you should specify hash-prefix.
And with Angular 1.6;
The default hash-prefix used for $location hash-bang URLs has changed
from the empty string ('') to the bang ('!').
So, you can use the URL as below by default :
<a href="#!signup">
Also check: Angular 1.6 $location

Can't navigate to correct path using $location

In my index.html within ng-repeat I have a tag like this
<li><a ng-click="viewJobs(employer)">View Job Listing</a></li>
then in my controller I do
$scope.viewJobs = function(user){
$location.path('/employers/jobs/' + user.user.id);
}
My route config
.when('/employers/jobs/user_guid',{
templateUrl : '/myTemplate/employers/jobs.html',
controller : 'employersJobController'
})
When I click on the link it go to http://localhost/#/, I wonder what is my mistake.
The route config should be (and the param should start with a :),
.when('/employers/jobs/:id',{
templateUrl : '/myTemplate/employers/jobs.html',
controller : 'employersJobController'
})
Note : the parameter you are passing from the controller and the routing param must be same (by name).
for,
$location.path('/employers/jobs/' + user.user.myId);
the route config will be,
.when('/employers/jobs/:myId',{
templateUrl : '/myTemplate/employers/jobs.html',
controller : 'employersJobController'
})

Fetch URL parameters using angular.js

Hi I have a URL below:-
http://localhost:8080/test/rpw.html?u=64603549618667520&v=7816fb816d1c6bc85b77b372cc5e5eb9
I want to fetch the value of u & v parameter in the controller, How it can be done please give a detailed description with example
Adding the code snippet
<script>
var app = angular.module('resetPasswd',['ngRoute']);
app.controller('passwordCtrl', [$routeParams, function($scope,$routeParams)
{
var params = $routeParams;
alert("check value "+params.u);
}]);
Inject '$routeParams' into a controller as such and access the $routeParams object and there you have it.
angular.module('app')
.controller('DummyController', ['$routeParams', function($routeParams) {
var params = $routeParams;
}
The above $routeParams gives your controller access to all the parameters in the url in the form of a nice object therefore you are able to access the url parameters very easily. In this case you could do params.u and that would give you your u parameter.
Make sure you injected the ngRoute service into your app beforehand or the above $routeParams won't work.
angular.module('app', ['ngRoute']);
Reference :
https://docs.angularjs.org/api/ngRoute

Angular JS routing: get URL to stay as user inputs

I am working on an app that lets users create polls, then link that poll to other users for them to vote.
To let users give a direct link, I need two route parameters: the ID of the user who made the poll, and the poll question.
So I want to let users go to website.com/:id/:question, and then make the corresponding API get calls using those parameters to get the information.
However, the page always redirects to website.com/ no matter what is put in.
Any ideas of where I would go to change this?
EDIT://
The $routeParams seems to be the right idea!
However, I am having trouble making it work.
I set it up like so:
angular.module('voteApp')
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : 'MainCtrl'
})
.when ('/:id/:poll', {
templateUrl : 'index.html',
controller : 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Then the client side console keeps printing 'Tried to load angular more than once'
And when I switch the index.html to 'app/main/main.jade' it just prints the contents of that file.
I am fairly sure that the path to index.html is correct, since the path to main.jade is correct and I am basing the path to index.html relatively to that
If you are using NgRoute, you ought to use the $routeParams service: https://docs.angularjs.org/api/ngRoute/service/$routeParams
If you are using ui-Router, then you can use the $stateParams service: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stateparams-1
You would also need to define a route/state to correspond to the path /:id/:question as well.

get requests from expressjs and angularjs

I have a simple route in my expressjs app configuration like -
app.get('/download/:noteid/:fileid',notes.download);
where notes.download is a function with the contents as -
exports.download = function(req,res) {
console.log("here");
console.log(req.params.noteid);
console.log(req.params.fileid);
};
now when i open directly in the browser the url -
http://localhost:5000/download/5f4815f2-73a9-4621-86ed-b4e302cc49ba/all
the i see the correct log in the server
but when i try something like -
Download
and then click on this download button angular takes me to a new page without any template defined for that page and i don't see anything in the logs of my server. so how do i make get requests like the one i make by directly entering in the url by the anchor element.
the route configuration for my angular app is something like this, in case if needed -
$routeProvider
.when('/', { templateUrl: '/partials/main/main', controller: 'mainCtrl'})
.when('/admin/users', { templateUrl: '/partials/admin/user-list',
controller: 'PaginationDemoCtrl'
})
.when('/browse/notes', { templateUrl: '/partials/notes/browseNotes',
controller: 'browseNotesCtrl', resolve:routeRoleChecks.user
})
.when('/upload/notes', { templateUrl: '/partials/notes/uploadNotes',
controller: 'uploadNotesCtrl', resolve:routeRoleChecks.user
})
.when('/profile',{ templateUrl:'/partials/account/mvProfile.jade',
controller: 'mvProfileCtrl' , resolve:routeRoleChecks.user
});
When you access the url directly from the address bar it does not go through the routeprovider while when u try to hit the url through the hyperlink(anchor tag) from your webapp , routeprovider checks if there is a path defined for your link.
You can remove the href and use the click event of the anchor tag which calls a function in the controller. This function must call $http module's get method with the url.
or --
add a path for in the routeprovider.
https://docs.angularjs.org/api/ng/service/$http#get

Categories