I am new to angularjs...i am trying to navigate from login page to next page using router functionality....My login page is as follows
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
{{nameis}}
</form>
</div> <!-- /container -->
</div>
<div ng-view></div>
</body>
my app.js file is as follows
'use strict';
//Define Routing for app
var applog = angular.module('myApp',[]);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: '/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and my controller js file is as follows
applog.controller("LoginController", function($scope, $location,$window){
$scope.nameis = "Test";
$scope.go = function ( path ) {
$location.path( path );
};
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
Honestly i dont know where i am going wrong...the problem is i am getting the url of the page correctly in the url tab but i need to press enter to go to that page...i mean the page is not getting refreshed it just changes the existing url and just sits in the same page(i.e login page)....can someone plz help....
Add angular-route library too.In latest angular versions, it is available as a separate module.So, you need to inject 'ngRoute' for using $routeProvider service
index.html:
<html ng-app='myApp'>
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
</head>
<body>
<div ng-view></div>
<script type="text/javascript">
'use strict';
//Define Routing for app
var applog = angular.module('myApp', ['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controller: 'LoginController'
})
.when('/navAng', {
templateUrl: '/navAng.html',
controller: 'navAngController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
applog.controller("LoginController", function($scope, $location, $window) {
//$scope.nameis = "Test";
$scope.go = function(path) {
$location.path(path);
};
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/navAng");
} else {
$scope.message = "Error";
$scope.messagecolor = "alert alert-danger";
}
}
});
// next page controller
applog.controller("navAngController", function($scope, $location, $window) {
$scope.msg= "Success";
});
</script>
</body>
</html>
Use separate html for login. Because, you are using ng-view in index.html
Login.html:
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b>
</button>
{{nameis}}
</form>
</div> <!-- /container -->
</div>
This is another page to navigate, when login and password is correct
navAng.html:
<div> {{msg}} </div>
Related
I am working with Angular JS and created a simple login form and also implemented routing to route to next page after successful login.
But when I am trying to implement conditional routing, after login I am able to route to next page in my app but the page contents are not being displayed.
Below shown is my application structure.
I have created a controller.js file , a login.html and dashboard.html files
controller.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : "login.html"
})
.when('/dashboard', {
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
} else{
templateUrl : "dashboard.html"
}
}
}
})
.otherwise({
redirectTo : '/'
});
});
app.controller('loginCtrl', function($scope ,$location , $rootScope) {
$scope.submit = function(){
if($scope.username == 'asd' && $scope.password == 'asd' ){
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else
{
alert("Invalid username and password")
}
};
});
login.html:
<div class="col-sm-8 col-sm-push-4">
</div>
<div class="col-sm-4 col-sm-pull-4">
<div ng-controller="loginCtrl">
<br><br><br><br><br><br>
<h3>Login </h3><hr>
<form action="/" id="myLogin">
<div class="form-group">
<label for="username">UserName:</label>
<input type="text" class="form-control" id="username" placeholder="Enter UserName" ng-model="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" ng-model="password">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="button" class="btn btn-default" ng-click="submit()">Login</button>
</form>
</div>
</div>
dashboard.html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MY APP</a>
</div>
</div>
</nav>
<br/>
<nav class="navbar navbar-inverse" style="margin: auto;">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
This is my output window
can anybody help me in resolving this error...!
Try:
.when('/dashboard', {
templateUrl: 'dashboard.html',
resolve: {
"check" : function($location, $rootScope) {
if(!$rootScope.loggedIn) {
$location.path('/');
}
}
}
})
Here is the working plunkr
Few other points to consider in your code:
use controller name in config phase itself rather than writing inside html as ng-controller
Ex:
.when('/', {
templateUrl : "login.html",
controller : 'loginCtrl'
})
Remove action from <form> tag because you are handling via angularJS & use ng-submit.
ex:
<form id="myLogin" ng-submit="submit()">
Remove $rootScope.loggedIn, as rootScope variables are discouraged, rather use factories
I try to create a login app using Angularjs that storing information in $cookies. Once the user is logged in, they don't have to log in again:
This is login form:
<form action="/" id="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="username" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="password" required />
</div>
<div class="form-actions">
<button id="submit_btn" type="button" ng-click="submit()" class="btn btn-danger">Login</button>
</div>
</form>
This is the app.js
var app = angular.module('mailApp', ['angular.chosen','ngRoute','ngCookies'], function(){});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
}).
when('/logs/', {
templateUrl: 'index.html',
controller: 'mailController',
}).
otherwise({
redirectTo: '/'
});
}]);
app.controller('mailController', function($scope, $http,$routeParams,$location,domainService, $rootScope, $location, $cookies)
{
$rootScope = false;
$scope.submit = function (info) {
if($scope.username == '123' && $scope.password == '123') {
$rootScope.loggedIn = true;
$location.path('/logs/');
}
else{
alert('Wrong authentication!');
}
}
//...
}
But I am new to angularjs and not really got to $cookies.
Any help would be appreciated!
Thanks, guys!
How to navigate from one page to another page. Assume i have a login page, after entering username and password fileds while click on submit button it needs to validate and if both username and password is correct it needs to go home page. Home page content needs to display. Here i am posting code. In Browser url is changing but content is not changing.
index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body >
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
home.html
Hello I am from Home page
test.js
var applog = angular.module('myApp',['ngRoute']);
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
applog.controller("LoginController", function($scope, $location) {
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/home" );
} else {
alert('invalid username and password');
}
};
});
applog.controller("HomeController", function($scope, $location) {
});
As #dfsq said you need an ng-view for placing there your new view. Of course if you add your ng-view in the index you will see the content of the index and of home. The solution here is creating two partial views, one for the log in authentication and the other for home. The index file should contain only the ng-view and those elements you want to keep constant in your whole app (menu, footer...)
Here is the code for what I'm saying:
index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src='test.js' type="text/javascript"></script>
</head>
<body >
<div ng-view></div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
Your new route configuration
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
})
$routeProvider.when('/', {
templateUrl : 'auth.html',
controller : 'LoginController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
and put your login code inside the auth.html file
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
Have in mind that if you place the test.js script in index it will be in the whole app.
Hope it helps
Index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body >
<div ng-view></div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
test.js
var applog = angular.module('myApp',['ngRoute']);
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
})
$routeProvider.when('/', {
templateUrl : 'login.html',
controller : 'LoginController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
applog.controller("LoginController", function($scope, $location) {
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/home" );
} else {
alert('invalid username and password');
}
};
});
applog.controller("HomeController", function($scope, $location) {
});
login.html
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
index.html
This is my index page. It gets loaded when my application runs, it contains prefilled values by default. I want to route to home page when a user submits the form after clicking the submit button. but i am getting an error [injector:moduler] this means that applications has failed to instantiate a module. below is my app.js file which contains a module and a controller kindly help me out to rectify this error.
<body>
<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">
<div>
<form name="userForm" ng-submit="submitForm()" novalidate>
<h1>Login Form</h1> //a html form with validations in angular
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" value="ank#gmail.com">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</body>
app.js
//this contains the modules and controllers.
'use strict';
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.submitForm = function() {
var username = $scope.user.email;
var password = $scope.user.password;
if(username == "ank#gmail.com" && password=="1234")
{
if ($scope.userForm.$valid) {
alert('thank you for submitting your form');
window.location.href="home.html";
}
}
else
{
alert("incorrect username and password");
}
};
});
//code for routing to another page after login
validationApp.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/index', {
templateUrl: 'index.html',
controller: 'loginController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'RegisterController'
})
.otherwise({
redirectTo: '/index'
});
}]);
You have forgotten to include ngRoute module.
var validationApp = angular.module('validationApp', ['ngRoute']);
check here for more information about AngularJS Routes
app.js
var validationApp = angular.module('validationApp',['ngRoute']);
validationApp.config(
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'mainController'
})
.otherwise({
redirectTo: '/main.html'
});
});
// create angular controller
validationApp.controller('mainController', function($scope,$location,$window) {
$scope.submitForm = function() {
var username = $scope.user.email;
var password = $scope.user.password;
var remember = $scope.user.rememberme;
if(username == "ank#gmail.com" && password=="1234")
{
if ($scope.userForm.$valid) {
alert('thank you for submitting your form');
$location.path("/home");
}
}
else
{
alert("invalid username and password");
}
};
});
i have also made changes in my index.html file
</head>
<body>
<div ng-app="validationApp">
<ng-view></ng-view>
</body>
</html>
i have created another page for displaying my login form
main.html
<div class="container">
<div class="row">
<div>
<form name="userForm" method="post" ng-submit="submitForm()" novalidate>
<h1>Login Form</h1>
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" value="ank#gmail.com">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
</div>
<div class="form-group">
<input type="checkbox" ng-model="user.rememberme"
ng-true-value="yes" ng-false-value="no" > Remember Me
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
I know i have already asked the same question but i am getting nowhere with this problem..I am trying to navigate from login page to next page...
login.html
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
</form>
</div> <!-- /container -->
</div>
</body>
my app file is
'use strict';
//Define Routing for app
var applog = angular.module('myApp',['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'html/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: 'html/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and the controller is
applog.controller("LoginController", function($scope, $location){
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "html/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
now when i click on the login button the url is getting generated but it just changes the url in the url tab and nothing happens i.e the page is not getting refreshed or navigating to the next page....can someone help plz...
just enter the path not with .html, like this
$location.path( "/login" );