I want to have on the URL of my application like this:
http://localhost:9000/#/?id=XYZ
I don't found how to configure this on angularjs app module
My implementation is like that:
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
but It doesn't work.
You do not have to specify
it will be like
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
and in your SingCtrl.
when you write $routeParam than you will have objects of params which are passed as a query parameter.
so you will get $routePara.id if you pass like ?id=anything
Do not have to worry if you want to catch the query param like ?id=abs&name=test
You can add a "url" attribute to your $routeProvider object.
Something like:
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
url: 'the Url you want to use',
controller: "SignCtrl"
});
PS.: I suggest you to use ui-router instead of ngRoute. Check it out later.
Related
I'm working on a little Angular example project, using something like this
angular.module('myApp', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1',
controller: 'Ctrl1'
})
.when('/view1', {
templateUrl: 'view2',
controller: 'Ctrl2'
})
.otherwise({ redirectTo: '/view1'});
});
Now I would like to add a button sending a simple GET "/setDatabaseFlag". No template loading, no new controller. I realized that every call to localhost (my base url for the test) runs through the routeProvider. So I tried to find something like
.when('/setDatabaseFlag', {
$http.get('/setDatabaseFlag');
})
I found an example using
.when('/setDatabaseFlag', {
action: doSomething
})
but $http is not available here. Also "action" seems undocumented.
I guess there must be another approach. Thanks for any hint!
I am not sure what is going on here.
angular.module('myApp', [
'ngRoute',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/homepage',
controller: 'MyCtrl1'
}).
when('/about/:id', {
templateUrl: '/partials/'+$routeParams.id,
controller: 'MyCtrl1'
}).
when('/funnel', {
templateUrl: '/partials/funnel',
controller: 'MyCtrl2'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
No matter if I browse to / or /about/:id I get $routeParams is undefined.
You need to inject $routeParams service to use it. However in your case looks like you want to dynamically determine the template based on the routeparam. You cannot directly do it in the config phase of the app, which runs only once as a part of app initialization stage (and also you can inject $routeParams in the config phase of the app since there is no such provider). You you may want to look for a way to retrieve dynamic template and in order to support this angular provides this facility to use function as templateUrl to be able to dynamically determine the template url based on any routeparameters (which will be argument in the function).
You can do it this way:-
when('/about/:id', {
templateUrl: function(routeParam){ //register it as function
return '/partials/' + routeParam.id; //Get the id from the argument
},
controller: 'MyCtrl1'
}).
Right from documentation.
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
{Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
It's because of this line:
templateUrl: '/partials/'+$routeParams.id,
You're using $routeParams without every declaring or injecting it. If you add it to the params your function accepts, your page should stop throwing that error:
config(function ($routeProvider, $routeParams, $locationProvider) {
// ...
}
I'd like to know if it's possible to dynamically construct the templateUrl string used in the routeProvider, with access to the route variables. I want to something like the following, which does not work obviously but should give you an idea of what I wish I could do:
.config(function ($routeProvider) {
$routeProvider
.when('/:pathFrag', {
templateUrl: getTemplateUrl( pathFrag ), // some callable with access to pathFrag
controller: 'MainCtrl'
})
thanks!
Check the page of $routeProvider
and from the docs...
templateUrl – {string=|function()=} – path or function that returns a
path to an html template that should be used by ngView.
.config(function ($routeProvider) {
$routeProvider
.when('/:pathFrag', {
templateUrl: function(pathFrag){
//write your code...
return tempUrl; //return the required path for file
},
controller: 'MainCtrl'
})
Is there a way to build an URL based on the defined Angular routes? Something like Symfony does (http://symfony.com/doc/current/book/routing.html#generating-urls).
Here is an example of how it would be used:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/document/:documentId', {
name: 'document',
templateUrl: 'partials/document.html',
controller: 'documentController'
});
}]);
Then in templates we could use something like:
View document
That would be compiled into:
View document
I have user $stateParams (from angular-ui-router) for this.
.controller('MainCtrl', function ($scope, $stateParams) {
$scope.link = $stateParams.documentId;
});
UI Router wiki on Github
Say I have an app defined as such:
angular.module('myApp', ['myControllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'myTemplate.html',
controller: 'MyController'
//???
})]);
How can I say, set $scope.myVariable via this route definition? I want to use this for breadcrumbs.
I think a better way to do what you are doing is to use route parameters. See
https://docs.angularjs.org/api/ngRoute/service/$routeParams
You can make your route something like
/Chapter/:chapterId
and in your controller, inject $routeParams and access the value like so:
$routeParams.chapterId
Turns out you can use the resolve property in the .when method like so:
.when('/', {
templateUrl: 'myTemplate.html',
controller: 'MyController',
resolve: {
test: function() {return "test";}
}
});
Then in my controller I don't access it via the $scope but I inject it like so:
.controller('MyController', ['$scope', 'test', function($scope, test) {
//test contains "test"
}]);