<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="routes.js"></script>
</head>
<body>
<a href="#/">Main</a> |
<a href="#/carriers">Carriers</a>
<div class="mainContainer" ng-view></div>
</body>
</html>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('MainCtrl', function($scope) {
});
/* Styles go here */
.mainContainer{
background-color:#ccc;
margin:10px 0px;
padding:5px;
border-radius:5px;
}
This is main page
This is carriers page
myApp.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.when('/carriers', {
templateUrl: 'carriers.html',
controller: 'MainCtrl'
})
.otherwise({redirectTo: '/'});
});