CODEWITHSUNDEEP
angularjs
Rishi Bharadwaj
Rishi Bharadwaj

Reputation: 2076

Angular JS directive ng-app is not recognized

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.

Upvotes: 0

Views: 2688

Answers (3)

RMD
RMD

Reputation: 3018

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

Upvotes: 2

kanchirk
kanchirk

Reputation: 912

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>

Upvotes: 2

Brino
Brino

Reputation: 2502

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>

Upvotes: 2

Related Questions