Angular JS - This program is not running at all

Question

I am a beginner in Angular JS and this is the most basic program that I am stuck on. The below program I am trying to run is simply not responding. I included the angular-route.js function but I am still stuck.

<html data-ng-app="demoApp">
<body data-ng-controller = "SimpleController">

    <label>Name:</label>
    <input type="text" data-ng-model="name"/> {{name}}

    <ul>
        <li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} -    {{cust.place}}</li>
    </ul>

    <script src="angular.min.js"></script>
    <script src="angular-route.js"> </script>
</body>

<script>
    var demoApp = angular.module('app', ['ngRoute']);
    demoApp.controller('SimpleController', function ($scope){
        $scope.customers=[
            {id:1, name='John Doe', place:'San Fransisco'},
            {id:2, name:'Jane Doe', place:'Seattle'},
            {id:3, name:'John Mikael', place:'Las Vegas'}
        ];
    });
</script>

This is the output

Name:   {{name}}
{{cust.id}} - {{cust.name}} - {{cust.place}}

Panchanand Mahto · Accepted Answer · 2015-08-10 18:03:28Z

2

Here is the working code...

var demoApp = angular.module('myApp', []); 
demoApp.controller('myController', function ($scope){ 
  $scope.customers=[ 
    {
      id:1, 
      name:'John Doe', 
      place:'San Fransisco'
    }, 
    {
      id:2, 
      name:'Jane Doe', 
      place:'Seattle'
    }, 
    {
      id:3, 
      name:'John Mikael', 
      place:'Las Vegas'
    } 
  ]; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}

<ul>
    <li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} -    {{cust.place}}</li>
</ul>

<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
  </div>

answered Aug 10, 2015 at 18:03

Panchanand Mahto

1511 silver badge8 bronze badges

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

3 Comments

charlietfl Over a year ago

should really explain what you did differently .... statements like this works or here's working code aren't very informative. Also left out important dependency

Panchanand Mahto Over a year ago

First of all, you have declared data-ng-app="demoApp" in HTML and in controller you are trying to get by name 'app' and your second mistake was {id:1, name='John Doe', place:'San Fransisco'} .... here it should be {id:1, name:'John Doe', place:'San Fransisco'}.... here i have removed dependency ngRout to execute code snipper because i don't have online plugin for that

charlietfl Over a year ago

what i meant was give explanation within the answer

Claies · Accepted Answer · 2015-08-10 19:43:24Z

2

Your issue here is with the way you declared your module name.

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

<html data-ng-app="demoApp">

In this case, the var demoApp is not the name of the module, it is simply a variable that can be used elsewhere in your JavaScript. The actual module name is 'app', so you should be using <html data-ng-app="app">. I highly recommend making the name of the module and the variable name the same, whenever possible, to avoid this kind of confusion.

Also, as others have stated, you have a typo in your data: {id:1, name='John Doe', place:'San Fransisco'}, should be name: not name=.

edited Aug 10, 2015 at 19:43

answered Aug 10, 2015 at 18:18

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Collectives™ on Stack Overflow

Angular JS - This program is not running at all

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related