Curriculum

Course: AngularJS

Login

Curriculum

AngularJS

AngularJS Tutorial

0/65

Text lesson

Template

In the previous examples, we used the templateUrl property in the $routeProvider.when method.

Alternatively, you can use the template property, which enables you to write HTML directly within the property value instead of referencing an external page.

Example:

Create templates:

var app = angular.module(“myApp”, [“ngRoute”]);
app.config(function($routeProvider) {
$routeProvider
.when(“/”, {
    template : “<h1>Main</h1><p>Click on the links to change this content</p>”
})
  .when(“/banana”, {
    template : “<h1>Banana</h1><p>Bananas contain around 75% water.</p>”
})
  .when(“/tomato”, {
    template : “<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>”
});
});

The otherwise method

In the previous examples we have used the when method of the $routeProvider.

You can also use the otherwise method, which is the default route when none of the others get a match.

Example:

If neither the “Banana” nor the “Tomato” link has been clicked, inform the user.

var app = angular.module(“myApp”, [“ngRoute”]);
app.config(function($routeProvider) {
$routeProvider
  .when(“/banana”, {
    template : “<h1>Banana</h1><p>Bananas contain around 75% water.</p>”
})
.when(“/tomato”, {
    template : “<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>”
  })
  .otherwise({
    template : “<h1>None</h1><p>Nothing has been selected</p>”
});
});