Learn
Routing
Routing I

So far we’ve made AngularJS apps that display data in a single view index.html.

But what happens when the app grows and needs to display more information? Stuffing more code to a single view will quickly make things messy.

A better solution is to use multiple templates that display different pieces of data based on the URL that the user is visiting. We can do this with Angular’s application routes.

Instructions

1.

In index.html under the .header section, type in the code exactly as you see here:

<div ng-view></div>
2.

View the AngularJS app in the browser by typing http://localhost:8000/.

3.

In app.js under the angular.module, type in this code:

app.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'HomeController', templateUrl: 'views/home.html' }) .otherwise({ redirectTo: '/' }); });
Folder Icon

Take this course for free

Already have an account?