In my Angular app, I have routes like /items/:id
$routeProvider
.when('/items/:id', {
templateUrl: 'views/items.html',
controller: 'ItemCtrl'
})
In ItemCtrl I get :id with $routeParams.parcId The problem is it's a string while the value is a number and all my id are numbers.
So how to force the correct type and not having string by default?
ps: I don't want to do var id = Number($routeParams.parcId) in all my controllers
I did it using the $routeChangeStart event.
In your app.js file, add the following line to the .run function as :-
angular.module('test1App').run(function ($rootScope) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (next.params.hasOwnProperty('id')) {
next.params.id = Number(next.params.id);
}
});
});
Description: On every change of route, it checks if there is a parameter named 'id'. If yes then it changes it to a number.
Hope it helped.
You need to use resolve in routes and update the variable. Then use this resolved variable in controller
Example
did you try like this?
parseInt($routeParams.parcId)
Related
I have an app which creates several surveys with random survey ids. As the ids are generated in the backend they are set in the controller. I read the documentation on that, however I do not really understand how to set the routeparams in order to always reach the page /survey/:surveryID.
Here is my code so far:
App Config:
...
.when('/survey/:surveyId', {
templateUrl: 'views/survey.html',
controller: 'SurveyCtrl',
controllerAs: 'survey'
})
Controller:
function SurveyCtrl($scope, RequestService, _, $location, $routeParams) {
$scope.go = function () {
$location.path('/#/survey/' + Math.random());
};
}
View with the link to /survey/:surveyId:
<div>
<md-button ng-click="go()">Enter Survey</md-button>
</div>
I know that this is not the right way and it is not even working. Can someone tell me how to dynamically create these params and set them in the controller so I can access the link with a button and then when clicked reach the survey/:surveyId page?
To get your work done,
$location.path('/survey/' + Math.random());
You can use search method to pass params as well,
$location.path('/myURL/').search({param: 'value'});
$location methods are chainable.
this produce :
/myURL/?param=value
You could also use the updateParams method for that:
$route.updateParams({'surveryID': Math.random()});
And access the data using $routeParams.surveryID
I was using ui-sref for this. It worked fine but I can't use it in this situation because I'm using a ng-repeat and I don't want it to be executed on every item. So I decided to make a function, which contains a simply $state.go() with a param.
defining:
.config(
["$stateProvider", // more dependencies
($stateProvider: angular.ui.IStateProvider) => {
$stateProvider
.state("app.projectstart.project", {
url: "project/:parentId",
templateUrl: "gui/projectstart/project/project.html",
controller: "ProjectstartProjectController"
});
}
]);
calling:
this.modelFactory.$state.go("app.projectstart.project", {parentId: item.parentId});
I want the url to be like
"http://localhost:9000/#/app/projectstart/project/10000?functionId=clockin"
But the only thing I get is
"http://localhost:9000/#/app/projectstart/project/?functionId=clockin"
Why is it not passing the parentId to the url? I defined it in .config.
Thanks in advance.
greetings johnny
Edit:
I'm sure that 'item.parentId' has a Value. It's either '10000' or '20000'. I assigned parentId with '10000', It's still the same.
I have a main page with a nav, and each nav option takes you to another route. It all looks like a single page app, but each "page" has it's own route and controller.
My problem is that I want to put a search box in the navbar. When someone uses the searchbox, I want to take the user to the "search" route and then display the results. I'm having a lot of trouble figuring out these two issues:
Where do I store this "searchbox" logic? E.g. when someone searches, they choose the type of search from a dropdown, then the search query in the inputbox. I have special logic to automatically choose which dropdown value based on the value typed in the inputbox.
How do I redirect to the
"search" route and display the results based on the input from the
previous page?
It's probably clear I'm a newby to Angular. I'm happy to work out the details, but I'm mainly looking to understand how to structure the solution to this problem. Thanks in advance for your help.
What I love about Angular the most is the amount of options you can apply.
Your goal can be reached either by using a service. A service is a singleton class which you can request from controllers. Being a singleton what ever value you store in the service is available to all controllers. You can than either $watch for value change, use $broadcast to notify data change or use $routeParams to send data with route change.
A service is built as follows :
The following assume you have a global module var named 'app'
app.service('myService', function(){
var myValue;
this.getMyValue = function(){
return myValue;
};
this.setMyValue = function(value){
myValue = value;
};
});
Then you request a service from a controller like you request an angular service such as $scope.
app.controller('myController', ['$scope', 'myServce', function($scope, myService){
$scope.myValue = myService.getMyValue();
//Example watch
$scope.$watch('myValue',function(){
//Search criteria changed!!
}, true);
}]);
Angular is terrific..have fun coding
Basically you would want an own state for your search page, so this is where we begin (I expect you to use the ui-router and not Angulars built in router):
.state('search', {
url: "/search",
templateUrl: "pages/search.html",
controller: 'SearchController as ctrl',
params: { searchString: {} }
})
As you can see, I've defined an additional parameter for the search string that is not part of the URL. Of course, if you like, you could change that and move the parameter to the URL instead:
.state('search', {
url: "/search/:searchString",
templateUrl: "pages/search.html",
controller: 'SearchController as ctrl'
})
The actual search input is pretty straight forward as well, because it's only HTML:
<input type="text" ng-model="searchString" on-key-enter="ctrl.goSearch(searchString)">
The function for the state change has to be placed in the controller for the primary template (e.g. the controller of your navigation bar if the search is located there):
var vm = this;
vm.goSearch = goSearch;
function goSearch(searchString) {
$state.go('main.search', { searchString: searchString });
}
Of interest is also the on-key-enter directive that I've added:
angular.module('your.module')
.directive('onKeyEnter', OnKeyEnter);
function OnKeyEnter() {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.onKeyEnter);
});
event.preventDefault();
}
});
};
}
On pressing the enter-key, it will call the function you supply as attribute value. Of course you could also use a button with ng-click instead of this directive, but I think it simply looks better.
Last, but not least, you need a Search Controller and a HTML template for your search page, which I won't give to you, as it is up to you what you display here. For the controller, you only need to know how you can access the search string:
angular.module('your.module')
.controller('SearchController', SearchController);
SearchController.$inject = ['$scope', '$stateParams'];
function SearchController($scope, $stateParams) {
$scope.searchString = $stateParams.searchString;
/* DO THE SEARCH LOGIC, e.g. database lookup */
}
Hope this helps to find the proper way. :)
Given the following code:
$routeProvider.when('/movies/:type', {
title: 'Movies',
templateUrl: 'pages/movies/movies.html',
controller: 'MoviesCtrl'
});
How can I access the :type param from inside the when function? I want to do something like so:
$routeProvider.when('/movies/:type', {
title: 'Movies' + ' - ' + :type,
templateUrl: 'pages/movies/movies.html',
controller: 'MoviesCtrl'
});
That value in title must be dinamically generated.
Thanks in adv.
I'm not sure why you are extending the route (config) object, but you are able to access routeParams from within your controller. That is also the recommended way.
The $routeParams service allows you to retrieve the current set of route parameters.
angular.module('MyModule').controller('MoviesCtrl',function($scope, $routeParams) {
$scope.currentMovieType = 'Filmes-' + $routeParams.type;
});
Let's say your route is something like that /movies/scifi. In this case $scope.currentMovieType becomes scifi and you can use {{currentMovieType}} in your view to populate this value. You can find detailed informations in the documentation.
Note that the $routeParams are only updated after a route change completes successfully. This means that you cannot rely on $routeParams being correct in route resolve functions. Instead you can use $route.current.params to access the new route's parameters.
It is not really possible, because the route config object is not as dynamic as you think. Whatever you put in the route configuration object, it cannot depend on the value that the route param is going to take in the future. Think of how this code gets executed : the configuration object will be evaluated only once, when the route is configured.
On the other hand, if you want to change the page's title when going through this route, you can do it using the $routeParamsservice to access the param value, and the $document service to change the page's title, either in a controller or in a resolveclause.
An example with the latter option:
$routeProvider.when('/movies/:type', angular.extend({
templateUrl: 'pages/movies/movies.html',
controller: 'MoviesCtrl',
resolve: {
title: ['$routeParams','$document', function ($routeParams, $document) {
var title = 'Filmes-' + $routeParams.type;
$document.title = title;
return title;
}]
}
}, routeParams));
That works also in a controller of course.
Some notes on your code :
I'm not even sure that there is a point setting a title property in a route config object, I don't see it in the documentation at least.
That second argument routeParams in that angular.extend call - the name is confusing, one could mistake it for the $routeParams service. I think you should call it routeDefaults or something like that instead.
Give a try to $location.absUrl(); requires some calculation too .
https://docs.angularjs.org/api/ng/service/$location
Is it possible to get everything from the left of a "/" in a templateURL string from angular routing.
For example:
var app = angular.module('demoApp', ['ngResource', 'ngRoute'], function ($routeProvider){
$routeProvider
.when('/',{templateUrl: 'directoryName/pageName.html', controller: 'mainCtrl'});
});
Using templateURL property "directoryName/pageName.html" I would like to get "directoryName"
How can I achieve this?
Use regex!
var regex = /([^\/]*)\//;
var stripped = regex.exec('#some/string/with/stuff')[1];
This gives you back '#some'
EDIT
As far as getting this in your code, you can use the $routeChangeSuccess event on $rootScope to get the route out and use that string somewhere else
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
// Use what #Dalorzo suggests
var pathName = current.$$route.templateUrl.split('/')[0];
// Do something with pathName ...
});
You can use the current object of the $route service inside your controller to get the current route object. This way, to access the templateUrl property you just need to use : $route.current.templateUrl.
Now that you have this string, you can use split('/') on it to get a array of tokens inside the URL that are separated by a /.
Finally, to use it in your template, you just need to inject this value inside your $scope.