Ash Ash - 2 months ago 10
AngularJS Question

Empty view in AngularJS

I'm trying to learn/refresh my AngularJS knowledge, by following this tutorial.

I'm now trying to complete the section on views and routing. However when I load the main.html page, no view is displayed. All I see is:

Before view! After view!


The chrome dev console is also completely empty (no errors/warnings etc).

So what am I missing?

I'm running it through an 'express' node.js server locally on my Win7 64bit pc. I'm accessing the page in the browser using http://localhost:9000/main.html

I downloaded the 1.5.8 versions of angular.js and angular-route.min.js and placed them in the same directory as main.html.

Trying: http://localhost:9000/view1.html displays the content of the view successfully.

This is the main.html:

<!DOCTYPE html>
<html ng-app="demoApp">
<body>

Before view!

<div ng-view></div>

After view!

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

<script>
var demoApp=angular.module('demoApp',['ngRoute']);

demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateURL: '/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateURL: '/view2.html'
})
.otherwise({ redirectTo: '/view1' });

});

var controllers= {};

controllers.SimpleController= function($scope) {
$scope.customers=[
{name:'John Smith', city: 'New York'},
{name: 'Bob Jones', city: 'London'},
{name:'David Peters', city: 'Sydney'}
];
$scope.addCustomer=function() {
$scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
};

demoApp.controller(controllers);

</script>

</body>

</html>


Here's view1.html:

<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" />

<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
<br />
Customer Name: <br/>
<input type="text" ng-model="newCustomer.name" />
<br />
Customer City: <br/>
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>

<a href="#/view2">View 2</a>

</div>


view2.html is just a simpler version of view1.html

Answer

Replace the following code:

  demoApp.config(function($routeProvider) {
                    $routeProvider
                        .when('/view1',
                            {
                                controller: 'SimpleController',
                                templateURL: '/view1.html'
                            })
                        .when('/view2',
                            {
                                controller: 'SimpleController',
                                templateURL: '/view2.html'
                            })
                        .otherwise({ redirectTo: '/view1' });       

                });

with the following code:

demoApp.config(function($routeProvider) {
                    $routeProvider
                        .when('/view1',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view1.html'
                            })
                        .when('/view2',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view2.html'
                            })
                        .otherwise({ redirectTo: 'view1' });       

    });

Replaced "templateURL" in your code with "templateUrl" because it is case sensitive.