Page scrolling up when using Bootstrap and AngularJS - angularjs

I am writing a HTML page using Bootstrap and AngularJS to capture details of an order, and when the page has finished loading it jumps up so that the header of the panel is hidden under the bootstrap navbar.
This isn't what I was expecting. See this plunkr for an example of what I want to achieve. It shows the panel header and the focus is on the Order Ref field as expected and the page doesn't move up at all.
I have tried to create a plunkr that uses AngularJS to demonstrate the issue, but I couldn't get it to run properly so I decided to show the same plunked code in the hope that someone has come across this before.
<!-- Orders.html -->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Portal</title>
</head>
<body>
<header class="bs">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#">Portal</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<div class="navbar-text">Search</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<form name="form" class="form-horizontal" confirm-on-exit>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Order
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
</div>
</div>
<div class="form-group">
<label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
</div>
</div>
<div class="form-group">
<label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
</div>
</div>
<div class="form-group">
<label for="inputTown3" class="col-sm-2 control-label">Town</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
</div>
</div>
<div class="form-group">
<label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
</div>
</div>
<div class="form-group">
<label for="inputValue3" class="col-sm-2 control-label">Value</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
<button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Copyrights</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
</div>
</nav>
</body>
</html>
/* site.css */
body {
padding-top: 70px;
padding-bottom: 50px;
}
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: white;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: white;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: white;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
It's quite annoying when the page moves up and creates a poor user experience. As this issue doesn't occur when not using Angular I'm inclined to believe that Angular could be the problem, although I cannot see how.
EDIT
I've updated the plunkr so that it now uses AngularJS and the page doesn't move up. I am wondering if this is because I have the index.html page being rendered by ASP.NET MVC?
<!-- Index.html -->
#{
Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Orbit Works</title>
#Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
<ptl-header></ptl-header>
<div class="container">
<div ui-view></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Michael John Clarke.</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
</div>
</nav>
#Scripts.Render( "~/bundles/script/libraries" )
#Scripts.Render( "~/bundles/script/app" )
</body>
</html>


Adding autoscroll="untrue" to the ui-view directive stops the page from scrolling to the child ui-view as described here.
<div ui-view autoscroll="untrue"></div>

Related

Fetching user data using ng-click

Here is the list of users. I need to display particular user details when clicked on him.
<head>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<h1> PERSONS</h1>
<form name="commonForm">
<div class="col-sm-4" ng-repeat="user in userData.results" ng-class="{active : isSelected(user)} style="margin-top:50px;">
<img class="col-sm-4" ng-src="{{user.picture.large}}"/>
<div class="col-sm-8">
<div ><a ng-click="clickMe(p)" class="clickable"><b>{{user.name.first}} {{user.name.last}}</b></a></div>
<div>{{user.email}}</div>
<div>{{user.location.street}},{{user.location.city}},{{user.location.state}},{{user.location.postcode}}</div>
</div>
</div>
</form>
</div>
</body>
Also check the following link for the demo - https://plnkr.co/edit/J70FKDpdXUtg1AfiVkcz?p=preview
I need to display a particular user's data when we click on the user.

