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);
....
});
Related
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
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
I am creating an Angular.JS page inside of an ASP.NET MVC5 C# application, and I would like to remove the # and trailing path from the URL on a new page load or browser page refresh.
For example: www.example.com/calculator#/step2 I would like it to go back to simply www.example.com/calculator on a page refresh.
The idea is that I need it to start them back at the beginning of the calculator form on a new page load or a browser page refresh. The reason being is that the form I created does not persist the data between page refreshes, so they would need to refill in the data from the beginning.
Whenever the page is reloaded, it does call my ASP.NET calculator controller, so my idea is that the server could reset the URL path?
Inside of my ASP.NET calculator controller, I've got:
public class CalculatorController : Controller
{
// GET: Calculator
public ActionResult Index()
{
// check for # sign and remove it and trailing path from URL.
// or simply make the path "/calculator" every time.
return View();
}
}
Is there an easy way to do this? I am new to Angular.JS so if there is an Angular.JS solution to this problem I would love to hear that as well.
Using the advice of the helpful comments posted, I've written a solution to my question. Like davcs86 said, the string after the hash can only be handled client-side.
Using Angular.JS and resolve like charlietfl suggested, this is what I came up with:
var myApp = angular.module("app-calculator", ["calculatorControls", "ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/", {
controller: "termsController",
controllerAs: "vm",
templateUrl: "/content/templates/termsView.html"
});
$routeProvider.when("/condition", {
controller: "conditionController",
controllerAs: "vm",
templateUrl: "/content/templates/conditionView.html",
resolve: {
validate: function ($location, Data) {
if (!Data.terms) {
$location.path('/');
}
}
}
});
$routeProvider.otherwise({ redirectTo: "/" });
});
Basically, I use the resolve: { validate: ... } section to check if my Data.terms field has been completed. If the value has not been set (in the case of a browser page refresh which resets the data), then it will send redirect back to the root page using $location.path('/');. Otherwise if the Data.terms has been set, then it will load the page requested.
I also solved this issue by jquery.My link was [http://localhost:53209/HarcamaIslemleri?toastMesaj=true] and I want to do it as
[http://localhost:53209/HarcamaIslemleri?toastMesaj=false] when I refresh the page.
in jquery I wrote this code block and it worked for me, I hope this answer will be useful
$(document).ready(function () {
const queryString = window.location.search;
if (queryString) {
const urlParams = new URLSearchParams(queryString);
const stepValue = urlParams.get('toastMesaj');
if (stepValue == "true") {
toastr.warning('Successfully Added!');
window.history.replaceState(null, null, '?toastMesaj=' + false);
}
}
});
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 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