Problems displaying view in angularJS

Question

I just started AngularJS today; so I'm still very new to it. I have the following code:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">

<div class="container"> 
<h3>Looping with the ng-repeat Directive</h3>

<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
    <li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">
function SimpleController($scope){
    $scope.customers=[
        {name:'Frank Ben',city:'Bamenda'},
        {name:'Brize Tankanon',city:'Marous'},
        {name:'Brendaline M.',city:'Bafoussam'},
        {name:'Alexander Bings',city:'Buea'}
    ];
}

When I run the above code, this is what I get:

when I remove the controller directive from the body tag, I get this:

I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!

In such situations you must looked up Console of browser for some errors in ClientSide — Elvin Mammadov
– Elvin Mammadov, Commented May 26, 2016 at 15:59

csharpfolk · Accepted Answer · 2016-05-26 15:56:49Z

2

Try to register controller in angularjs app using build in dependency injection, in other words:

<script type="text/javascript">
  var app = angular.module("app", []);

app.controller('SimpleController', ['$scope', function SimpleController($scope){
    $scope.customers=[
        {name:'Frank Ben',city:'Bamenda'},
        {name:'Brize Tankanon',city:'Marous'},
        {name:'Brendaline M.',city:'Bafoussam'},
        {name:'Alexander Bings',city:'Buea'}
    ];
}]);

  </script>

then change ng-app to ng-app="app".

Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output

edited May 26, 2016 at 15:56

answered May 26, 2016 at 15:51

csharpfolk

4,29029 silver badges36 bronze badges

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

3 Comments

Frank Fotangs Over a year ago

It works perfectly! Tthe book I'm using is old probably. From the video that accompanies the book, everything works. The changes @csharpfolk recommends works perfectly. I'm happy!

Harris Over a year ago

@FrankFotangs Be sure to mark their response as the answer to your question.

Frank Fotangs Over a year ago

Yeah! I wanted to but the system says I wait!

Collectives™ on Stack Overflow

Problems displaying view in angularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related