Below is the working example for the same
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$scope.selectedUser = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
$scope.selectUser = function(usr){
$scope.selectedUser=usr;
};
}]);
}());
</script>
<style>
.userInfo{
border: 1px solid #ccc;
margin-top:10px;
padding:5px;
cursor: pointer;
}
.userInfo:hover{
background: #ccc;
}
.profile{
padding-left: 0px;
padding-right: 0px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<form name="commonForm">
<div ng-hide="selectedUser">
<div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
<img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
<div class="col-sm-8">
<div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
<div class="ellipsis">{{user.email}}</div>
</div>
</div>
</div>
<div ng-show="selectedUser">
<button ng-click="selectedUser = undefined">Go Back</button>
<br />
<br />
<img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
<div class="col-sm-4">
<div class="form-group">
<label for="first">First Name:</label>
<input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
</div>
<div class="form-group">
<label for="last">Last Name:</label>
<input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
</div>
<div class="form-group">
<label for="username">Login:</label>
<input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="selectedUser.email">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nat">Nationality:</label>
<input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
</div>
</div>
</div>
</form>
</div>
</body>
</html>

dropdownlist validation (Required) AngularJS

I have dropdown in model popup and want to do required field validation here. My code is following.. But the code is not done the validation..
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs
col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :
</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification"
name="itClassification" ng-model="itClassification"
ng-options="ic.itId as ic.itClassificationName for ic in
itClassifications" placeholder="select IT Classification"
required>
<option value="" ng-selected="selected">Select IT
Classification</option>
</select>
<div class="help-block" ng-messages="addClientModal.itClassification.$error"
ng-if="addClientModal.itClassification.$dirty && addClientModal.itClassification.$invalid">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
Can anyone help me to solve this..?
Thanks in advance

Just add ngform tag
<div class="form-group form-group-sm">
<ng-form name="addClientModal">
// other tags
</ng-form>
</div>
Here i added form name as addClientModal see Example

Check this is the answer. You need to use validations on form name->form control name. Here is Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview
var app = angular.module('myApp', ['ngMessages']);
app.controller('TestController', function($scope) {
//$scope.itClassification = null;
$scope.optionsList = [
{'label':'One','value':'1'},
{'label':'Two','value':'2'},
{'label':'Three','value':'3'},
{'label':'Four','value':'4'},
{'label':'Five','value':'5'},
{'label':'Six','value':'6'},
{'label':'Seven','value':'7'},
{'label':'Eight','value':'8'},
{'label':'Nine','value':'9'},
{'label':'Ten','value':'10'},
]
$scope.listItemChanged=function(schedule){
alert($scope.itClassification)
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="ng-messages#*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestController">
<form name="userForm" autocomplete="off">
<div class="form-group form-group-sm">
<label for="itClassification" class="control-label text-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :</label>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<select class="form-control" id="itClassification" name="itClassification" ng-model="itClassification" ng-options="listItem.label as listItem.value for listItem in optionsList" placeholder="select IT Classification" required>
<option value="" ng-selected="selected">Select IT Classification</option>
</select>
<div class="help-block" ng-messages="userForm.itClassification.$error">
<p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
</p>
</div>
</div>
</div>
</form>
</div>
</body>
</html>

AngularJS Validations for multiple fields

I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>

You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">

Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>

Angular Controller not found

Problem Definition
I am using AngularJS's ngRoute module for the first time and I am running into some trouble with it. I have a index.cshtml page in which I reference my routingModule by setting the ng-app. I also have a ng-view so that when I click on "New Account" it loads register.cshtml in the ng-view or if I click on "Sign In" it will load authenticate.cshtml in the ng-view.
The routing is working as expected since I can see the register and authenticate pages load in the ng-view when I click the links in on my index page. But the controllers I have set for the register and authenticate pages in the routingModule.js seem to not be there.
I get this error when clicking on "New Account" on the index page.
I get the same error when I click on "Sign In" on the index page
I have added all the javascript and html files below needed to solve the problem. Any help would be much appreciated.
Webroot Structure
routingModule.js
var routingModule = angular.module("routingModule", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/account/register', { templateUrl: '/account/register/', controller: 'RegisterController' });
$routeProvider.when('/account/authenticate', { templateUrl: '/account/authenticate/', controller: 'AuthenticateController' });
})
index.cshtml
<!DOCTYPE html>
<html ng-app="routingModule">
<head>
<base href="/" />
<script src="~/Scripts/JQuery/jquery-2.1.3.js"></script>
<script src="~/Scripts/Angular/angular.min.js"></script>
<script src="~/Scripts/Angular/angular-route.min.js"></script>
<script src="~/Scripts/Angular/angular-resource.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/boostrap-hero.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/app/Registration/registerModule.js"></script>
<script src="/Scripts/App/Registration/registerService.js"></script>
<script src="/Scripts/App/Registration/registerController.js"></script>
<script src="/Scripts/App/Registration/validatePasswordDirective.js"></script>
<script src="~/Scripts/App/Authentication/authenticateModule.js"></script>
<script src="~/Scripts/App/Authentication/authenticateController.js"></script>
<script src="~/Scripts/App/Authentication/authenticateService.js"></script>
<script src="~/Scripts/App/Routing/routingModule.js"></script>
<meta name="viewport" content="width=device-width" />
<title>AngularJS + ASP.NET MVC</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><span class="navbar-brand">AngularJS + ASP.NET Playground</span></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Sign In</li>
<li> New Account</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
</div>
</body>
</html>
register.cshtml
<form name="registerForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Create Account</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input type="text" name="userName" ng-model="user.userName" class="form-control" required />
<div class="text-danger" ng-show="registerForm.userName.$error.required && registerForm.userName.$dirty">Please enter your first name</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*&#64[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="registerForm.email.$error.required && registerForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="registerForm.email.$error.pattern && registerForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="registerForm.password.$error.required && registerForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" class="form-control" required compare-to="user.password" />
<div class="text-danger" ng-show="registerForm.passwordConfirm.$error.required && registerForm.passwordConfirm.$dirty">Please repeat your password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="registerForm.$invalid" ng-click="register(user)">Create Account</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
authenticate.cshtml
<form name="loginForm" novalidate>
<div class="row">
<div class="col-md-10">
<h2>Sign In</h2>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*&#64[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<div class="text-danger" ng-show="loginForm.email.$error.required && loginForm.email.$dirty">Please enter a your email address</div>
<div class="text-danger" ng-show="loginForm.email.$error.pattern && loginForm.email.$dirty">Invalid email address</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="user.password" class="form-control" required />
<div class="text-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Please enter a password</div>
</div>
<div class="form-group">
<button class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="authenticate(user)">Sign In</button>
<div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
</div>
</div>
</div>
</form>
registerModule.js
var registerModule = angular.module("registerModule", ["ngResource"]);
registerController.js
registerModule.controller("RegisterController", function ($scope, $location, registerService) {
$scope.register = function (user) {
$scope.errors = [];
registerService.register(user).$promise.then(
function () { $location.url('/home/index');},
function (response){$scope.errors = response.data});
};
});
registerService.js
registerModule.factory('registerService', function ($resource) {
return {
register: function(user) {
return $resource('/api/account/register/').save(user);
}
}
});

From what i can see here, the authenticationModule and registerModule are missing as dependencies of your routingModule:
var routingModule = angular.module("routingModule", ['ngRoute', 'authenticationModule', 'registerModule'])

How to hide and show a div, based on model condition in angularjs?

I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?
<div ng-app='visibleApp'>
<div ng-controller='myController'>
<input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
<div ng-show="{{!hideBasicInfo}}">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" ng-model="firstName"/></br>
<label for="middleName">Middle Name:</label>
<input type="text" name="middleName" ng-model="middleName"/></br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" ng-model="lastName"/>
</div>
<hr/>
<div>
<h4>Debug Information</h4>
hideBasicInfo: {{hideBasicInfo}}<br/>
!hideBasicInfo: {{!hideBasicInfo}}
</div>
</div>
</div>
JS file:
var visibleApp = angular.module('visibleApp',[]);
visibleApp.controller('myController', function($scope){
$scope.data = "my data";
$scope.hideBasicInfo = false;
});
Thank you.
See fiddle

almost there...
<div ng-hide="hideBasicInfo">
...
</div>
no template braces ( {{}} ) needed.

<div ng-show='One'>
<p>Section One</p>
</div>
<div ng-show='Two'>
<p>Section Two</p>
</div>
<div ng-show='Three'>
<p>Section Three</p>
</div>
<!-- Navigation -->
<nav>
<a href='#' ng-click='showOne'> Show Div One </a>
<a href='#' ng-click='showTwo'> Show Div Two </a>
<a href='#' ng-click='showThree'> Show Div Three </a>
</nav>

Execute this code:`enter code here`
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app>
<h3>1. Show</h3>
<label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br />
<div ng-show="mustShow" style="width: 50px; height: 50px; background-color: red;"></div><br />
<br />
<h3>2. Hide</h3>
<label>Hide the square: <input type="checkbox" ng-model="mustHide" /></label><br />
<div ng-hide="mustHide" style="width: 50px; height: 50px; background-color: green;"></div>
</body>
</html>

Resources