AngularJS Controllers dont work

Question

Using the latest ng library, I tried the following.

This file:

<!DOCTYPE html>
<html>
<head>
    <title>Listing 4-2</title>
    <script src="js/angular.min.js"></script>
    <script>
        function MyFilterDemoCtrl($scope) {

            var someData = {
                firstName: 'JENNA',
                surname: 'GRANT',
                dateJoined: new Date(2010, 2, 23),
                consumption: 123.659855,
                plan: 'super-basic-plan'
            };

            $scope.data = someData;

        }
    </script>

</head>
<body ng-app ng-controller="MyFilterDemoCtrl">

<p>
    <!-- Unfiltered data -->
    <strong>First Name</strong>: {{data.firstName}}<br/>
    <strong>Surname:</strong> {{data.surname}}
</p>

<p>
    <!-- Filtered data -->
    <strong>First Name</strong>: {{data.firstName | lowercase}}<br/>
    <strong>Surname:</strong> {{data.surname | lowercase }}
</p>

</body>
</html>

Displays this output:

First Name: {{data.firstName}}
Surname: {{data.surname}}

First Name: {{data.firstName | lowercase}}
Surname: {{data.surname | lowercase }}

Why?

BTW - The MyFilterDemoCtrl controller’s only task here is to make the data available to the view. As you will recall from the last chapter, placing it in the scope does this.

Thanks.

J.

You should create angular module and then add controller into it docs.angularjs.org/guide/controller — Dmitry Pavliv
– Dmitry Pavliv, Commented Feb 14, 2015 at 19:07
How? I copied this code from Apress AngularJS book: Publication Date: December 31, 2014 — janiv
– janiv, Commented Feb 14, 2015 at 19:19

Bokoskokos · Accepted Answer · 2015-02-14 19:07:48Z

1

You have to tell Angular about the controller, like this:

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

myApp.controller('MyFilterDemoCtrl', ['$scope', function($scope) {
    var someData = {
        firstName: 'JENNA',
        surname: 'GRANT',
        dateJoined: new Date(2010, 2, 23),
        consumption: 123.659855,
        plan: 'super-basic-plan'
    };

    $scope.data = someData;
}]);

answered Feb 14, 2015 at 19:07

Bokoskokos

5125 silver badges13 bronze badges

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

1 Comment

Valentin Waeselynck Over a year ago

You should also add ng-app="myApp"

Collectives™ on Stack Overflow

AngularJS Controllers dont work

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related