Am beginner in learning angular js,I need to know how to set the session values like user id, mail,username etc..
kindly tell me the efficient ways to set session values in angular js
thank you in advance
Reference link reference link
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.LocalMessage = "LocalStorage: My name is Mudassar Khan.";
$sessionStorage.SessionMessage = "SessionStorage: My name is Mudassar Khan.";
}
$scope.Get = function () {
$window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Save" ng-click="Save()" />
<input type="button" value="Get" ng-click="Get()" />
</div>
</body>
</html>
Related
I am learning AngularJS and trying to understand the $scope part, I was trying to do string combine by creating three variables(ng-model) and see how javascript works with angularJS. Say if I insist on creating three of the ng-model, how do I combine the two strings and put them together in the rstString? I tried to read the $scope elements and the data is there, so what did I miss? Thank you.
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.rstString = $scope.firstString +$scope.secondString;
});
</script>
</body>
</html>
I added a button in your example :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString = 'hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
You can do like this too :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString"/><br><br>
Second String: <input ng-model="secondString"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstString = 'hello ';
$scope.secondString = ' world ';
$scope.rstString = 'aaa';
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
you can use ng-change event
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '" ng-change="handleChange()"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'" ng-change="handleChange()"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.handleChange = () => {
$scope.rstString = $scope.firstString +$scope.secondString;
};
});
</script>
</body>
I'm trying to trigger a click on a link, but it only runs the ng-click
From MyScript.js:
$timeout(function () {
angular.element(document.querySelector('#cancelButton')).triggerHandler('click');
}, 0);
And from Index.cshtml:
<input class="popupButton" type="button" value="Anuluj" />
I know that the way I did with
<a...><input... /></a>
is wrong,
but the important thing is: how to it to click the link and the ng-click?
I have written a simple program to navigate to the link.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="app">
<div ng-controller="ctrl">
Redirect to Click Me!
</div>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $log, $window) {
$scope.redirect = function () {
var url = "http://www.google.com";
$window.location.href = url;
};
});
</script>
</body>
</html>
Is this what you wanted?
I want to save the current state of check box and reload it when open the page next time.
AngularJS:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
var init = function () {
$scope.check = $window.localStorage.getItem("app3");
};
init();
$scope.Save = function () {
$window.localStorage.setItem("app3", $scope.check);
}
});
HTML:
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular-1.4.9.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input id="check1" type="checkbox" ng-model="check" />
<input type="button" value="Save" ng-click="Save()" />
</div>
</body>
</html>
Dont use jquery with angular.
Attach a ng-model to your input box like so : and you can access the value of the input in your controller using $scope.check
your local storage setting will be like so :
$window.localStorage.setItem('app3',$scope.check);
Thats it! Kindly go through angular tutorials or their documentation to understand how angular works.
I did coding for create,save,update,delete successfully. How to use localstorage for this? edit popup is not working.
Below is my code,
<html>
<head>
<title>KANNA</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Save" ng-click="Save()" />
<input type="button" value="Get" ng-click="Get()" />
<input type ="button" value="Edit"ng-click="Edit()"/>
</div>
<script >
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', ['$scope','$localStorage','$sessionStorage','$window',function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.templateUrl ="prakash.html";
$sessionStorage.SessionMessage = "SessionStorage: hai.";
}
$scope.edit=function(){
'prakash.html';
}
$scope.Get = function () {
$window.alert($localStorage.templateUrl+ "\n" + $sessionStorage.SessionMessage);
}
}]);
</script>
</body>
</html>
Any help would be appreciated.
What do you do exactly ?
I don't understand your problem ?
If you want to use a pop-up you could see here in modal section
I am relatively new in angularJs. I am working with a search field where search will execute with the "ng-submit", but ng-submit is not working. Here is my template (only the search portion):
<form class="navbar-form navbar-right" ng-submit="search()">
<input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
</form>
and the associated angularJS
<script>
app.controller("NavCtrl", ['$scope', '$http', '$location', '$q','$timeout', function NavCtrl($scope, $http, $location, $q, $timeout) {
$scope.results = ["Test"];
$scope.term = "";
$scope.reqs = "5";
$scope.pics = "45";
$scope.ddata = "asdasd";
$scope.ddata = $http.post("{% url 'get-nav-info' %}").success(
function(result){
//$scope.reqs = result.data.data.num_request;
//$scope.pics = result.data.data.num_photo;
return result.data;
}
);
//$scope.reqs = $scope.ddata.num_request;
//$scope.pics = $scope.ddata.num_photo;
$scope.search = function(){
//alert("test");
//$location.absUrl()
//$location.path("{% url 'search-term-show' %}?term="+$scope.term).replace();
$http.get("{% url 'search-term-show' %}?term="+$scope.term).success(function(result){
return result.data;
});
//$scope.$apply();
}
}]);
</script>
I am pretty sure the problem is occurring in the angularJs ng-submit portion. But can't fix it out properly. I am pretty sure because if I manually write the url for search then it shows results but if I try to search the result by pressing enter the search gives no response. Please help me to fix this problem.
Well there is a lot of useless code up there, but i created a plunker
http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview
EDIT: SORRY posted wrong link!
which gives some advice, maybe you forgot to attach the controller to your html like ng-controller="navController"
var app = angular.module('myApp', []);
app.controller('navController', ['$scope', '$http', function($scope, $http) {
$scope.search = function() {
console.log("search")
$http.get($scope.term).success(function(result) {
window.console.log("result");
return result.data;
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
<script src="script.js"></script>
<body ng-app="myApp">
<div ng-controller="navController">
<form ng-submit="search()">
<input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
<input type="submit">
</form>
</div>
</body>
<html>
On submit it does the search, but i cannot tell what that url is because u used some kind of template mixin, please avoid mixing template and Javascript
Have you put id="anyName" to tag?
If so it should work
Thanks,
Sameer
You can try to insert into the 'form' with type = "submit" button to the action and leaves it hidden.
this eg:
<button type="submit"
data-ng-hide="true"
data-ng-click="save()"/>
Here is index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="NavCtrl">
<form ng-submit="search()">
<input class="col-xs-9" type="text" placeholder="Search" ng-model="term" />
<input type="submit" ng-submit="search()" />
</form>
</div>
</body>
</html>
I left the original get and post requests alone, except that I changed it so that it would return a promise. I couldn't get the original search working because I wasn't sure what it was trying to accomplish. I cleaned up the project, employed some "best practices", and got the angular directives working. This won't benefit the person who submitted the question, but might help somebody else coming along with a similar problem. Here is the script file:
(function(){
var app = angular.module('myApp', []);
app.controller('NavCtrl', NavCtrl);
function NavCtrl($scope, $http, $location) {
$scope.results = ["Test"];
$scope.term = "";
$scope.reqs = "5";
$scope.pics = "45";
$scope.ddata = "asdasd";
$scope.ddata = $http.post("{% url 'get-nav-info' %}").then(
function(result) {
// $scope.reqs = result.data.data.num_request;
// $scope.pics = result.data.data.num_photo;
return result.data;
});
//$scope.reqs = $scope.ddata.num_request;
//$scope.pics = $scope.ddata.num_photo;
$scope.search = function() {
alert("search function was called");
//alert("test");
$location.absUrl();
$location.path("{% url 'search-term-show' %}? term="+$scope.term).replace();
$http.get("{% url 'search-term-show' %}?term="+$scope.term)
.then(function(result) {
//Successful
console.log(result.data);
},
function() {
//Error
console.log("Could not locate term.");
});
return result.data
};
}
})();
Had the same problem and ngSubmit seems to work better with objects, convert your ng-model to foo.term and access it in the controller as $scope.foo.term.
This will work.
To test if you're binding correctly,
Underneath the input, do something like {{ foo.term }} and see value updating