Angular JS directive ng-app is not recognized

Question

Today is the first when i started reading about Angular JS and I tried to do a very basic thing after reading from a tutorial.

    <!DOCTYPE html>
<html data-ng-app="">
<head>
    <title></title>    
</head>
<body>
Name:
<br />
<input type="text" data-ng-app="name" /> {{ name }}

<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>

I downloaded and added the angular js library from GitHUB 1.4.x(latest). I expect the name to be written on the fly when user types in the textbox but nothing happens. What am i missing for this basic set up ?

P.S. - I am using an HTML page in Visual Studio 2010.

I do not see a reference to script file declaring the angular module called 'name' — kanchirk
– kanchirk, Commented May 9, 2015 at 2:12
you seem to be using data-ng-app twice; I suspect you want data-ng-model="name" instead. — Claies
– Claies, Commented May 9, 2015 at 2:13
oh I am so sorry. Don't know why i missed that. You are right Claies. — Rishi Bharadwaj
– Rishi Bharadwaj, Commented May 9, 2015 at 2:15
also, that video is out of date, and portions of it will not work correctly with anything later than angular 1.2.x — Claies
– Claies, Commented May 9, 2015 at 2:15

RMD · Accepted Answer · 2015-05-09 02:22:46Z

2

Some minor adjustments to your code, and it works just fine:

<html ng-app="">
        <head>
            <title></title>    
        </head>
        <body>
        Name:
        <br />
        <input type="text" ng-model="name" /> {{ name }}

        <script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>

A working code pen can be seen here: http://codepen.io/anon/pen/jPWyaR

answered May 9, 2015 at 2:22

RMD

3,02834 silver badges48 bronze badges

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

Comments

Brino · Accepted Answer · 2015-05-09 02:21:47Z

2

JSFIDDLE http://jsfiddle.net/seadonk/aze39fjq/

change the html tag to: <html ng-app>

change your input directive to data-ng-model="name"

<html ng-app>
    <head>
    </head>
<body>
    Name:
    <br />
    <input type="text" data-ng-model="name" /> {{ name }} 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>

answered May 9, 2015 at 2:21

Brino

2,5121 gold badge23 silver badges37 bronze badges

Comments

kanchirk · Accepted Answer · 2015-05-09 02:22:01Z

I note a few things.

a) No reference to script file which should contain an angular module declaration. b) The input references an angular app named "name" but it is immediately closed c) No controller declared d) data-ng-app needs older version of angular. I suggest use 1.3.5

I will do the following corrections to get it working.

http://plnkr.co/edit/rfXgNl6ugqSmlwXOaHIN?p=preview

<!DOCTYPE html>
<html >

<head>
  <title>
    My First Angular App
  </title>
  <script src="https://code.angularjs.org/1.3.15/angular.js" type="text/javascript"></script>
  <script type="text/javascript">
    var app = angular.module('name', []);
    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
    });
  </script>
</head>

<body ng-app="name">
  Name:
  <br />
  <div ng-controller="MainCtrl">
    <input type="text" ng-model="name"/>
    {{name}}
  </div>

</body>

</html>

Collectives™ on Stack Overflow

Angular JS directive ng-app is not recognized

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