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]+)*@[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]+)*@[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'])
Related
While switching back and forth with the radio buttons, the form values get reset. Why does $scope.user reset and does not stay persistent?
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Use the controller as syntax (Run the below snippet in order to see how it fixes the issue).
In your code you would need to change:
1- This
$scope.radio_test="0";
$scope.user="John Doe";
to
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
2- This: ng-controller="myCtrl" to ng-controller="myCtrl as vm"
3- And every where you were accessing anyVar in the view (and in controller $scope.anyVar) to vm.anyVar (in the view and the controller).
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) { // there is no need to use the $scope any more
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp" ng-controller="myCtrl as vm" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="vm.radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="vm.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
Setting your ng-model on the input to $parent.user seems to do the trick.
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="$parent.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
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>
I have 2 step form
on step 1 : ask user to how many input form needed
that use in < input type="number" ng-model="vm.nkeys" />`
on step 2 : want to create one input text for each with ng-model and name attribute in array form so that I can capture the every input box value; but both is not working; see the relevant code and wokrking plunker below.
<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
<div class="text-center m-t-md">
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
</div>
</div>
</div>
tried ng-model="key_desc[{{$index+1}}] but no success; also name=description_{{$index}} is also not working
see the demo plunker
what do I need to do?
Have a look at the sample snippet below:
<div ng-repeat="item in getNumber(key) track by $index">
<input type="text" ng-model="text[$index]" name="input_{{$index}}" />
<span ng-if="text[$index]">
- {{text[$index]}}
</span>
</div>
Refer the demo here.
See your code now:
<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
<!-- Other stuff -->
<input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>
See you code here.
Try this
<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >
Set vm variable to ng-model.
(function () {
'user strict';
angular.module('app',[])
.controller('FormController', function ($log) {
var vm = this;
vm.title = 'Key Manager';
vm.step = 1;
vm.key_desc = [];
vm.submit = _submit;
function _submit(){
alert(vm.key_desc);
}
vm.next = function() {
$log.debug('clicked on next');
if(vm.step < 3 )
vm.step = vm.step + 1;
vm.getKeys=function(n){
return new Array(n);
};
}
vm.prev = function() {
$log.debug('clicked on prev');
if(vm.step > 0)
vm.step = vm.step - 1;
}
vm.hasPreviousStep = function(){
var previousStep = vm.step - 1;
return (previousStep > 0);
};
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<script src="script.js"></script>
</head>
<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
<div class="col-lg-7">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Genarate Key(s)</h5>
</div>
<div class="ibox-content">
<form action="#" class="form" novalidate>
<div role="application" class="wizard clearfix">
<div class="content clearfix">
<div ng-form='vm.step1form' ng-show="vm.step == 1" class="step-content body" >
<div class="m-t-md">
<h2>Number of Keys</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Number of Keys *</label>
<div class="col-sm-4">
<input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
</div>
</div>
</div>
</div>
<div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
<div class="text-center m-t-md">
<h2>This is step 2</h2>
<div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
<label class="col-sm-2 control-label">{{$index+1}}</label>
<div class="col-sm-4">
<input id="location" ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
</div>
</div>
</div>
</div>
</div>
<div class="actions clearfix">
<ul class="list-inline">
<li >
<button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
</li>
<li >
<button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
</li>
<li >
<button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i> Submit</button>
</li>
<li>
<button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
model name could be connect with controller name..using vm variable..
In your controller initialize vm.key_desc = [] in your controller..
Use an Array element as ng-model
<input ng-model="key_desc[$index]" name="description_{{n}}"
type="text" class="form-control" >
here the value of first input will be in $scope.key_desc[0], second in $scope.key_desc[1] and so on
before that, initialise $scope.key_desc = [] in your controller
I am developing Spring MVC AngularJS example. I've simply taken a code from link: https://github.com/sivaprasadreddy/sivalabs-blog-samples-code/tree/master/springmvc-angular-crud. I am able to login using siva#gmail.com/siva successfully, but when I'm accessing logout, user profile, setting etc, nothing is happening. Please guide what is missing here.
login.jsp:
<!DOCTYPE html>
<%#include file="taglib.jsp" %>
<html>
<head>
<title>Login</title>
<base href="${rootUrl}">
<%# include file="assets.jspf" %>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${param.error != null}">
<div class="alert alert-danger">
Invalid UserName and Password.
</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success">
You have been logged out.
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Login Form</h2>
<form:form id="loginForm" method="post" action="login" modelAttribute="user"
class="form-horizontal" role="form" cssStyle="width: 800px; margin: 0 auto;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="UserName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
New User? Register
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
register.jsp
<!DOCTYPE html>
<%#include file="taglib.jsp"%>
<html>
<head>
<title>Create User</title>
<script type="text/javascript">
$(document).ready(function() {
$("#registrationForm").submit(function( event ) {
var userName = $.trim($("#userName").val());
var password = $.trim($("#password").val());
var firstName = $.trim($("#firstName").val());
var email = $.trim($("#email").val());
if(userName == '' || password == '' || firstName == '' || email == ''){
alert("Please enter all mandatory fields");
event.preventDefault();
return false;
}
});
});
</script>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${ERROR != null }">
<div class="alert alert-danger">
<p>${ERROR}
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Registration Form</h2>
<form:form id="registrationForm" method="post" action="register"
modelAttribute="user" cssStyle="width: 800px; margin: 0 auto;"
class="form-horizontal" role="form">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="userName" name="userName"
class="form-control" placeholder="UserName" />
<form:errors path="userName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password"
class="form-control" placeholder="Password" />
<form:errors path="password" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email*</label>
<div class="col-sm-4">
<input type="text" id="email" name="email" class="form-control"
placeholder="Email" />
<form:errors path="email" />
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">FirstName*</label>
<div class="col-sm-4">
<input type="text" id="firstName" name="firstName"
class="form-control" placeholder="FirstName" />
<form:errors path="firstName" />
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-4">
<input type="text" id="lastName" name="lastName"
class="form-control" placeholder="LastName" />
<form:errors path="lastName" />
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">Date Of
Birth</label>
<div class="col-sm-4">
<input type="text" id="dob" name="dob" class="form-control"
placeholder="dd-MM-yyyy" />
<form:errors path="dob" cssClass="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
Already Registered? Login
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
welcome.jsp:
<!DOCTYPE html>
<%# include file="taglib.jsp" %>
<html lang="en" ng-app="usersApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring MVC Angular Tutorials : Forum</title>
<%# include file="assets.jspf"%>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${rootUrl}home">My DashBoard</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> My Account </a>
<ul class="dropdown-menu dropdown-user">
<li><a href="${rootUrl}myAccount"><i
class="fa fa-user fa-fw"></i> User Profile</a></li>
<li><a href="${rootUrl}changePwd"><i
class="fa fa-gear fa-fw"></i> Settings</a></li>
<li class="divider"></li>
<li>Logout</li>
</ul> <!-- /.dropdown-user --></li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="list-group">
<span class="list-group-item active">Personal Data</span> PhoneBook Events <span
class="list-group-item active">Settings</span> <a href="#"
class="list-group-item">Configuration</a>
</div>
</div>
<div class="col-md-9 " ng-controller="UserCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="20px;">Id</th>
<th width="100px;">FirstName</th>
<th width="100px;">LastName</th>
<th width="150px;">Email</th>
<th width="100px;">Edit / Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList">
<td>{{user.id}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td><span style="cursor: pointer;"
class="glyphicon glyphicon-pencil"
ng-click="handleEditUser(user)"></span> <span
style="cursor: pointer;" class="glyphicon glyphicon-trash"
ng-click="handleDeleteUser(user)"></span></td>
</tr>
</tbody>
</table>
<div class="panel panel-default">
<div class="panel-heading">Edit User</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputId"
placeholder="Id" ng-model="editUser.id">
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-2 control-label">FirstName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFirstName"
placeholder="FirstName" ng-model="editUser.firstName">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLastName"
placeholder="LastName" ng-model="editUser.lastName">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail"
placeholder="Email" ng-model="editUser.email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"
ng-click="handleUpdateUser(editUser)">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ContactController.java
#RestController
#RequestMapping("/users/{userId}/contacts/")
public class ContactController{
#Autowired
private UserService userService;
#RequestMapping(value="", method=RequestMethod.GET)
public List<Contact> findAll(#PathVariable("userId") int userId) {
return userService.findUserContacts(userId);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.GET)
public Contact findContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
return userService.findUserContact(userId, contactId);
}
#RequestMapping(value="", method=RequestMethod.POST)
public Contact createContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="", method=RequestMethod.PUT)
public Contact updateContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.DELETE)
public void deleteContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
userService.deleteUserContact(userId, contactId);
}
}
UserController.java
#Controller
public class UserController {
#Autowired
private UserService userService;
#RequestMapping(value = "login", method = RequestMethod.GET)
public String loginForm(Model model){
model.addAttribute("user", new User());
return "login";
}
#RequestMapping(value = "/register", method = RequestMethod.GET)
public String registrationForm(Model model){
model.addAttribute("user", new User());
return "register";
}
#RequestMapping(value = "/register", method = RequestMethod.POST)
public String handleRegistration(#ModelAttribute("user") User user, BindingResult errors, Model model){
if (errors.hasErrors()) {
return "register";
}
try {
userService.createUser(user);
return "redirect:login";
} catch (Exception e) {
e.printStackTrace();
model.addAttribute("ERROR", e.getMessage());
return "register";
}
}
}
assets.jspf
<script type="text/javascript" src="${rootUrl}resources/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="${rootUrl}resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angularjs/angular.js"></script>
<script src="resources/angularjs/angular-resource.js"></script>
<script src="${rootUrl}resources/js/controllers.js"></script>
<script src="${rootUrl}resources/js/services.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/css/styles.css"/>
<script type="text/javascript" src="${rootUrl}resources/js/app.js"></script>
taglib.jsp:
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:url var="rootUrl" value="/"/>
Please let me know if You need any info.
Screen shots of UI:
If I call any tab it gives nothing why?
not seeing any handelar for /logout. Create a controller method to handle this request
#RequestMapping(value = "/logout", method = RequestMethod.GET/POST)
public String registrationForm(Model model){
//your logic
return "register";
//or return "redirect:/login"
}
I am really new in AngularJS but I have to make a web app using it, I have some input that control the style of an element (width, height, name, description and color) on the left side of my HTML. I used to had all elements hidden, when the user clicked it appeared and everything worked good, now I started using ui-router, if you click the 'Fullscreen' it will call thet html file. Some inputs work except the one I defined an initial scope value.
I leave a plunker so you can have an idea of what's going on.
http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview
The main HTML:
<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
<meta charset="UTF-8">
<title>ChatBuilder</title>
<!-- Adding Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/colpick.css">
</head>
<body ng-controller="myCtrl">
<div >
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div>
<h3>Select your chat</h3>
<a ui-sref="fullscreen">Fullscreen</a>
<a ui-sref="chatbanner">ChatBanner</a>
<h3>Set your chat options</h3>
<label>Name:</label> <br>
<input type="text" ng-model="chatName" > <br>
<p>{{chatName}}</p>
<label>Description:</label> <br>
<input type="text" ng-model="chatDes" > <br>
<label>Width:</label> <br>
<input type="text" ng-model="myWidth"> <br>
<label>Height:</label> <br>
<input type="text" ng-model="myHeight"> <br>
<h3>Style your chat</h3>
<label>Header background:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
<label>Text color header:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColor"> <br>
<label>Text color description:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColordes"> <br>
<h3>Social media</h3>
<p>Want to add social media?</p>
<input type="checkbox" ng-model="showsocialpanel"/>
<label>Yes</label>
<input type="checkbox"/>
<label>No</label> <br/>
<div ng-show="showsocialpanel">
<h3>Style your footer:</h3>
<label>Powered By:</label> <br/>
<input type="text" ng-model="poweredBy"/> <br/>
<label>Your background footer:</label> <br/>
<input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>
<h3>Add your social</h3>
<input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
<input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
<br/>
<input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
<input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
<br/>
<input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
<input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>
</div>
</div>
</div>
<div class="col-lg-10">
<div ui-view></div>
</div>
</div>
</div>
The fullscreen HTML:
<div id="chat_box" ng-style="{width:myWidth}">
<div id="chat_top">
<div id="chat_avatar">
</div>
<div id="chat_header" ng-style="{background: myBackground}">
<h4 ng-style="{color:myColor}">{{chatName}}</h4>
<p ng-style="{color:myColordes}">{{chatDes}}</p>
</div>
</div>
<div id="chat_container">
<div id="history_div" ng-style="{height:myHeight}">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" rows="0"
type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>
<div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
<ul>
<li ng-show="facebookiconshow">
<a ng-href="{{facebooklink}}" target="_blank">
<img src="assets/img/facebook.png" alt="Facebook Icon"/>
</a>
</li>
<li ng-show="twittericonshow">
<a ng-href="{{twitterlink}}" target="_blank">
<img src="assets/img/twitter.png" alt="Twitter Icon"/>
</a>
</li>
<li ng-show="linkediniconshow">
<a ng-href="{{linkedinlink}}" target="_blank">
<img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
</a>
</li>
</ul>
</div>
</div>
</div>
The JS:
var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('fullscreen', {
url: "/fullscreen",
templateUrl: "fullscreen.html",
controller:"myCtrl"
})
})
bmiChatbuilder.controller('myCtrl', function ($scope) {
$scope.chatName = 'Type your text tittle here';
$scope.chatDes = 'Type your description here';
$scope.myWidth = '800px';
$scope.myHeight = '400px';
})
Thanks in advance for your help.
Router creates new myCtrl instance with it's own scope. You can create service to share data between two controllers or create another controller type for /fullscreen.