How to create an AngularJS controller according to the documentation

Question

I'm new to AngularJS and I'm trying to figure out why some of the documentation code isn't working for me. While the global function controller below works for me, the documentation says I should be creating the controller through the Angular module.

Here is a link to a JSFiddle with the same code.

Working JS Controller:

function MyController($scope) {
  $scope.username = 'World';

  $scope.sayHello = function() {
    $scope.greeting = 'Hello ' + $scope.username + '!';
  };
}

Broken JS Controller:

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

myApp.controller('MyController', ['$scope', function($scope) {
  $scope.sayHello = function() {
    $scope.greeting = "Hi " + $scope.username;
  };
}]);

HTML File:

<div ng-app="">
  <div ng-controller = "MyController">
    Your name:
      <input type="text" ng-model="username">
      <button ng-click='sayHello()'>greet</button>
    <hr>
    {{greeting}}
  </div>
</div>

Z.T. Yang · Accepted Answer · 2013-07-18 04:51:02Z

1

<div ng-app="myApp">

You have to specify the name of the app you are using, since the controller belongs to that module.

updated version of your js: http://jsfiddle.net/PH5yK/2/

answered Jul 18, 2013 at 4:51

Z.T. Yang

3421 silver badge5 bronze badges

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

1 Comment

tomdepplito Over a year ago

Wow, I knew it had to be that simple. Thank you.

Collectives™ on Stack Overflow

How to create an AngularJS controller according to the documentation

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related