AngularJS - ng-app not working if not emplty

Question

this question may be a very very basic question of Angular.JS. May be nearly this question is asked in StackOverFlow before, but I am unable to find the question, so I have to ask this question.

I am pretty new in Angular.JS and I am trying to create a basic form with Angular.JS which will validate an email address from given input.

What is working for me is-

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

But what I am trying to give a name of my angular app like this- ng-app="my_try_app" so my code has been like this-

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<form ng-app="my_try_app" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

And u are seeing it is not working.

So, my question is-

What is the way of giving my angular app a name?
Why in my case it is not working?

Thanks in advance for helping.

Take a look at this answer, it's explain few things about modules and controllers definitions stackoverflow.com/a/26797874/930170 — S Panfilov
– S Panfilov, Commented Mar 25, 2016 at 8:43

Hadi · Accepted Answer · 2016-03-25 08:40:33Z

3

you must define app for your view. like this.

angular.module("my_try_app",[]);

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<form ng-app="my_try_app" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

answered Mar 25, 2016 at 8:40

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

S M Abrar Jahin Over a year ago

So, if I define a app name, it should be defined in JS file, right?

Hadi Over a year ago

it is better if you defined in js file. but you can define it in script tag in html.

S M Abrar Jahin Over a year ago

I am not asking that, is there any way of doing that in HTML all like other elements done in this code?

Mr Lister · Accepted Answer · 2016-04-01 11:06:45Z

Please have a look at angulaJS doc below: https://docs.angularjs.org/api/ng/directive/ngApp Basically, "ng-app" is used during Bootstrap Phase, It helps the angular to initializes your module.(Determines the boundary of HTML code which should be coming under angular influence.)

For example: Name: The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. In the sample code mentioned, angularJS is configured to work in default mode. Hence ng-app is optional, i.e is null/empty.

However if you wish to bootstrap your app/HTMl with ng-app="my_try_app", then can follow any of below

Define a angular controller either inside script tag or separate Js file & import using <script src> ,

For eg. add below inside your HTML file

<script>
var app = angular.module('my_try_app', []);
app.controller('myTryCtrl', function($scope) {
$scope.text= "[email protected]";    
});
</script>

For larger apps, i,e with multiple views, bootstrap angular using.. angular.bootstrap(document,["my_try_app"]);

Hope this helps.

Collectives™ on Stack Overflow

AngularJS - ng-app not working if not emplty

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related