Trying to add ng-app name does not give expected output in Application

Question

I am trying to add an ng-app tag in my sample AngularJS application.

Whenever I try to add a name like this ng-app="myapplication", the web page stops working. It is supposed to print the name entered in entry box after Hello as shown below.

The sample code :

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>First App</title>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myapplication">
    <h1>Sample AJS</h1>
    <div >
        <p>Enter your Name : <input type="text" ng-model="name"></p>
        <p>Hello <span ng-bind = "name"></span> !</p>
    </div>
</body>
</html>

If i replace the ng-app="myapplication" to ng-app="" , it gives expected output.

I tried using ng-app with <div ng-app="myapplication"> and

<!DOCTYPE html>
<html ng-app="myapplication" >

but the webpage is not populating the name entered in text box if giving a name to the ng-app

What could be going wrong. Any help is appreciated !

IDE : WebStorm2016.2
OS: Windows 7

EDIT:
app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Can you post your javascript? Ng-app refers to the name of your module. — hsiung
– hsiung, Commented Jul 12, 2016 at 12:56
ng-app should be ng-app="myApp" not ng-app="myapplication" — Rakesh Chand
– Rakesh Chand, Commented Jul 12, 2016 at 13:00
Rakeschand is correct. The name of your module is whatever you give to it as your first argument, in this case 'myApp'. Putting ng-app in the html let's angular know what module you want to use as the main application module. The way it knows which one you want is by matching up the names, otherwise it won't be able to find it. — hsiung
– hsiung, Commented Jul 12, 2016 at 13:04

Rakesh Chand · Accepted Answer · 2016-07-12 13:10:54Z

1

The reference to myApp module in <div ng-app="myApp"> is from angular.module('myApp', []). So You gotta use ng-app="myApp" instead of ng-app="myapplication" As @hsiung commented-

"The name of your module is whatever you give to it as your first argument, in this case 'myApp'. Putting ng-app in the html let's angular know what module you want to use as the main application module. The way it knows which one you want is by matching up the names, otherwise it won't be able to find it."

More explanation here ng-app

answered Jul 12, 2016 at 13:10

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

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

Comments

Rijin · Accepted Answer · 2016-07-12 13:19:55Z

1

Try include your app.js file to the html file

<script src="path/to/app.js"></script>

answered Jul 12, 2016 at 13:19

Rijin

1,0891 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

Trying to add ng-app name does not give expected output in Application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related