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
Related
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
This is my routing code:
.when('/:mod/:page*/', {
templateUrl: function($routeParams) {
return 'pages/'+$routeParams.mod+'/' + $routeParams.page + '.html';
}
})
if the url is
/users/add
it will load html from pages/users/add.html
Now the issue is Say for example I have a list page list.html with list data
id - name - action
1 - John - Edit
When I now click on edit I need to go to the edit.html page as well as I need to pass and get the id to that html.
How can this be achievable ?
Do I need to edit my routing ?
NOTE:
I am using ng-route for routing.
assume edit.html has a separate controller and the list.html has a separate controller.
Let me know if you need more info.
You can pass id in the edit link
...
Edit
$routeProvider
.when('/edit/:id', {
templateUrl: 'edit.html',
controller: 'EditController',
....
app.controller('EditController', function($routeParams) {
console.log($routeParams.id);
....
});
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'
})
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.
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' }