var App = angular.module('routingDemoApp',['ngRoute']);
App.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/business',{
templateUrl: "business.html"
})
.when('/portfolio',{
templateUrl:'portfolio.html'
})
.when('/about',{
template:'Single message from "template" configuration object'
})
.otherwise({redirectTo:'/business'});
}]);
<!DOCTYPE html>
<html ng-app="routingDemoApp">
<head>
<meta charset="utf-8" />
<title>AngularJS ngRoute Demo App http://websystique.com/angularjs/angularjs-routing-tutorial-using-ngroute/</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<h2>AngularJS ngRoute Application - routeProvider</h2>
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li>
<a href="#/business">Business</a>
</li>
<li>
<a href="#/portfolio">Portfolio</a>
</li>
<li>
<a href="#/about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="span12">
<div class="well" ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
<html>
<body>
<h1>Business page</h1>
<hr />
<ul>
<li>
<a href="#/portfolio">Show Portfolio</a>
</li>
<li>
<a href="#/about">Show About</a>
</li>
</ul>
</body>
UPS!<br>
With the ngRoute module, marking which section of the page AngularJS should
change when the route changes, is done using the ng-view directive in the HTML.
<br/>Please note that with ngRoute, there can be <b>only one ng-view</b> per application.
If your application demands more, you should prefer ui-router over ngRoute!
</html>
<h1>Portfolio Page</h1>
<hr/>
<strong>This page shows multiple named panels in action.</strong><br>
<br>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">panel 1</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">panel 2</div>
</div>
</div>
UPS!<br/>
With the ngRoute module, marking which section of the page AngularJS should
change when the route changes, is done using the ng-view directive in the HTML.
<br/>Please note that with ngRoute, there can be <b>only one ng-view</b> per application.
If your application demands more, you should prefer ui-router over ngRoute!