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" );
Related
I have this .cshtml page to login
<main id="login" ng-controller="loginCtrl">
<div id="page" class="full-screen min-height">
<div id="page-inner">
<div id="login-page-content" class="min-height-inner container-padding">
<div class="container center text-center">
<h1>
<label>Login</label>
</h1>
<div id="login-form">
<div>
<input type="email" id="Username" placeholder="UserName/Email" class="login-input" required="required" />
</div>
<div>
<input type="password" id="Username" placeholder="Password" class="login-input" required="required" />
</div>
<div>
</div>
<div class="cf">
<input type="submit" value="Login" class="login-submit" ng-click="clicked()"/>
</div>
</div>
Forgot Details ?
</div>
</div>
</div>
</div>
and this is my controller.js
angular.module('userManagement')
.controller('loginCtrl', ['$scope', '$http','$window', function ($scope, $http,$window) {
$scope.clicked = function () {
window.location = '#/join';
}
}
]);
and also my app.js
$routeProvider.caseInsensitiveMatch = true;
$routeProvider.when('/login', {
templateUrl: 'Account/login',
controller: 'loginCtrl'
});
I want to be able to go to another page when i click the button, vallidations are not important for now I just want the buttons to go to the page when i click a button, with the above code it takes me to
http://localhost:52653/Account#!/login#%2Fjoin
You should use the angular route system or ui.router :
ngRoute and location
$location.path( "#/join" );
ui.router
$state.go(path_to_join_state);
I have a controller for signing in firebase
$scope.addUser = function() {
firebase.auth().signInWithEmailAndPassword($scope.Email,$scope.Password).then(function(authData) {
authenticated = true;
console.log("Logged in as:", authData.uid, authenticated);
$location.path("/user_manual");
}).catch(function(error) {
authenticated = false;
console.error("Authentication failed:", error);
$location.path("/");
});
};
And a login.html form
<center><h1>Login</h1></center>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input class="form-control" id="Email"
ng-model="Email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="Password"
ng-model="Password" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label"></label>
<div class="col-sm-4">
<a ng-click="addUser()" class="btn btn-small btn-primary">Login</a>
</div>
</div>
</form>
</div>
As I click on login button it doesn't load user_manual.html for the first time but clicking it on three times it loads user_manual.
The same is with logout button:
I have logout function :
scope.logout = function(){
$window.alert("Do you really want to logout?");
firebase.auth().signOut().then(function() {
$location.path("/");
}).catch(function(error) {
});
And a logout button as:
<a ng-click="logout()" ng-confirm-click="Do you want to logout" class="btn btn-small btn-primary">logout</a>
It also redirects to $location.path("/") on clicking the button twice.
Here is the main controller app.js:
var app = angular.module('myApp',['ngRoute','firebase','ng-fusioncharts','chart.js','720kb.datepicker']);
var config = {
*******************************
};
firebase.initializeApp(config);
var user = firebase.auth().currentUser;
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'UserAdd',
templateUrl: 'views/users/user_login.html'
})
.when('/user_manual', {
controller: 'UserManual',
templateUrl: 'views/user_manual/user_manual.html'
})
.otherwise({
redirectTo: '/'
});
});
Why the buttons not work on a single click action?
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 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 have two tiny projects, both use essentially the same setup, one returns a model value one returns the model value as undefined. At this point I am lost as to why these two examples are behaving differently. I checked the failing example, and the model correctly populates
Successful Behavior
Partial
<div class="row">
<div class="col-md-4 .col-md-offset-4 content-pane no-margin">
<h4>Input Your Inquiry</h4>
<form ng-submit="submit(invoice)">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">Invoice Number</span>
<input id="who" type="text" class="input-xlarge" ng-model="invoice.number">
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">PO Number</span>
<input id="who" type="text" class="input-xlarge" ng-model="invoice.po">
</div>
</div>
</div>
<input type="submit">
</form>
</div>
<div ng-if="status" class="col-md-4 .col-md-offset-4 content-pane no-margin">
<h4>Invoice Status</h4>
<div>{{status}}</div>
</div>
</div>
App.js
app.config(function($routeProvider){
$routeProvider
.when('/',
{
templateUrl: 'app/partials/inquiry-input-form.html',
controller: 'MainCtrl'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
app.controller('MainCtrl', function($scope,formsResults) {
$scope.submit = function() {
var invoiceNum = $scope.invoice.number;
var po = $scope.invoice.po;
formsResults.getInvoiceStatus(po,invoiceNum).success(function(data) {
var status = data.records;
if (angular.isUndefined(status)) {
$scope.status = 'Pending Reciept or Entry';
} else {
$scope.status = status[0].field_124208[0];
}
});
};
});
app.factory('formsResults', function($http) {............
Returning Model as undefined in controller
Partial
<tabset>
<tab active=workspace.active>
<tab-heading>
Search All Fields
</tab-heading>
<div>
<br /><br />
<form class="form-horizontal" ng-submit="submitAll(searches)">
<div class="form-group">
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" class="form-control input-md" ng-model="searches.term">
<span class="help-block">Enter the term you wish to search on.</span>
{{searches.term}}
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</tab>
<tab>
<tab-heading>
Search By Field
</tab-heading>
<div>
<br /><br />
<form class="form-horizontal" ng-submit="submitSpecific(search)">
<div class="form-group">
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="4">Country</option>
</select>
<span class="help-block">Enter the field you wish to search on.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" class="form-control input-md">
<span class="help-block">Enter the term you wish to search on.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</tab>
</tabset>
App.js
var app = angular.module ('app',['ngRoute','ngSanitize','ui.bootstrap','dialogs.controllers','dialogs']);
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/',
{
templateUrl: 'app/partials/home_tpl.html',
controller: 'HomeCtrl'
})
.when('/search',
{
templateUrl: 'app/partials/search-form.html',
controller: 'SearchCtrl'
})
.when('/add-sop',
{
templateUrl: 'app/partials/support-process.html',
controller: 'EditSOPCtrl'
})
.otherwise(
{
redirectTo: '/'
})
});
app.controller('HomeCtrl', function($scope) {
});
app.controller('SearchCtrl', function($scope,formsSopSearchCriteria) {
$scope.submitAll = function() {
var searchTerm = $scope.searches.term;
console.log(searchTerm);
var searchPackage={
"offset":0,
"limit":0,
"fields":["record_id","dt_created","created_by","dt_updated","updated_by",149654,149655,149692],
"filters":{"and":[{"field_id":"149655","operator":"contains","value":searchTerm}]},
"sort":{}
};
searchPackage=JSON.stringify(searchPackage);
$scope.searchPackage = searchPackage;
formsSopSearchCriteria.getMatches(searchPackage).success(function(data) {
$scope.sopRecords = data.records;
});
};
$scope.submitSpecific = function() {
var searchPackage = ""
searchPackage=JSON.stringify(searchPackage);
$scope.searchPackage = searchPackage;
formsSopSearchCriteria.getMatches(searchPackage).success(function(data) {
$scope.sopRecords = data.records;
});
};
});
app.factory('formsSopSearchCriteria',function($http) {........
Any ideas? My understanding is that it as an issue of scope. But in the failing example, the partial I provide is mapped to the SearchCtrl in the routeProvider. As a result the model should be available in the controller, just like the example that is working. I suspect I must be missing something, but I am not clear what I am missing.
You need to create $scope.searches as an empty object on initialization:
app.controller('SearchCtrl', function($scope,formsSopSearchCriteria) {
$scope.searches = {};
Or for clarity:
$scope.searches =
{
term: ''
};
If you don't, it will not be created until the first input is entered (I believe it is the $parse service that the ng-model directive uses that creates the searches object in this case).
The problem is that the object might not be created in the scope you want it to.
The reason it works in the first case is because there are no child scopes, so the invoice object is created in the controller scope.
In the second case there is one or many child scopes (probably from the tabs, I haven't dug any deeper into it), so the searches object is created in one of those instead.
Due to how prototypical inheritance works in Javascript, if you predefine the objects in the controllers' scopes, the properties will be created correctly.