AngularJS ng-view not showing routed pages

The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network. The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.

When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder

**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?

Header Scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>

HTML

  <div class="row">
    <a href="#">Main Content</a>  
    <a href="#/second">Second Content</a>  
  </div>

    <div class="row">
      <div class="col-md-12">
        <div ng-view></div>
      </div>
    </div>

    <hr>

  </div>

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateURL: 'pages/main.html',
        controller: 'mainController'
    })  
    .when('/second', {
        templateURL: 'pages/second.html',
        controller: 'secondController'
    })
});

myApp.controller('mainController', ['$scope', function($scope) {



}]);

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {



}]);

Solution

Use templateUrl instead of templateURL.

In your html use #/main.

Don't use tow ng-views

JS code

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
    $routeProvider
    .when('/main', {
        templateUrl: 'main.html',
        controller: 'mainController'
    })  
    .when('/second', {
        templateUrl: 'second.html',
        controller: 'secondController'
    })
});

myApp.controller('mainController', ['$scope', function($scope) {
  $scope.name = "world"

}]);

myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {


}]);

HTML code

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>

    <script src="app.js"></script>
  </head>

  <body ng-controller="mainController">
    <p>Hello {{name}}!</p>

    <div class="row">
    <a href="#/main">Main Content</a>  
    <a href="#/second">Second Content</a>  
  </div>

    <div class="row">
      <div class="col-md-12">
        <div ng-view></div>
      </div>
    </div>

    <hr>

  </body>

</html>

Here is working plunker

EDIT

Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')

So you need to add this in your config phase.

myApp.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

now it will work with angular 1.6.1 as well