Pass value from one controller to another in AngularJS

How to pass variables between controllers Angular pass values between controllers Passing data between controllers in Angular Angular: Share data between controllers Using Services to Share Data Between Controllers Sharing Data Between Controllers Angular How to share data between controllers in AngularJS

Share value between two or more controller is easy by using the service which we will see in this article. In ASP.Net there were many options to pass values from one page to other pages, let's just name some of them to understand if we can use them or not. The very first thing comes in mind SESSION state, to use the session state we will to go to the server side, so we will need the service to call the methods which looks complicated. Let's check it with pure AngularJS way first:

Let's say we want to share the product detain in different controllers, say the product have information

product = { product: 'Some Product', price: '123' } 

Never matter whether we want to share a value, an object, a list or a list of object, the same logic will work for every situation. We are going to use hard coded value so let's create a simple service to get and keep the data

var app = angular.module("MyApp", []);    
/*  Create Products service   */
app.service('Products', function () {      
  this.Items = function() {
    // if we want can get data from database 
     product = { product: '', price: '' }
  };    
  return this;
});

In this service, we are not using any complicated code, simply created a method and create a new object of product. However you want to use, you can.

Now let's say We have two controllers Ctrl1, Ctrl2 like this

app.controller("Ctrl1", ['$scope', 'Products',
    function ($scope, Products) {
    $scope.Product = Products.Items;
    //some other code
}]);

app.controller("Ctrl2", ['$scope', 'Products',
    function ($scope, Products) {
    $scope.Product = Products.Items;
    //some other code 
}]);

Here we are using the service to get product value, I already taken your enough time, let's try it live

ASP.Net options to pass value from on page to other:

  1. Using a Query String: we will try it
  2. Cookies: We can use it, better to use the local storage.
  3. Getting Post Information from the Source Page: cannot be used
  4. Using Session State: can be used but not very useful
  5. Getting Public Property Values from the Source Page: cannot be used
  6. Server.Transfer: no such option

Using Query String

$location.search(): will return an object of key-value pairs, the same pairs as the query string

One thing to note: A key that has no value is just stored in the object as true.

Let's say you have URL like xyz.com?user= then it will return {"user": true} rather than null

We can also access the user value directly

var user = $location.search().user;
Ali Adravi Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
  • service
  • angularjs
  • controller
By Ali Adravi On 02 Nov, 15  Viewed: 8,758

Other blogs you may like

Angular 2 Page Title Static and Dynamic with built-in Title Service

Angular 2 have a built-in service called Title, while in angularjs or angular 1 we were maintaining it through the routing or through the service. By using the Title service provided by Angular 2, in 2 minute every thing will be set without any complication, even we don't need to understand the... By Ali Adravi   On 14 Apr 2017  Viewed: 804

ASP.NET 5 Latest Updates and Improvements in Visual Studio 2015 CTP 6

ASP.NET is not just a web development platform of all the time, but a righteous web application framework of its own way. Its lofty architecture and cutting-edge features together give this framework a sense of grandeur that's absolutely hard to ignore. And since its keep on evolving itself so... By Celin Smith   On 29 Apr 2015  Viewed: 143

Delightful WordPress Plugins That Augment Split Tests On WP Site

Keeping a check on your WordPress site's performance is a great way that helps make strives in the correct direction. Even a small tweak or change in the website can create a great difference in its performance. Thus, to ensure that your changes are offering breakthroughs and not introducing... By Edward John   On 26 Dec 2014  Viewed: 103

Do the Arguments in JavaScript Are Passed By Value Or Reference?

Since Java is a complicated language, beginners may find developing [Java Web Application Development][1] or web pages a difficult task. JavaScript (also referred to as JS) is much easier compared to Java, and helps to enhance how your web page works. Incorporating JS into your site's web page... By Celin Smith   On 23 Dec 2014  Viewed: 128

Creating Separate Page For Your WordPress Blog Posts

WordPress by default displays the blog content on the homepage. But, what if you want a separate page for your blog posts? Luckily, WordPress allows users to easily create a page particularly for blog posts. However, this process might seem challenging to most of the newbies. Reading this article... By Edward John   On 16 Dec 2014  Viewed: 138