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'
})
Related
Is it possible to use Angularjs's routing and controller without the templateURL?
For instance, below is my current routes, controllers, and template urls,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/list1",
{
templateUrl: "js/template/2.html",
controller: "controller2"
})
...
And I have ng-view in my html,
<div ng-view></div>
I tested with the routes without templateUrl,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
//templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/view1",
{
//templateUrl: "js/template/2.html",
controller: "controller2"
})
...
the result - nothing is displayed on my screen. obviously the controller cannot be triggered anymore.
use template with empty string.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "",
controller: "controller1"
})
Angular uses the $routeProvider Definition to attach a controller to your view. If you don't want to specify the details in $routeProvider config, other option is to let the application land on one page using something like -
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when()
.otherwise({
redirectTo: '/'
});
});
This way user will land on main.html. Now on the main.html you can include several different html templates like -
<div ng-include src="'js/template/1.html'" ng-controller = 'Controller1'></div>
<div ng-include src="'js/template/2.html'" ng-controller = 'Controller2'></div>
Notice the syntax of using/including template above - "'<<Path>>'"
Hope this helps.
Setting template with empty string make error and cause recursion loading ; i solved it by just add the link of empty html file.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "dummy.htm",
controller: "controller1"
})
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.
Pretty simple thing I'm trying to do. Fairly new to angular.
I just want to set the initial page that loads to be something other than the main that it is set to out of box when I generate an application
In your config (presumably app.js with your scaffold), change the templateUrl to be the template/view that you desire.
eg:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/someOtherTemplate.html',
controller: 'MainCtrl'
})
...
});
If you're using ui-router then it's similar:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/someOtherTemplate.html'
})
});
If you're using the angular router then it'll be something like this:
angular.module('yourMainAppModule').config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "youTemplate.html",
controller: "YourHomeController"
})
});
You can read more about setting up your app's routes by looking at when() in the Angular Docs.
Above methods where not working for me, giving the url field an empty value worked great with ui-router :
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/homepage.html',
controller: 'AppCtrl'
})
I am an amateur with angular. I am using route provider to load separate html pages and controllers. This works fine when I know what pages the site has and I can define them.
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
templateUrl: "../page2.html",
controller: "Page2Ctrl"
})
.when("/page3", {
templateUrl: "../page3.html",
controller: "Page3Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
However, in future, more pages may be added and I want to code a way for angular to take this into accout. Something like;
app.config(function($routeProvider) {
(..figure out n...)
$routeProvider
.when("/page"+n, {
templateUrl: "../page"+n+".html",
controller: "Page"+n+"Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
I cannot figure out how to return a var listing the current page so I can remove '/page' to manipulate the int as n.
I tried console logging $routeProvider but .when simply returns a function. I don't think injecting $scope is wise because obviously a var is passed somewhere using $routeProvider alone.
If you use colon (:) in the route, Angular will parse that and populate the $routeParams with it, then, in your templateUrl, instead of a string, you can use a function which returns the template url. Just inject the $routeParams in the templateUrl's function and build the url you need.
$routeProvider
.when( '/page/:pageNumber', {
templateUrl: function ($routeParams) {
return 'page_' + $routeParams.pageNumber + '.html'
}
})
.otherwise( { redirectTo: '/page/1' } );
Here is a working fiddle.
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) {
// ...
}