Angularjs ng-view not showing data

Question

I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.

index.html

<!doctype html>
<html ng-app="myApp">
  <head>
  <title>Angular App</title>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <div ng-view></div>
    </div>
  </body>
</html>

list.html

<h3>List</h3>
<ul>
    <li ng-repeat="contact in contacts">
      <a href="#">{{contact.name}}</a>: {{contact.number}}
    </li>
</ul>

app.js

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

    app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        });
    });

    app.controller('Ctrl', function($scope){
        $scope.contacts = [
            { name: 'Shuvro', number: '1234' },
            { name: 'Ashif', number: '4321' },
            { name: 'Anik', number: '2314' }
        ];
    });

Dalorzo · Accepted Answer · 2014-06-22 14:07:37Z

5

Remove the ng-controller from the div like this:

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

To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});

app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        }).otherwise({ redirectTo: '/'});
});

Online Demo

edited Jun 22, 2014 at 14:07

answered Jun 22, 2014 at 13:51

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shuvro Over a year ago

I removed the ng-controller and added otherwise to routeprovider as you said, but still nothing shown.

Shuvro Over a year ago

the url showing in my browser is 'file:///C:/Users/Shuvro/Desktop/AngularApp/index.html#/' . If that helps to find anything I'm missing.

Dalorzo Over a year ago

@Shuvro it works on my end Online Demo

Shuvro Over a year ago

ok its working. It's turned out to be a google chrome issue. It's working fine in my firefox. and to solve the google chrome problem I followed steps mentioned here stackoverflow.com/questions/8449716/… . Now everything working fine. Thank you :)

Collectives™ on Stack Overflow

Angularjs ng-view not showing data

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related