Using app name in angular js div doesn't work

Question

Here is my html and angular js code

<html>
<head>
    <title></title>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function DemoController($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        }
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

It doesn't work and gives output

    Date Of Birth: 
    Current user's date of birth: {{user.dateOfBirth}}

But if i remove ="demo" from ng-app="demo" in the div it works...

callmekatootie · Accepted Answer · 2013-06-27 06:45:18Z

7

When you assign a name to the ng-app directive, you essentially create a module with that name. In this module, you will then have to define your directives, services, filters and configurations.

In your case, when you assigned the name "demo", you created a module named "demo". Function DemoController now is no longer part of this module.

To use this function AND assign a module to your application, you need to use the following way of defining a controller:

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

app.controller('DemoController', [function () {
    //The body of demo controller
}]);

This way, the application knows which module's controller needs to be associated for the scope of the corresponding view.

EDIT: The ng-app directive reference

answered Jun 27, 2013 at 6:45

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

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

Comments

EpokK · Accepted Answer · 2013-06-27 06:51:52Z

1

My solution works, try this : http://plnkr.co/edit/zwOKitT8wznO17yZfz15?p=preview

<body ng-app="">
    <div ng-controller="DemoController">
        Date Of Birth:
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay"><span ng-bind="user.dateOfBirth"></span></span>
    </div>
</body>

answered Jun 27, 2013 at 6:51

EpokK

38.1k9 gold badges64 silver badges69 bronze badges

1 Comment

callmekatootie Over a year ago

If there is no value to the ng-app directive, you can simply use ng-app without the ng-app="" code...

Ivan Krechetov · Accepted Answer · 2013-06-27 06:56:09Z

0

The value of ng-app attribute defines the application's module name. In your case that's "demo". While you haven't declared DemoController within the module "demo", using an angular.module call, it isn't visible within your ng-app html, executed in the scope of "demo" module.

What will work for ng-app="demo" is:

<script type="text/javascript" language="javascript">
    angular.module('demo', []).controller('DemoController', function ($scope) {
        $scope.user = {
            dateOfBirth: new Date(1970, 0, 1)
        }
    });
</script>

edited Jun 27, 2013 at 6:56

answered Jun 27, 2013 at 6:47

Ivan Krechetov

19.3k8 gold badges52 silver badges61 bronze badges

Collectives™ on Stack Overflow

Using app name in angular js div doesn't work

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related