AngularJS function failed after getting valule for ng-app
I have below code ( sample jsfiddle code )
<div ng-app="app">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<p>{{name}}</p>
</div>
it doesn't work when i use <div ng-app="app">
, but it works fine when i use <div ng-app="">
(i.e. when deleting a value ng-app
)
Why is this happening?
source to share
Here is the documentation for angular.module
angular.module is the global place to create, register and retrieve Angular modules. All modules (angular core or 3rd party) that need to be available for the application must be registered using this mechanism.
Since the app is a new module that you created, you need to register it in js as
angular.module("app", []);
Now ng-app is used to automatically load the Angular app, so if you don't have a name for that, you don't need to register, so it ng-app=" "
works fine, but notng-app="app"
source to share
The reason is that you need a module app
when you declare it as
<div ng-app="app">
You need
angular.module('app', [])
Updated fiddle .
Reply to comment:
You can specify an AngularJS module to be used as the root module for the application. This module will be loaded into the $ injector when the application is loaded. It must contain the required application code or have dependencies on other modules that will contain the code. See angular.module for details.
This is quoted from the docs .
source to share
When you write <body ng-app="myApp">
that means you provide a value to a directive and angular is always used to look up values using a directive. And if you provided a value to a module, that means you have to enter it. using
angular.module('app',[]);
'[]' always contain dependencies, if your app depends on another angular app then you can inject its dependency here Follow the docs for more information: https://docs.angularjs.org/api/ng/directive/ngApp
source to share