Angular Router is not working in my application. I have a login form, Angular controller, and Welcome page. When I pass the login details and click on submit button, Angular is not routing to welcome.html page.
Below is the code snippet.
Login Form(AngularForm.html)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="LoginCtrl.js"></script>
</head>
<body ng-app="myAngular">
<div ng-controller="LoginController">
<form action="/" id="myForm">
UserName:
<input type="text" id="username" ng-model="username">
<br> Password:
<input type="password" id="passowrd" ng-model="password">
<br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
</body>
</html>
Login Controller(LoginCtrl.js)
var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'AngularForm.html'
})
.when('/welcome',{
templateUrl: 'welcome.html'
})
.otherwise({
redirectTo: '/'
});
});
function UserLogin($scope,$location)
{
$scope.submit = function(){
var uname=$scope.username
var pwd=$scope.passowrd
if($scope.username == 'admin' && $scope.password == 'admin')
{ $location.path('/welcome'); }
}
}
App.controller('LoginController',UserLogin);
Welcome Page(welcome.html)
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Login Successful!!</h1>
</body>
</html>
I think you need to separate the login content from the main AngularForm.html file
AngularForm.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="LoginCtrl.js"></script>
</head>
<body ng-app="myAngular">
<div ng-view></div>
</body>
</html>
make sure to add the <div ng-view></div> so that partial routes lay on top of this.
make the login HTML like this
login.html
<div ng-controller="LoginController">
<form action="/" id="myForm">
UserName:<input type="text" id="username" ng-model="username"><br>
Password:<input type="password" id="passowrd" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
add a new state called login in the config
JS
var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'AngularForm.html'
})
.when('/login',{
templateUrl: 'login.html'
})
.when('/welcome',{
templateUrl: 'welcome.html'
})
.otherwise({
redirectTo: '/login'
});
});
function UserLogin($scope,$location)
{
$scope.submit = function(){
var uname=$scope.username
var pwd=$scope.passowrd
if($scope.username == 'admin' && $scope.password == 'admin')
{ $location.path('/welcome'); }
}
}
App.controller('LoginController',UserLogin)
Related
I am new to AngularJs and try my first project into it. Using Angular.min.js and angular-route.js 1.6.9 version. While hitting the http://localhost/myAngular/login/main.html in browser getting Uncaught Error:
[$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=ReferenceError%3A%20otherwise%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2FmyAngular%2Flogin%2Fmain.html%3A32%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A44%3A390)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A279)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A418%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)%0A%20%20%20%20at%20we%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A21%3A1)
main.html:
<!DOCTYPE html>
<html lang="Eng">
<head>
<title>Login Demo</title>
<script src="angular.min.js"> </script>
<script src="angular-route.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-view>
</div>
</body>
controller.js
var app = angular.module( 'mainApp', ['ngRoute'] );
app.config( function( $routeProvider ) {
$routeProvider
.when( '/main', {
template: 'Welcome User!'
//templateUrl: 'login.html'
})
.when('/anotherPage', {
template: 'Welcome User, again!'
//templateUrl: 'dashboard.html'
})
otherwise({
redirectTo: '/'
});
});
app.controller( 'loginCtrl', function( $scope, $location) {
$scope.submit = function(){
var userName = $scope.userName;
var password = $scope.password;
if(userName == "admin" && password == "admin"){
$location.path = '/dashboard';
}
console.log( userName +" "+ password);
};
});
===========================================================
login.html
<div ng-controller="loginCtrl">
<div>
<form action="/" id="myLogin">
User Name: <input type="text" name="userName" ng-model="userName"/>
<br>br>
Password: <input type="password" name="password" ng-model="password"/>
<br><br>
<button type="button" ng-click="submit()">Submit</button>
</form>
</div>
</div>
Try:
$routeProvider
.when( '/main', {
template: 'Welcome User!'
//templateUrl: 'login.html'
})
.when('/anotherPage', {
template: 'Welcome User, again!'
//templateUrl: 'dashboard.html'
})
.otherwise({ // <-- you were missing "." here.
redirectTo: '/'
});
});
Also, try to use "angular.js" rather than angular.min.js , you'll get readable and easily understandable error messages
Side Note: Try to use controller in $routeProvider itself rather than writing it the way you have written in login.html. Refer the config of my plunkr
Here is the working code
Update
As per your new code, you need to do as below
$location.path('/dashboard');
Refer the plunkr. I have made the respective changes in it too
I'm new to AngularJS and I tried creating a sample login page and I tried routing to other page on successful login but nothing shows up in ng-view and my code has no error. What could be the problem?
index.html
<html>
<head>
<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="maincontroller.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
controller
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'maincontroller'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise('/', {
templateUrl: '/'
})
});
app.controller('maincontroller', function($scope, $location) {
$scope.submit = function($scope) {
var username = $scope.username;
var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
$location.path('/dashboard');
} else {
windows.alert('wrong stuff');
}
};
});
login.html
<div ng-controller="maincontrol">
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
You should mention ng-app in your HTML to make this an Angular app.
<html ng-app='myapp'>
<head>
<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="script.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Maincontroller.js
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'maincontroller'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise('/', {
templateUrl: '/'
})
});
app.controller('maincontroller', function($scope, $location) {
$scope.submit = function() {
var username = $scope.username;
var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
$location.path('/dashboard');
} else {
windows.alert('wrong stuff');
}
};
});
$scope is already injected in to the controller and you are passing that as a parameter to your submit function which is undefined since you did not pass anything on submit.
Login.html
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
Since you are injecting controller on routing, You don't have to use ng-controller in your login.html. It makes the controller execute again.
Check this Plunker: https://plnkr.co/edit/8jPJ7WOa3ixjqeRU8bpg?p=preview
I will recomment to use ng-app in body .
<html>
<head>
<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="maincontroller.js"></script>
</head>
<body ng-app="myapp">
<div ng-view>
</div>
</body>
</html>
also User maincontroller in login page
<div ng-controller="maincontroller">
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
I'm getting the following error on the chrome console:
The controller with the name 'registerCtrl' is not registered.
for some reason, my registerCtrl is not being recognized when routing to the root or /register.
for some reason, my registerCtrl is not being recognized when routing to the root or /register.
Index.html
<html ng-app="testApp">
<head>
<base href="/">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/register/registerCtrl.js"></script>
<script src="app/adminDashBoard/adminDashBoardCtrl.js"></script>
<script src="app/services/hubProxy.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="app/directives/alerts/alertDir.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js(boostrap)
(function () {
var app = angular.module('testApp', ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/app/register/register.html",
controller: 'registerCtrl'
})
.when("/register", {
templateUrl: "/app/register/register.html",
controller: 'registerCtrl'
})
.when("/adminDashBoard", {
templateUrl: "/app/adminDashBoard/adminDashBoard.html",
controller:'adminDashboardCtrl'
})
});
})();
registerCtrl
(function () {
var registerController = function ($scope, hubProxy) {
var hub = hubProxy("", "UserRegisterHub");
$scope.registerUser = function () {
// call hub and pass these details
if ($scope.userName !== "" && $scope.emailAddress !== "") {
hub.invoke("RegisterUser", function (result) {
// confirm user use boostrap alert
$scope.showAlert = true;
});
}
}
$scope.userName = "yoyoy";
$scope.email = "";
};
angular.module("testApp").controller('RegisterCtrl', registerController);
})();
register.Html
<div>
<a ng-href="adminDashBoard">Admin Dashboard</a>
<alert showAlert="true"></alert>
<label>{{userName}}</label>
<form name="register">
<div>
<label>Name</label>
<input type="text" required="" ng-model="userName" />
</div>
<div>
<label>Email</label>
<input type="text" required="" ng-model="email" />
</div>
<div>
<input type="submit" ng-click="registerUser()" value="submit" />
</div>
</form>
</div>
Any ideas? thanks
hello i'm working on my small project using angular , during the creating my second controller with second service i have a problem , when i inject my own service as a dependency in the controller it dont work and all of expressions in html file are not resolved (before adding a service all works) here is my code
after adding AccSrv to AccCtrl the problem occurs
angular.module('myApp', ['ngRoute', 'membersService']).config(
['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'MembersCtrl'
}).when('/account', {
templateUrl: 'partials/account.html',
controller: 'AccCtrl'
}).otherwise({
redirectTo: '/home'
});
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>myApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/screen.css" type="text/css"/>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-route.js"></script>
<script src="js/libs/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services/MemberSrv.js"></script>
<script src="js/controllers/MemberCtrl.js"></script>
<script src="js/services/AccSrv.js"></script>
<script src="js/controllers/AccCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AccCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>{{hello}}</p>
<p>{{world}}</p>
<form name="accForm" ng-submit="createAccount()">
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" ng-bind="newAccount.email"/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password" ng-bind="newAccount.password"/>
</div>
<div>
<input type="submit" id="registerAccount" value="Sign-up"/>
</div>
</form>
<form name="accForm" ng-submit="getAccountByEmail()">
<div>
<label for="getemail">CheckEmail</label>
<input type="text" name="getemail" id="getemail" ng-bind="ExistingAccount.email"/>
</div>
<div>
<input type="submit" id="check" value="Check"/>
</div>
</form>
<table>
<tr>
<td>{{ExistingAccount.id}}</td>
<td>{{ExistingAccount.email}}</td>
<td>{{ExistingAccount.password}}</td>
<td>{{ExistingAccount.creationDate}}</td>
</tr>
</table>
</body>
</html>
angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {
this.getAccountByEmail = function (email) {
var req = {
method: 'GET',
url: "http://localhost:8080/gadziksy-web/rest/account/" + email
};
return $http(req);
};
}]);
var myApp = angular.module('myApp');
myApp.controller('AccCtrl',['$scope','$http' ,'AccSrv' , function ($scope , $http , AccSrv) {
$scope.hello = 'hello';
$scope.world = 'world';
$scope.ExistingAccount = {
"id": '',
"email": '',
"password": '',
"creationDate": ''
};
$scope.getAccount = function () {
return AccSrv.getAccountByEmail($scope.ExistingAccount.email).then(function (data) {
$scope.ExistingAccount = data.data;
})
}
}]);
The problem is that your service is being defined in a module that you are not including anywhere:
angular.module('AccountService', []).service('AccSrv'...etc
should be
myApp.service('AccSrv'...etc
Otherwise you will need to include the AccountService MODULE as a dependency of myApp.
#yBrodsky is correct you need to change
angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {
To:
angular.module('myApp').service('AccSrv', ['$http', function ($http) {
I have the following two files in Angular, wanting to create a simple Login application. The first one is Login.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> AngularJS Login SPA</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="loginCtrl">
<form action="/" id="myLogin">
Username: <input type="text" name="username" id="username" ng-model="username"><br/>
Password: <input type="password" name="password" id="password" ng-model="password"><br/>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
</body>
</html>
and the second one is controller.js:
var app = angular.module("mainApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when ('/', {
templateUrl: 'login.html'
})
.when ('#/dashboard',{
resolve:{
"check":function($location, $rootScope){
if (!$rootScope.loggedIn)
{
$location.path('/dashboard');
}
else{
}
}
},
templateUrl: 'dashboard.html'
})
.otherwise ({
redirectTo: '/'
})
});
app.controller('loginCtrl', function($scope, $location, $rootScope){
$scope.submit = function(){
if($scope.username == 'admin' && $scope.password == 'admin')
{
$rootScope.uname = $scope.username;
$rootScope.password = $scope.password;
$rootScope.loggedIn = true;
$location.path('/dashboard');
}
else{
alert('wrong stuff');
}
};
});
The thing is after I succesfully enter the texts 'admin' and 'admin' on username and password (if I click otherwise it correctly shows me an alert), the address changes to .../index.html#/dashboard but it doesn't load me the page dashboard.html, a simple page I created for this app, located in the same folder where index.html is.
Any idea on how it can show me dashboard.html after I succesfully login with the two texts?
Any help could be highly appreciated.
I found out what was the problem.
I had to test the application in Mozilla because Google Chrome doesn't support SPAs (Single Page Applications) that can match a running server.