Hello friends, In this article, we will learn about AngularJS recipe, How to create AngularJS value recipe ? and How to use AngularJS value recipe ?
Value recipe use to creates JavaScript Object globally and returns same JavaScript Object, Which is created only once. We can access it any where with in the application except config block. Since it is created only once in the lifetime of an Angular application. therefore it is also singleton. In case of multiple controllers it will behave like $rootScope provider.
We can create Value provider as follows.
var ng = angular.module("myApp", []);
ng.value("CitiesModel", {
cities: ["New Delhi", "Mumbai", "Kolkata",
"Chennai"],
});
Please avoid, We can't access it in AngularJS config block.
ng.config(function (CitiesModel) {
console.log(CitiesModel);
})
Above will throw exception.
Injecting value recipe in controller.
ng.controller("MyController", ['$scope', 'CitiesModel', function ($scope, CitiesModel) {
}]);
Accessing value object.
ng.controller("MyController", ['$scope', 'CitiesModel', function ($scope, CitiesModel) {
$scope.citiesList = [];
$scope.city = '';
$scope.GetCitiesList = function () {
$scope.citiesList = CitiesModel.cities;
}
$scope.SaveCities = function () {
CitiesModel.cities.push($scope.city);
$scope.citiesList = CitiesModel.cities;
$scope.city = '';
}
}]);
Injecting in another controller.
ng.controller("MySecondController", ['$scope', 'CitiesModel', function ($scope, CitiesModel) {
$scope.citiesList = [];
$scope.city = '';
$scope.GetCities = function () {
$scope.citiesList = CitiesModel.cities;
}
}]);
Copy code below to understand AngularJS recipe.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="angular-1.7.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div class="container" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">City</label>
<input ng-model="city" type="text" class="form-control form-control-sm" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="button" ng-click="SaveCities();" class="btn btn-primary btn-sm" value="Save" />
<input type="button" ng-click="GetCitiesList();" class="btn btn-primary btn-sm" value="View All" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table">
<tr ng-repeat="c in citiesList"><td>{{c}}</td></tr>
</table>
</div>
</div>
</div>
</div>
<div class="container" ng-controller="MySecondController" ng-cloak>
<div class="col-md-6">
<div class="form-group">
<input type="button" ng-click="GetCities();" class="btn btn-primary btn-sm" value="View All" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table">
<tr ng-repeat="c in citiesList"><td>{{c}}</td></tr>
</table>
</div>
</div>
</div>
</div>
<script>
var ng = angular.module("myApp", []);
ng.value("CitiesModel", {
cities: ["New Delhi", "Mumbai", "Kolkata",
"Chennai"],
});
/*
// Will throw exception
ng.config(function (CitiesModel) {
console.log(CitiesModel);
})
*/
ng.controller("MyController", ['$scope', 'CitiesModel', function ($scope, CitiesModel) {
$scope.citiesList = [];
$scope.city = '';
$scope.GetCitiesList = function () {
$scope.citiesList = CitiesModel.cities;
}
$scope.SaveCities = function () {
CitiesModel.cities.push($scope.city);
$scope.citiesList = CitiesModel.cities;
$scope.city = '';
}
}]);
ng.controller("MySecondController", ['$scope', 'CitiesModel', function ($scope, CitiesModel) {
$scope.citiesList = [];
$scope.city = '';
$scope.GetCities = function () {
$scope.citiesList = CitiesModel.cities;
}
}]);
</script>
</body>
</html>
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.