I am a new learner of Angular JS. Please help me to find reason why this demo only display : {{cust.name| uppercase}} - {{cust.city| lowercase}} instead of showing each values,

Full code

    <div>
            <!-- Placeholder for views -->
            <div data-ng-view=""></div>
        </div>
        Name: <input type="text" data-ng-model="name"/>   
        <br/>
        <h3>Looping with the help of ng-repeat directive</h3>
        <ul>  
            <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
        </ul>
        <script src=".4.5/angular.min.js"></script>
        <script type="text/javascript">


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

                app.config(function ($routeProvider) {
                    $routeProvider.when('/',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view1.html'
                            })
                            .when('/view2',
                                    {
                                        controller: 'SimpleController',
                                        templateUrl: 'view2.html'
                                    })
                            .otherwise({redirectTo: '/'})
                });
                app.controller('SimpleController', ['$scope', function ($scope) {
                        $scope.customers = [
                            {name: 'Mina', city: 'Bangalore'},
                            {name: 'Tina', city: 'Channai'},
                            {name: 'abrahm', city: 'Mumbai'},
                            {name: 'Zebraman', city: 'Delhi'}
                        ];
                    }]);
        </script>

I am a new learner of Angular JS. Please help me to find reason why this demo only display : {{cust.name| uppercase}} - {{cust.city| lowercase}} instead of showing each values,

Full code

    <div>
            <!-- Placeholder for views -->
            <div data-ng-view=""></div>
        </div>
        Name: <input type="text" data-ng-model="name"/>   
        <br/>
        <h3>Looping with the help of ng-repeat directive</h3>
        <ul>  
            <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
        </ul>
        <script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">


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

                app.config(function ($routeProvider) {
                    $routeProvider.when('/',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view1.html'
                            })
                            .when('/view2',
                                    {
                                        controller: 'SimpleController',
                                        templateUrl: 'view2.html'
                                    })
                            .otherwise({redirectTo: '/'})
                });
                app.controller('SimpleController', ['$scope', function ($scope) {
                        $scope.customers = [
                            {name: 'Mina', city: 'Bangalore'},
                            {name: 'Tina', city: 'Channai'},
                            {name: 'abrahm', city: 'Mumbai'},
                            {name: 'Zebraman', city: 'Delhi'}
                        ];
                    }]);
        </script>

• javascript
• angularjs

7 Answers 7

Try to load 'ngRoute' in your application by adding it as a dependent module:

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

and also don't forget to include angular-route.js in your HTML, after angular.js:

<script src="//code.angularjs/1.3.0-beta.13/angular-route.min.js"></script>

As @csjoshi04 said, you also need to add ng-controller="SimpleController" to the ul tag as follows:

<div>
  <!-- Placeholder for views -->
  <div data-ng-view=""></div>
</div>
Name:
<input type="text" data-ng-model="name" />
<br/>
<h3>Looping with the help of ng-repeat directive</h3>
<ul ng-controller="SimpleController">
  <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
</ul>

You can check the code changes in this JSFiddle. (it throws a single error because there is no view1.html available in this demo, but it should work in your application)

Lets try this one:-

You need to add angular-route.min.js to achieve routing in Angular.js.

An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

To Achieve Routing in Angular.js you need to setup configuration via $routeProvider which is the provider of $routeService which helps to bine controller, view template and url mapping.

first you missed dependency injection ngRoute while create an app and also adding (corresponding Js file) angular-route.min.js

here is your code

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

                app.config(function ($routeProvider) {
                    $routeProvider.when('/',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view1.html'
                            })
                            .when('/view2',
                                    {
                                        controller: 'SimpleController',
                                        templateUrl: 'view2.html'
                                    })
                            .otherwise({redirectTo: '/'})
                });
                app.controller('SimpleController', ['$scope', function ($scope) {
                        $scope.customers = [
                            {name: 'Mina', city: 'Bangalore'},
                            {name: 'Tina', city: 'Channai'},
                            {name: 'abrahm', city: 'Mumbai'},
                            {name: 'Zebraman', city: 'Delhi'}
                        ];
                    }]);

here is updated code,

