具有不同网址的Angular.js动态模板

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.

Answer 1

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>

Answer 2

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.

Answer 3

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: '/'
    });

}]);