How to access the controller in Angular.js

Question

I'm creating an app using Angular.js but my index.html file does not seem to be accessing my controller.js file. The browser prints out the variables in curly braces like this: {{friend.name}}, {{friend.number}}

Here's my html file:

<!DOCTYPE HTML>
<html ng-app>
    <head>
        <title>Angular Directives</title>
    </head>

    <body>
        <div class="container" ng-controller="demoController">
            <h1>Angular Directives</h1>
            <h2>ng-model example: two-way binding and $scope</h2>
            <h3>Name</h3>
            <input type="text" ng-model="name">
            <br />
            Hello, {{name}}!
            <h2>ng-repeat example</h2>
            <ul>
                <li ng-repeat="friend in friends">{{friend.name}}, {{friend.number}}</li>
            </ul>   
        </div>  
    </body> 

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src = "controller.js"></script>
</html>

Here's my controller.js file:

var demoController = function($scope) {
    $scope.name = "John Doe";

    var friend1 = {
        name: "Tim Thompson",
        number: "111-111-1111"
    };

    var friend2 = {
        name: "Sally Smith",
        number: "222-222-2222"
    };

    var friend3 = {
        name: "Billy Bob",
        number: "333-333-3333"
    };

    var friends = [friend1, friend2, friend3];
    $scope.friends = friends;
}

Which angular version are you using ? Or any console error ? — Vineet
– Vineet, Commented Jul 11, 2015 at 19:13

whatoncewaslost · Accepted Answer · 2015-07-11 19:24:46Z

You need to include it as a module and specify the module in the code. So something like this.

angular.module("exampleApp", [])
.controller("demoController", function($scope) {
$scope.name = "John Doe";

var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
};

var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
};

var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
};

var friends = [friend1, friend2, friend3];
$scope.friends = friends;

});

Then set ng-app="exampleApp" and your code should work.

Edit: I just realized my original explanation might have been unclear. What I meant is that angular has a module system. Modules are where you attach controllers to. So when you add ng-app="exampleApp", angular will look at that and see that you want to pull the controllers from the exampleApp module. So you needed to specify that that's the module you wanted to use in your code, and that you attached the demoController controller to that specific module.

Chrillewoodz · Accepted Answer · 2015-07-11 19:22:29Z

Every Angular app requires at least one module which the controllers, services, factories and directives etc. will be connected to. You seem to be missing this, therefore your controller doesn't work.

First create a module like this:

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

The [] is where you can inject other modules to your app. Such as ngRoute, ngAnimate or your own sub modules.

After you have created the module you need to tell your app which module to use, you do this via the ngApp directive, usually set on the html tag:

<html ng-app="myApp">

Remember, ngApp accepts the name of your module, not the variable it is stored in. So it will be myApp and not myModule.

Then you need to hook your controller to this module which you do by simple setting:

myModule.demoController = function($scope) {
  $scope.name = "John Doe";

  var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
  };

  var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
  };

  var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
  };

  var friends = [friend1, friend2, friend3];
  $scope.friends = friends;
}

As an additional tip it is also advised to use array annotation so your application doesn't break on minification. So change your controller to look like this:

myModule.demoController(['$scope', function($scope) {
  $scope.name = "John Doe";

  var friend1 = {
    name: "Tim Thompson",
    number: "111-111-1111"
  };

  var friend2 = {
    name: "Sally Smith",
    number: "222-222-2222"
  };

  var friend3 = {
    name: "Billy Bob",
    number: "333-333-3333"
  };

  var friends = [friend1, friend2, friend3];
  $scope.friends = friends;
}]);

Now you will inject your dependencies as function parameters and in the array inside '' marks.

Now you can start writing things in your controller and they will be visible on your page.

andrewgu · Accepted Answer · 2015-07-11 19:22:50Z

You have to bind the controller to your app/module. It also doesn't look like you've created an Angular app yet (documentation).

You should probably create another .js file vaguely following the following format to create an app. Note that you can also do this in the same file as the controller, just before the controller is created. The empty square-brackets at the end there symbolize any additional Angular dependencies you want to inject, such as Angular Material Design, but since it doesn't look like your code uses any, we'll leave it blank.

var app = angular.module("MyAppName", []);

Then, you'll need to modify your controller code to bind the controller to your Angular module by putting this code after your current controller function code. (documentation).

app.controller("demoController", demoController)

Finally, to make your HTML page load the Angular module and controller, you need to put an ng-app="MyAppName" tag in your code on one of the parent elements of the demoController. Usually, this is placed on the opening <html> or <body> tag. So, you could change your opening body tag to match the following:

<body ng-app="MyAppName">

Collectives™ on Stack Overflow

How to access the controller in Angular.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related