var app = angular.module('app', ['ngRoute']);
      app.config(function($routeProvider) {
        $routeProvider.when('/', {
            controller: 'SimpleController',
            templateUrl: 'view1.html'
          })
          .when('/view2', {
            controller: 'SimpleController',
            templateUrl: 'Partial/view2.html'
          })
          .otherwise({
            redirectTo: '/'
          })
      });
      app.controller('SimpleController', ['$scope', function($scope) {
        $scope.customers = [{
          name: 'Mina',
          city: 'Bangalore'
        }, {
          name: 'Tina',
          city: 'Channai'
        }, {
          name: 'abrahm',
          city: 'Mumbai'
        }, {
          name: 'Zebraman',
          city: 'Delhi'
        }];
        $scope.addCustomer = function() {
          $scope.customers.push({
            name: $scope.newCustomer.name,
            city: $scope.newCustomer.city
          });

        };
      }]);

now once you load "/" controller is binded with $scope but we also need to add controller to html element where you need.

here is your code where you missed binding "ng-controller"

    <ul>  
                <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
   </ul>

here is updated code:-

    <ul ng-controller="SimpleController">
          <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
   </ul>

Take a look at: http://plnkr.co/edit/IkApZKO3ynEfIq1Stw4A?p=preview

Take out the block

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

I don't see you using views anywhere. Also, you need to add ng-controller directive to HTML.

insert data-ng-view out of ng-controller in index file Project.

Problem is with

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

This piece of code is not able to find the templateUrl what you are using in your code.

use below code. code

EDIT You can make it work by doing:-

1. Create view1.html in the same folder where your current html is.
2. Then create Partial folder and create a file called view2.html inside Partial folder
3. Access view1 by hitting this url http://yoursitename./index.html#/
4. Access view2 by hitting this url http://yoursitename./index.html#/view2

EDIT 2 That's because the customer data you are iterating upon is in SimpleController which is not available where you are doing ng-repeat. SimpleController is only available for view1 and view2. Write ng-controller="SimpleController" in the <ul>tag right before you have written ng-repeat. It should work.

Check the snippet i got it working .. 3 things were wrong:

1. Didnt add angular route script tag

   http://code.angularjs/1.3.0-beta.13/angular-route.min.js

2. Forgot to add ngRoute injection in module

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

3. Your name filter was wrong on the ng-repeat .

   data-ng-repeat="cust in customers| filter:{name: name} | orderBy:'name'"

    var app = angular.module('app', ['ngRoute']);
                        app.config(function ($routeProvider) {
                            $routeProvider.when('/',
                                    {
                                        controller: 'SimpleController',
                                        templateUrl: 'view1.html'
                                    })
                                    .when('/view2',
                                            {
                                                controller: 'SimpleController',
                                                templateUrl: 'Partial/view2.html'
                                            })
                                    .otherwise({redirectTo: '/'})
                        });
                        app.controller('SimpleController', ['$scope', function ($scope) {
                                $scope.customers = [
                                    {name: 'Mina', city: 'Bangalore'},
                                    {name: 'Tina', city: 'Channai'},
                                    {name: 'abrahm', city: 'Mumbai'},
                                    {name: 'Zebraman', city: 'Delhi'}
                                ];
                                $scope.addCustomer = function () {
                                    $scope.customers.push(
                                            {
                                                name: $scope.newCustomer.name,
                                                city: $scope.newCustomer.city
                                            });

                                };
                            }]);

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://code.angularjs/1.3.0-beta.13/angular-route.min.js"></script>
<html  data-ng-app="app" > <!-- Directive -->
    <body ng-controller="SimpleController"> 

        <div>
            <!-- Placeholder for views -->
            <div data-ng-view=""></div>
        </div>
        Name: <input type="text" data-ng-model="name"/>   
        <br/>
        <h3>Looping with the help of ng-repeat directive</h3>
        Name:{{name}}
        <ul>  
            <li data-ng-repeat="cust in customers| filter:{name: name} | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
        </ul>
      
    </body>
</html>

Inject ngRoute like angular.module('app',['ngRoute']); and your code will work like charm.!