In the below snippet, I'm not able to print a simple value of search_username.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div ng-controller="MainController">
{{userdata.name}} {{error}}
</div>
</body>
</html>
JS Code:
// Code goes here
var MainController = function($scope, $http) {
$scope.search_username = "anyname"; // Value assigned here
var onComplete = function(response) {
$scope.userdata = response.data;
}
var onError = function(reason) {
$scope.error = "Not able to fetch data";
}
var request = $http.get("https://api.github.com/users/angular");
request.then(onComplete, onError);
}
var myModule = angular.module("GibtHubViewer", []);
myModule.controller("MainController", ["$scope", "$http", MainController]);
Thank You
your model out of scope. you should put all model in scope that define it by controller.
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div >
{{userdata.name}} {{error}}
</div>
</body>
The position where you are trying to print the model is out of Scope of the controller which is used, try this:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div>
{{userdata.name}} {{error}}
</div>
</body>
</html>
you are trying to display the {{search_username}} outside the controller area.
the search_username is added in the scope in MainController but you are trying to print that outside the MainController's area.
<div ng-controller="MainController">
{{userdata.name}} {{error}}
search_username - {{search_username}} // This will print the username
</div>
Related
I am new to angular js. I try to create a simple page to connect angular js and backend laravel database. I keep receiving an error as an Error: $injector:unpr
Unknown Provider. I don't know what was wrong in the code. I hope anyone helps me to solve the issue. Thanks in advance
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,Comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
Used wrong name of factory, comment instead of Comment
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
</body>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
</script>
</html>
I am using Angularjs 1 in my project.i am validating the form inside angular,so i am using form.$valid to check the form submitted is valid or not,but it is not working properly,not sure what i am missing
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp",[]);
angular.module("myApp").controller("SampleController",[function(){
this.user = {}
this.submitForm = function(form){
if(form.$valid){
window.alert("Valid")
}else{
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div> <!--/ container -->
</body>
</html>
I am always getting the alert message from the else part which states form invalid
Form directive is bounded to scope, so you need to write it as $scope.sampleForm.$valid. Since your name is dynamic, you can use a bracket notation: $scope[form].$valid. But either way you need to inject $scope into your controller.
Here is a demo:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp", []);
angular.module("myApp").controller("SampleController", ['$scope', function($scope) {
this.user = {}
this.submitForm = function(form) {
if ($scope[form].$valid) {
window.alert("Valid")
} else {
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div>
<!--/ container -->
</body>
</html>
You are passing form as a string in ng-click method not a form Object.So u have to pass the form object without Single-cotts.
ng-click="sm.submitForm('sampleForm')" to ng-click="sm.submitForm(sampleForm)"
Controller file
var ToDo=angular.module('ToDo',[]);
ToDo.controller('resetPasswordController',function($scope,resetPasswordService,$location){
$scope.resetPassword=function(){
var message=resetPasswordService.resetPassword($scope.user);
message.then(function(response){
console.log(response.data.message);
if(response.data.message=="password is reset")
$location.path("/login");
});
}
});
service file
var ToDo = angular.module('ToDo',['ngResource']);
ToDo.factory('resetPasswordService', function($resource,$http) {
var token=sessionStorage.getItem("token");
var details = {};
if(token!=null){
console.log(token);
sessionStorage.removeItem("token");
details.resetPassword = function(user) {
/*user.$save();*/
return $resource('http://localhost:8080/ToDo/forgotPassword/resetPassword/:Token',{Token:token});
}
}
return details;
});
mainapp.js
var ToDo = angular.module('ToDo', [ 'ui.router']);
ToDo.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('resetPassword', {
url : '/resetPassword',
templateUrl : 'template/resetPassword.html',
controller : 'resetPasswordController'
});
$urlRouterProvider.otherwise('resetPassword');
} ]);
template file
<form>
<h3 align="center">Re-set New Password</h3>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<label class="control-label">Enter New Password</label>
<input type="password" class="form-control"
data-ng-model="user.newPassword" name="emailId" required>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<label class="control-label">Re-Enter The New Password</label>
<input type="password" class="form-control"
data-ng-model="user.reEnterNewPassword" name="username" required>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<button id="buttons" type="submit" data-ng-click="resetPassword()">Submit</button>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<div>
Want To try Sign-In Again?
</div>
</div>
</div>
<div class="row"></div>
</form>
index.jsp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/scriptpage.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/javascript"
src="controller/resetPasswordController.js"></script>
>
<script type="text/javascript" src="script/ToDoApp.js"></script>
</head>
<body data-ng-app="ToDo">
<div data-ui-view></div>
</body>
</html>
when i put ToDoApp.js before controller and service my view just goes to blank and when i put after those html page is showing but i get Error: $controller:ctrlreg
A controller with this name is not registered. for resetPasswordController
. Please help me with this problem.
And yes when i remove [ngResource] then everything works fine. Why??
You are defining you 'ToDo' module multiple times. In the controller and service files you should just get that module
var ToDo = angular.module('ToDo');
And in mainapp you should also inject ngResource
var ToDo = angular.module('ToDo', [ 'ui.router', 'ngResource']);
I am trying to learn AngularJs, I am trying to run a very simple example like below,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Angular Forms</title>
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/common.js" type="text/javascript"></script>
</head>
<body ngApp="formApp" ngController="formController">
<div class="container">
<div class="col-md-6 col-md-offset-3">
<!-- PAGE TITLE -->
<div class="page-header">
<h1>Submitting Forms with Angular</h1>
</div>
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages"></div>
<!-- FORM -->
<form ngSubmit="process()">
<!-- NAME -->
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ngModel="formData.name"/></div>
<!-- SUPERHERO NAME -->
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ngModel="formData.superhero"/></div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-success btn-lg btn-block">Submit!</button>
</form>
</div>
</div>
<script type="text/javascript">
var app = angular.module('formApp',[]);
app.controller('formController', ['$scope','$http', function ($scope, $http) {
console.log("form controller called");
$scope.formData = {};
$scope.process = function() {
console.log("test.php?" + JSON2Params($scope.formData))
$http({method:"GET",
url: "test.php?" + JSON2Params($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
};
}]);
</script>
</body>
</html>
However, I am not getting any indication that angular js is working. For example, I don't see anything logged to console, or application making a http get request that I want to make.
You have a syntax error
Change
From
<body ngApp="formApp" ngController="formController">
To
<body ng-app="formApp" ng-controller="formController">
What does this:
ng-disabled="login == ''"
not disable the button when the input field login is empty?
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body ng-controller="mainController">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
LOGIN
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" ng-model="login">
</div>
<div class="form-group">
<label for="inputPassword">Passowrd</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" ng-disabled="login == ''" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', function ($scope) {
});
</script>
</body>
</html>
Create a form object in your controller which would hold each model property/field, and then check if the field (login) equates and empty string.
...
<input type="text" class="form-control" id="login" ng-model="form.login">
...
<button type="submit" ng-disabled="form.login === ''" class="btn btn-primary">Login</button>
....
Controller
mainApp.controller('mainController', function ($scope) {
$scope.form = {
login: ''
}
});
JSFIDDLE