<!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: '/'});

});