Angular.js dynamic template with different url

Question

I am trying to build a page with a static header and footer layout, but using ng-view or ng-include to change my container template based on the URL. I've tried two methods:

Using $routeProvider:

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        template: 'views/home.html',
        controller: 'Ctrl',
    });
    $routeProvider.when('/contact-us', {
        template: 'views/contact.html',
        controller: 'Ctrl',
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

or a controller function to return a template URL:

app.controller('locationCtrl', function ($scope, $location, $routeParams) {
    $scope.templateUrl = function() {
        return "/views/home.html";

    }
});

However, with either one I get am unable to get a contact-us error message.

so I have a www.domain.com and this will loads my home.html. and www.domain.com/contact-us will loads my contact.html — vic
– vic, Commented Sep 18, 2013 at 19:51

Murat Çorlu · Accepted Answer · 2013-09-18 19:56:14Z

2

routerProvider runs before all of controllers. So you can't simply change templateUrls dynamically. But you can use ng-include conditionally:

<div ng-controller="SubPageCtrl>
    <ng-include src="templateUrl"></ng-include>
</div>
<script>
function SubPageCtrl($scope) {
    if ( something ) {
         $scope.templateUrl = '/some.html';
    } else {
         $scope.templateUrl = '/other.html';
    }
}
</script>

answered Sep 18, 2013 at 19:56

Murat Çorlu

8,6135 gold badges57 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitish Kumar · Accepted Answer · 2013-09-18 20:02:27Z

1

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
    template: 'views/home.html',
    controller: 'Ctrl',
});
$routeProvider.when('/contact-us', {
    template: 'views/contact.html',
    controller: 'Ctrl', // Controller should be different
});
$routeProvider.otherwise({
    redirectTo: '/'
});
}]);

Replace To :

 app.config(['$routeProvider', function ($routeProvider) 
$routeProvider.when('/', {
    templateUrl: 'views/home.html', //template should be templateUrl
    controller: 'Ctrl',
});
$routeProvider.when('/contact-us', {
    templateUrl: 'views/contact.html', //template should be templateUrl
    controller: 'Ctrl',
});
$routeProvider.otherwise({
    redirectTo: '/'
});
}]);

Your 1st method will work.

edited Sep 18, 2013 at 20:02

answered Sep 18, 2013 at 19:55

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

7 Comments

vic Over a year ago

Thanks It works on home.html but when in contact-us, seems it keep reloading the page.

Fourth Over a year ago

I'd recommend not recycling controllers for fundamentally separate routes. You wouldn't do this with MVC so it's not advisable with Angular despite being possible.

vic Over a year ago

yeah I did, but it just keep reloading. Sorry I have no idea why its happening.

Nitish Kumar Over a year ago

$routeProvider.when('/contact-us', { templateUrl: 'views/contact.html', }); Here include Controller jsfiddle.net/NYgUT/3

vic Over a year ago

Yeah I've tried that, but still the index page keep rendering ( reloading? )

|

Murat Çorlu · Accepted Answer · 2013-09-18 19:59:59Z

0

You should define your routes from more specific urls to more general urls. Because routes match with urls that start with your definition.

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/contact-us', {
        template: 'views/contact.html',
        controller: 'Ctrl',
    });
    $routeProvider.when('/', {
        template: 'views/home.html',
        controller: 'Ctrl',
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });

}]);

answered Sep 18, 2013 at 19:59

Murat Çorlu

8,6135 gold badges57 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular.js dynamic template with different url

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related