javascript - ngRoute fungerar inte medan inga fel rapporteras till konsolen

Jag är ganska ny på AngularJS och jag byggde en enkel app som har följande sidor.

1) index.html

2) View1.html

3) View2.html

Problemet jag står inför är när jag routar appen till View1 och View2. Ingen utskrift visas i webbläsaren. Efter lite forskning insåg jag att från och med Angular version 1.2 behöver en separat "angular-route.js"-fil inkluderas, vilket jag gjorde men det hjälpte inte. Kan du vänligen titta på detta och ge en lösning.

PS: Jag är ny på Angular så var snäll och ha överseende om jag har gjort några små misstag.

Här är min kod.

index.html

<html data-ng-app="demoApp">
<head>
    <title>Using AngularJS Directives and Data Binding</title>
    <meta charset="UTF-8">
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
</head>

<body>
    <div>
        <!--Placeholder for Views-->
        <div data-ng-view=""></div>
    </div>
    <script>
        var demoApp = angular.module('demoApp',['ngRoute']);

        demoApp.config(function($routeProvider){

        //demoApp.config(['$routeProvider',function($routeProvider){

                    $routeProvider
                    .when('/view1',{
                           controller: 'SimpleController',
                           templateurl: 'Partials/View1.html'
                     })

                     .when('/view2',{
                           controller: 'SimpleController',
                           templateurl: 'Partials/View1.html'
                     })

                     .otherwise({ redirectTo: '/view1'});
        });

        demoApp.controller('SimpleController', function ($scope) {
            $scope.customers = [ 
                 {name:'John Smith', city:'Phoenix'},
                 {name:'John Doe', city:'New York'},
                 {name:'Jane Doe', city:'San Fancisco'}
            ];

            $scope.addCustomer = function() {
              $scope.customers.push(
                      {
                          name: $scope.newCustomer.name,
                          city: $scope.newCustomer.city
                      });
                 }; 
            });

       </script>
</body>

View1.html

<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
    <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:city "> {{cust.name | uppercase}} - {{cust.city | lowercase }}</li>
</ul>

<br /> 
Customer Name:<br /> 
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br /><br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br /><br />
<a href="#/view2">View 2</a>

View2.html

<div class="container">
<h2>View 1</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
    <li data-ng-repeat="cust in customers | filter:city | orderBy:name "> {{cust.name | uppercase}} - {{cust.city | lowercase }}</li>
</ul>

Svar #1

Stavfelet:

templateurl: 'Partials/View1.html'

borde vara

templateUrl: 'Partials/View1.html'

Angular kommer inte att ladda något eftersom ingen mall har tillhandahållits.

Svar #2

Vänligen ta bort ng-app från html-taggen och lägg till det i body-taggen.