CODEWITHSUNDEEP
angularjs
Frank Fotangs
Frank Fotangs

Reputation: 50

Problems displaying view in angularJS

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:

Screenshot with the controller

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

Screenshot without the controller

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!

Upvotes: 0

Views: 23

Answers (1)

csharpfolk
csharpfolk

Reputation: 4290

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

Upvotes: 2

Related Questions