Why doesn't the code using Angular work?

S

Sergey Pavlov2014-09-28 19:19:24

JavaScript

Sergey Pavlov, 2014-09-28 19:19:24

I'm trying to get into the idea of Angular and for learning I took the book "AngularJS in 60 Minutes" by Dan Wolin. Stuck at the moment when he writes config. Here is the code:
index.html

<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
  <meta charset="UTF-8">
  <title>Angular.js</title>
</head>
<body>

  <div>
    <div ng-view></div>
  </div>

  <script type="text/javascript" src="angular.min.js"></script>
  
  <script>
    var demoApp=angular.module('demoApp',[]);

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

    demoApp.controller('SimpleController', function ($scope){
      $scope.customers=[
        {name:'Sam',city:'Moscow'},
        {name:'Dan',city:'Dubna'},
        {name:'Alex',city:'Dmitrov'}
      ];

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

  
</body>
</html>

View1.html

<div class="container">
  <h2>View 1</h2>
  Name
  <br/>
  <input type="text" data-ng-model="filter.name"/>
  <br/>
  <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>
  <br/>
  <a href="#/view2">View 2</a>
</div>

View2.html

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

The result should look like this , but for me it displays a completely blank screen. Please tell me where the error is in the code or, if you worked on this book, share your code snippet. Thank you.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

C

cdmax2002, 2014-09-28
@Pavlov_dog

Forgot to connect angular route

S

Sergey, 2014-09-28
Protko @Fesor

I can only recommend throwing this book away and wasting more than 60 minutes. Well, yes, look at the console sometimes, angular usually throws errors if something went wrong.