We Keep Coding

Significance of ":" in url in angularjs

I am learning angular js , and I found this in some tutorial while explaining routing.
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users/', {templateUrl: 'template.tpl.html', controller: myCtrl}).
when('/users/:userId', {templateUrl: 'template.tpl.html', controller: myCtrl})
}]);
What is this :userId in the link ? what i know is suppose we have a folder template in that if we have anotherfile user we will put the link as "template/user" , I also know this userID will be used in routerParams as a parameter for route's controller but what exactly is the meaning of : in the link above ?

This represent a parameter
In this case the parameter is userID thus those urls
domain.com/users/0
domain.com/users/1
domain.com/users/2
will call the same route with userID 0, 1 and 2

:userId repesents the dynamic part of url. The value can be anything.
It is generally used for id as you can see. Used for creating dynamic routes.
Other frameworks like nodejs, in php also uses this technique.

It is RouteParamater
let user have name and id
For example you have list of names of users in one page and when you click
a user it takes to another page which shows users detail.So to let the detail page know about the clicked user you must send some identification maybe in this case userid.
Example
{{user.name}}
And access it via routparams
//Inject routeparams
var userId = routeparams.userId //user Id is defined in your route configuration

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

Changing routes doesn't refresh data, gives ng:areq error

In my AngularJS app, I have a route that looks like:
.when('/:project/:page', {
templateUrl: '/ui-editor/editor',
controller: 'EditorCtrl'
})
In a view, I have a link that looks like:
Next page
When I click that link in my app, the URL in the browser changes correctly (e.g. /myproject/1 to /myproject/2), but I get an error Error: [ng:areq] Argument 'scope' is required. The line that the error refers to is the console.log statement in:
socket.on('ws:init-data', function(data) {
console.log('on ws:init-data', data);
// Handle incoming data from server
//...
});
If I refresh my browser, the correct data loads as it should for /myproject/2.

use ng-href is better. It can avoid link be clicked before angular parse.
<a ng-href="/{{currentProjectId}}/{{currentPageId + 1}}">Next page</a>
I don't know the exact cause about this error, but I have a suggestion:
use $location to change your url.
you can see on the dev_guide:
When should I use $location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.
http://docs.angularjs.org/guide/dev_guide.services.$location

Prevent route interpretation when adding parameters to URL

In my AngularJS application I have the following routing mechanism:
$routeProvider.when('/questions',
route.resolve('questions',
'questions/',
'questions',
'overview',
access.authorizedAccess))
This works correctly, hitting a URL like domain.com/app/#/questions loading the correct controller and template.
What I want to do is have the option to add parameters to the current URL without triggering a page reload (basically reinterpreting the URL). The problem that I have now is that by doing window.location.hash = '#/questions?query=test'; the route is reinterpreted causing a page reload.
What I have tried to do was this:
$rootScope.$on("$locationChangeStart", function (event, next, current) {
if (next.indexOf('?') > -1)
event.preventDefault();
});
This indeed does not trigger a route reinterpretation, but it removes the parameter from my hash, turning it back into '/questions'.

Can your try the option reloadOnSearch:false during intitializing the routes in $routeProvider. See the documentation here