How to redirect to other html page using angularjs ng-route - angularjs

Whwn I click on signUp button in signUp.html page,it should redirect to signIn.html page.But I'm unable to redirect to signIn.html page.Can anyone please help me out regarding this issue ...
My signIn.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div class="container" id="wrapper" align="center">
<div>
<img id="imgDiv" src="images/favicon.png">
</div>
<div id="loginDiv">
<h3>LogIn</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email"
placeholder="Email" /><br> <br> <input type="password"
class="resizedTextbox" ng-model="password" placeholder="Password" /><br>
<br> <input type="submit" class="resizedBtn" value="LogIn">
<div id="signUpDiv">
Not a member yet? SignUp Now
</div>
</form>
</div>
</div>
</body>
My signUp.html:
<html ng-app="Sample">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/custom.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-animate.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/script.js"></script>
</head>
<body>
<div class="container" id="wrapper1" align="center">
<div>
<img id="logoDiv" src="../images/favicon.png">
</div>
<div id="loginDiv">
<h3>Sign up</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
<input type="text" class="resizedTextbox" placeholder="Password" /><br><br>
<input type="text" class="resizedTextbox" placeholder="Verify Password" /><br><br>
<a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
</button></a>
</form>
</div>
</div>
</body>
</html>
My script.js :
var app = angular.module('Sample', [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/signUp', {
// controller :'signUpController',
templateUrl : '../signIn.html'
})
} ]);


Use this after your registration success.
$location.path('/signinpath');
For this you need to inject $location service

Related

how to solve $injector:unpr while post data in angular js and laravel

I am new to angular js. I try to create a simple page to connect angular js and backend laravel database. I keep receiving an error as an Error: $injector:unpr
Unknown Provider. I don't know what was wrong in the code. I hope anyone helps me to solve the issue. Thanks in advance
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,Comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});

Used wrong name of factory, comment instead of Comment
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
</body>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
</script>
</html>

Angularjs 1 form validation issue

I am using Angularjs 1 in my project.i am validating the form inside angular,so i am using form.$valid to check the form submitted is valid or not,but it is not working properly,not sure what i am missing
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp",[]);
angular.module("myApp").controller("SampleController",[function(){
this.user = {}
this.submitForm = function(form){
if(form.$valid){
window.alert("Valid")
}else{
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div> <!--/ container -->
</body>
</html>
I am always getting the alert message from the else part which states form invalid

Form directive is bounded to scope, so you need to write it as $scope.sampleForm.$valid. Since your name is dynamic, you can use a bracket notation: $scope[form].$valid. But either way you need to inject $scope into your controller.
Here is a demo:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp", []);
angular.module("myApp").controller("SampleController", ['$scope', function($scope) {
this.user = {}
this.submitForm = function(form) {
if ($scope[form].$valid) {
window.alert("Valid")
} else {
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div>
<!--/ container -->
</body>
</html>

You are passing form as a string in ng-click method not a form Object.So u have to pass the form object without Single-cotts.
ng-click="sm.submitForm('sampleForm')" to ng-click="sm.submitForm(sampleForm)"

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

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>

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>

Why does expression in ng-disabled not work?

What does this:
ng-disabled="login == ''"
not disable the button when the input field login is empty?
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body ng-controller="mainController">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
LOGIN
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" ng-model="login">
</div>
<div class="form-group">
<label for="inputPassword">Passowrd</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" ng-disabled="login == ''" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', function ($scope) {
});
</script>
</body>
</html>

Create a form object in your controller which would hold each model property/field, and then check if the field (login) equates and empty string.
...
<input type="text" class="form-control" id="login" ng-model="form.login">
...
<button type="submit" ng-disabled="form.login === ''" class="btn btn-primary">Login</button>
....
Controller
mainApp.controller('mainController', function ($scope) {
$scope.form = {
login: ''
}
});
JSFIDDLE

Controller is not working in AngularJS

I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.

Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});

just do following changes
$scope.Click = function()
{
//your logic
}

Resources