ng-view not working as expected

Ok, I was trying to create a simple plunkr for a question related to loading times in SPAs with ng-view and it seems I can´t even manage to create a valid scenario.

What I want is a SPA with a ng-view and 2 templates, so every template displays some basic data and can navigate to the other template.

Here is the plunkr and this is the code of the spa

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app">
      <div ng-view=""></div>
    </div>
  </body>

</html>

and here is the js

angular

.module('app', ['ngRoute'])

.controller('ScreenController', ScreenController)

.config(['$routeProvider', routeProvider])

ScreenController.$inject = [ '$scope' ];

// initial navigation
function routeProvider($routeProvider) {

  $routeProvider.
  when('/screen1.html', {
    templateUrl: './screen1.html',
    controller: ScreenController
  }).
  when('/screen2.html', {
    templateUrl: './screen2.html',
    controller: ScreenController
  }).
  otherwise({
    url: '/screen1.html',
    templateUrl: './screen1.html',
    controller: ScreenController
  });
}

function ScreenController($scope) {

  $scope.data1 = [];
  $scope.data2 = [];

  $scope.ready = false;

  $scope.numElements = function(scr) {
    var length = scr === '1' ? $scope.data1.length : $scope.data2.length;
    return 'Data has ' + length + ' elements';
  }

  function init() {
    console.info('ScreenController.init');

    $scope.data1 = [
    { a:'a1', b: 'b1' },
    { a:'a2', b: 'b2' },
    { a:'a3', b: 'b3' },
    { a:'a4', b: 'b4' },
    { a:'a5', b: 'b5' },
    { a:'a6', b: 'b6' },
    { a:'a7', b: 'b7' },
    { a:'a8', b: 'b8' }
    ];

    $scope.data2 = [
    { a:'a1', b: 'b1', c:'c1', d:'d1' },
    { a:'a2', b: 'b2', c:'c2', d:'d2' },
    { a:'a3', b: 'b3', c:'c3', d:'d3' },
    { a:'a4', b: 'b4', c:'c4', d:'d4' }
    ];

    console.info('data1: ' + JSON.stringify($scope.data1));
    console.info('data2: ' + JSON.stringify($scope.data2));
    $scope.ready = true;
  }

  init();
}

This is not working as I expected.

The first time it loads, the page seems to be working fine as it shows template screen1.html and the data. But once I start clicking the links it doesn´t work anymore, the Controller is not accessed and data is not displayed. Any ideas why?

Many thanks!

Solution

You need <a href="#/screen1.html" class="button">To Screen 1</a> Notice the #/. This does not include your other mistakes in your code, like mentioned by others.