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, Jul 12 '16 at 12:56
ng-app should be `ng-app="myApp"` not `ng-app="myapplication"` — Rakesh Chand, Jul 12 '16 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, Jul 12 '16 at 13:04

score 1 · Accepted Answer · answered Jul 12 '16 at 13:10

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

score 1 · Answer 2 · answered Jul 12 '16 at 13:19

1

Try include your app.js file to the html file

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

answered Jul 12 '16 at 13:19

Rijin

625
1
4
13

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

2 Answers2