angularjsHow do I use the templateUrl property in an AngularJS application?

The templateUrl property is used in an AngularJS application to specify the URL of an HTML template that will be used to render a view. The template is typically loaded asynchronously and is then compiled by the AngularJS framework.

Example code

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function($scope) {
    $scope.templateUrl = 'mytemplate.html';
});

The templateUrl property is typically used in combination with the $routeProvider service in AngularJS to specify the template for a particular route. The following example shows how to use the $routeProvider service to specify the template for the root route:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'mytemplate.html',
            controller  : 'MyController'
        });
});

In the example above, the templateUrl property is used to specify the URL of the template that will be used to render the view for the root route. The controller property is used to specify the controller that will be used to handle the route.

Code explanation

• templateUrl property: specifies the URL of the HTML template that will be used to render a view
• $routeProvider service: used in combination with the templateUrl property to specify the template for a particular route
• when() method: used to specify the template for the root route
• templateUrl property: used to specify the URL of the template that will be used to render the view for the root route
• controller property: used to specify the controller that will be used to handle the route

Helpful links

• AngularJS Documentation - $route
• AngularJS Documentation - $routeProvider

Edit this code on GitHub