What am I doing wrong with AngularJS?

Question

I recently discovered angularJS and have been trying to learn it, so I copied the simple todo tutorial into a yeoman generator angular app which happened to work just fine. However when I tried to write my own version, I cannot get the data to update automatically.

My HTML:

<div class="hero-unit">
<ul>
  <li ng-repeat="p in phones">{{p.name}} - {{p.snippet}}</li>
</ul>
  <a href="#" ng-click="addPhone()">click me</a>
</div>

My main.js

'use strict';

angular.module('ngApp') .controller("MainCtrl", function ($scope) {

$scope.phones = [
    {name: "Nexus S",
     snippet: "Fast just got faster with Nexus S."},
    {name: "Motorola XOOM™ with Wi-Fi",
     snippet: "The Next, Next Generation tablet."},
    {name: "MOTOROLA XOOM™",
     snippet: "The Next, Next Generation tablet."}
  ];

 $scope.addPhone = function()
 {
    console.log('clicked');
    $scope.phones.push({
        name: "iPhone 5",
        snippet: "Awesome phone man"
    });
 };
});

I have not modified my app.js yet but here it is just in case:

'use strict';

angular.module('ngApp', [])
.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

What am I doing wrong? Please help before I lose my mind. I'm sure it's something extremely simple that I am over looking. However when I click the link the item does not add itself to the list. However on initial load the list loads just fine.

I forgot to mention that the "clicked" does get logged to console. — user2554434
– user2554434, Commented Jul 29, 2013 at 22:26

zs2020 · Accepted Answer · 2013-07-30 04:57:34Z

2

You missed the parameter list as the 2nd parameter of angular.module()function, just change it from

angular.module('ngApp')

to

angular.module('ngApp', [])

Demo on jsFiddle

edited Jul 30, 2013 at 4:57

answered Jul 29, 2013 at 22:28

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

4 Comments

user2554434 Over a year ago

Thank you, but it still fails to work on my computer. I am using grunt, and the example from the angularjs site worked just fine... am I going crazy?

zs2020 Over a year ago

@user2554434 I updated the demo. Try use the same exactly angular module instance for registering both controller and routing.

user2554434 Over a year ago

Thank you for all your help. The only thing that ended up fixing the problem was removing href="#" from the a attribute. Is there any specific reason this was preventing it from working? I want to learn for the future to avoid this mistake again. Thank you none the less.

zs2020 Over a year ago

Yes, href is not using angularjs's routing scope and should always be set empty.

Collectives™ on Stack Overflow

What am I doing wrong with AngularJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related