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>
Related
I am using angular js and angular js ui-route. I am trying to pass a registration POST form variables from a view passed to angular and send to PHP using $http.POST.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Hostelry Services</title>
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/custom.css">
</head>
<body ng-app="App">
<!-- Navigation Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#!/">Hostelry Service</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Hostelries</li>
<li>Compare</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div ui-view></div>
<!-- Library Scripts -->
<script type="text/javascript" src="./bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./bower_components/angular-datepicker/dist/angular-datepicker.min.js"></script>
<!-- JS route -->
<script type="text/javascript" src="./js/homeroute.js"></script>
</body>
</html>
here is my register.html
<div class="row" style="padding-top: 100px;">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading" style="padding-left: 170px; font-size: 20px;">Register</div>
<div class="panel-body">
<form method="POST" ng-submit="register()">
<input class="form-control" ng-model="firstname" id="firstname" type="text" placeholder="Firstname"><br>
<input class="form-control" ng-model="middlename" id="middlename" type="text" placeholder="Middlename"><br>
<input class="form-control" ng-model="lastname" id="lastname" type="text" placeholder="Lastname"><br>
<input class="form-control" ng-model="age" id="age" type="text" placeholder="Age"><br>
<select class="form-control" id="sel1" ng-model="gender">
<option></option>
<option>Male</option>
<option>female</option>
</select><br>
<input class="form-control" ng-model="address" id="address" type="text" placeholder="Address"><br>
<input class="form-control" ng-model="nationality" id="nationality" type="text" placeholder="Nationality"><br>
<input class="form-control" ng-model="username" id="username" type="text" placeholder="username"><br>
<input class="form-control" ng-model="user_password" id="user_password" type="Password" placeholder="Password"><br>
<input class="form-control" ng-model="user_email" id="user_email" type="text" placeholder="Email"><br>
<button type="submit" id="submitbutton" type="submit" class="btn btn-primary btn-block">Submit</button>
<p ng-show="user">{{user}}</p>
</form>
</div>
</div>
</div>
here is my homeroute.js
'use strict';
var application = angular.module('App', ['ui.router']);
application.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('login', {
url: '/login',
templateUrl: './views/login.html'
})
.state('/', {
url: '/',
templateUrl: './views/home.html'
})
.state('signup', {
url: '/signup',
templateUrl: './views/register.html',
controller: 'registercontroller'
});
}
]);
application.controller('registercontroller', ['$scope', '$http', function($scope, $http) {
$scope.register = function() {
var firstname = $scope.firstname;
var middlename = $scope.middlename;
var lastname = $scope.lastname;
var age = $scope.age;
var gender = $scope.gender;
var address = $scope.address;
var nationality = $scope.nationality;
var username = $scope.username;
var password = $scope.user_password;
var email = $scope.user_email;
$http({
url: './services/loginsubmit.php',
method: 'POST',
headers: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
firstname: firstname,
username: username
}
}).then(function(data) {
});
}
}]);
here is my loginsubmit.php
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
$response = [];
$response['user'] = $_POST['firstname'];
echo json_encode($response);
?>
I dont know if the method I used in my $http was right. When I click my submit button it returns me this:
it returns this in network tab
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 can't use $scope in ionic, it seems that's $scope is not working.
Let's see very simple example :
App.js :
angular.module('TestApp', ['ionic','TestCtrl'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller : "login"
});
$urlRouterProvider.otherwise('/login');
});
Login.js :
angular.module('TestCtrl',[])
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
console.log($scope.email.length);
}
});
Index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="controllers/login.js"></script>
</head>
<body ng-app="TestApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
Login.html :
<ion-view>
<ion-header-bar class="bar-calm">
<h1 class="title" ng-model="test">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="postLogin()" name="loginForm">
<div class="list list-inset">
<label class="item item-input" ng-class="giveClass()">
<i class="icon icon-fixed-width ion-at placeholder-icon"></i>
<input type="email" name="email" ng-model="email" placeholder="Veuillez entrer votre adresse email" required/>
</label>
<label class="item item-input">
<i class="icon ion-key icon-fixed-width placeholder-icon"></i>
<input type="password" name="password" ng-model="password" placeholder="Veuillez entrer votre mot de passe" required/>
</label>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit">Se connecter</button>
</label>
<label class="item">
<button class="button button-block button-royal" type="submit">S'enregistrer</button>
</label>
</div>
</div>
</form>
</ion-content>
</ion-view>
When I execute this application console (console.log(...) in login.js) return
"Cannot read property 'length' of undefined"
It is not sure, where you plan to set your model property email. I mean, the 'email', which you pass to the ng-model in the Login.html:
<ion-view>
...
// here is expected model 'email'
<input type="email" name="email" ng-model="email"
placeholder="Veuillez entrer votre adresse email" required/>
...
In case, that angular won't find it - it will create that, but on the $scope. And the scope will be the first param not the second here Login.js:
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
// here we can expect 'email' to be created for us
// but not on $rootScope
// it will be available on $scope
console.log($rootScope.email.length);
So, that all means:
there is no explict set of the $rootScope.email
nor of the $scope.email
because we used ng-model="email" we can expect, that angular will create such property for us, but on $scope, not on $rootScope
And that all together will end up with
Cannot read property 'length' of undefined
if we use $rootScope.email.length, or even $scope.email.length. Both of these should be init first or checked if they exist:
Solution: the way to go would be to initiate such property test (it is not needed, but we know what is happening). And even better, to use some Model (and have a dot - check more here: Model in a modal window in angularjs is empty)
.controller('login', function($scope,$rootScope) {
$scope.Model = {};
// if possible - init it,
// $scope.Model.email= "init value";
$scope.giveClass = function() {
// if we need user to init that,
// we have to check if that value was set
if($scope.Model.email){
console.log($scope.email.length);
}
}
and the view
ng-model="Model.email"
Thanks to Radim, I need to use a dot in ng-model, as an object ,and input-type="mail" will bound only if email match to regexp
So working example is :
Apps.js:
angular.module('TestApp', ['ionic','TestCtrl'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller : "login"
});
$urlRouterProvider.otherwise('/login');
});
Login.js:
angular.module('TestCtrl',[])
.controller('login', function($scope,$rootScope) {
$scope.Model = {};
$scope.giveClass = function() {
if($scope.Model.email){
console.log($scope.email.length);
}
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="controllers/login.js"></script>
</head>
<body ng-app="TestApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
Login.html:
<ion-view>
<ion-header-bar class="bar-calm">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="postLogin()" name="loginForm">
<div class="list list-inset">
<label class="item item-input" ng-class="giveClass()">
<i class="icon icon-fixed-width ion-at placeholder-icon"></i>
<input type="text" name="email" ng-model="Model.email" placeholder="Veuillez entrer votre adresse email" required/>
</label>
<label class="item item-input">
<i class="icon ion-key icon-fixed-width placeholder-icon"></i>
<input type="password" name="password" ng-model="password" placeholder="Veuillez entrer votre mot de passe" required/>
</label>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit">Se connecter</button>
</label>
<label class="item">
<button class="button button-block button-royal" type="submit">S'enregistrer</button>
</label>
</div>
</div>
</form>
</ion-content>
</ion-view>
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>
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" );