If the value of ng-app is not empty string the angular directives are not working

Question

If the value of ng-app is not empty string the angular directives are not working

836 views Asked by Kevin Macaraeg At 04 January 2017 at 02:23

I am new to AngularJs. I am just getting confused why does my code when the value for ng-app is just empty string the Angular directives are working but on the other hand the directives are not working if the its value is not empty string.

What is happening here? My code is below:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1"; charset=ISO-8859-1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body **ng-app="loginApp"** class="body-bg-blue">
    <div class="container">
        <div class="row"></div>
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <div class="jumbotron vertical-center">
                    <div class="login-form">

                        <div class="page-header">
                            <h1>STWEBAPP</h1>
                        </div>

                        <div **ng-controller="loginController"**>

                            <form name="loginForm" ng-submit="login()" role="form">
                                <div class="form-group">
                                    <input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
                                    <span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
                                    <span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox"> Remember me</label>
                                </div>
                                <div class="form-group">
                                    <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
                                    <img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
                                </div>
                            </form>

                        </div>
                    </div>  
                </div>
            </div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row"></div>
    </div>
</body>
</html>

Original Q&A

There are 1 answers

**Sajeetharan** · Accepted Answer · 2017-01-04 02:34:22

I assume you are talking about ng-app directive, if you declare ng-app int he application with a name , you need the module to be declared.

 var app = angular.module("loginApp", []);
 app.controller("loginController", ["$scope",
 function($scope) {


 }
]);

DEMO

var app = angular.module("loginApp", []);

app.controller("loginController", ["$scope",
  function($scope) {
  
        
  }
]);

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body ng-app="loginApp" class="body-bg-blue">
    <div class="container">
        <div class="row"></div>
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <div class="jumbotron vertical-center">
                    <div class="login-form">

                        <div class="page-header">
                            <h1>STWEBAPP</h1>
                        </div>

                        <div ng-controller="loginController">

                            <form name="loginForm" ng-submit="login()" role="form">
                                <div class="form-group">
                                    <input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
                                    <span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
                                    <span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
                                </div>
                                <div class="checkbox">
                                    <label><input type="checkbox"> Remember me</label>
                                </div>
                                <div class="form-group">
                                    <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
                                    <img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
                                </div>
                            </form>

                        </div>
                    </div>  
                </div>
            </div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row"></div>
    </div>
</body>
</html>

TechQA.

If the value of ng-app is not empty string the angular directives are not working

There are 1 answers

Related Questions in ANGULARJS

Related Questions in NG-APP

Popular Questions

Popular Tags

Trending Questions