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-

1. What is the way of giving my angular app a name?

2. Why in my case it is not working?

Thanks in advance for helping.

Answer 1

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>

Answer 2

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, ie is null/empty.

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

1. 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= "a@atcom"; }); </script>

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

Hope this helps.