angularjshtmlng-app

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


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.

enter image description here

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'});
}]);

Solution

  • 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