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>
Related
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
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)
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 created simple html files about.html, experiments.html and home.html in a folder named partials but not able to render there view in ng-view also I tried a simple {{ 5+5 }} but that also didn't work id i am using config also along with controller.
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'>
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js">
Demo Angular JS
LOGO
MY WEBSITE
{{ 5 + 5 }}
var app = angular.module('demoApp', ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/about', { templateUrl:'/partials/about.html'})
.when('/experiments', { templateUrl:'/partials/experiments.html'})
.otherwise({ redirectTo:'/home', templateUrl:'/partials/home.html'})
})
.controller(function MainCtrl($scope){
$scope.x = "Hello";
});
</script>
</body>
</html>
Check your modified code.. and DEMO here
updated snippet
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', { templateUrl:'partials/about.html',controller : 'MainCtrl'})
.when('/about', { templateUrl:'partials/about.html',controller : 'abtCtrl'})
.when('/experiments', { templateUrl:'partials/experiments.html',controller : 'exptCtrl'})
.otherwise({ redirectTo:'/other', templateUrl:'partials/other.html'})
});
app.controller('MainCtrl', function($scope) {
$scope.x = "Hello";
});
app.controller('abtCtrl', function($scope) {
$scope.x = "About";
});
app.controller('exptCtrl', function($scope) {
$scope.x = "exptCtrl";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<div ng-app="demoApp" >
<h2 style="background-color:#ccc">
{{5+5}}
</h2>
<div style="background-color:#bbb; padding:10px;">
About
Expt
Other
</div>
<div ng-view="" id="ng-view"></div>
<script type="text/ng-template" id="partials/about.html">
<h1>About Page</h1>
</script>
<script type="text/ng-template" id="partials/experiments.html">
<h1>Experiment Page</h1>
</script>
<script type="text/ng-template" id="partials/other.html">
<h1>Other Page</h1>
</script>
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<body ng-app="myApp">
<p>Main
</p>
Red
Green
Blue
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "<div>first view</div>"
})
.when("/red", {
template: "<div>second</div>"
})
.when("/green", {
template: "<div>third</div>"
})
.when("/blue", {
template: "<div>fourth</div>"
});
});
</script>
</body>
</html>
This is how we are configuring routeProvider
I began following a tutorial to AngularJs today, but implementing something slightly different, now I'm stuck, seems that Angular is not recognizing the inline template "home".
P.S: To run this locally on chrome I had to install a webserver.
angular.module('little_tweet', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function() {
var o = { posts: []};
return o;
}])
.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
$scope.posts = posts.posts;
$scope.current_user = 'me';
$scope.addPost = function() {
if(!$scope.message || $scope.message === '') { return; }
$scope.posts.push({
user: $scope.current_user,
message: $scope.message,
time: new Date()
});
$scope.message = '';
};
}])
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
}]);
<html>
<head>
<title>Little Tweet</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="little_tweet">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<div class="page-header">
<h1>Little Tweet</h1>
</div>
<div ng-repeat="post in posts">
<span style="font-size:20px; margin-left:10px;">
{{{post.user}}: {{post.message}} at {{post.time}}
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Message"
ng-model="message"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Little tweet</h1>
</div>
<!-- rest of template -->
</script>
</body>
</html>
Remove the / from template url in routes.
EDIT
there is an extra { in {{{post.user}}: {{post.message}} at {{post.time}}.