DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

[DZone Research] Observability + Performance: We want to hear your experience and insights. Join us for our annual survey (enter to win $$).

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Building Angular Library and Publishing in npmjs Registry
  • Leveraging Salesforce Using a Client Written In Angular
  • Creating a Twitter Graph Using Slash GraphQL
  • Recursive Angular Rendering of a Deeply Nested Travel Gallery

Trending

  • Build Quicker With Zipper: Building a Ping Pong Ranking App Using TypeScript Functions
  • Modular Software Architecture: Advantages and Disadvantages of Using Monolith, Microservices and Modular Monolith
  • How To Deploy Helidon Application to Kubernetes With Kubernetes Maven Plugin
  • Post-Pandemic Cybersecurity: Lessons Learned and Predictions
  1. DZone
  2. Data Engineering
  3. Data
  4. How to Share Data Between Controllers in AngularJS

How to Share Data Between Controllers in AngularJS

How do you share data between controllers in AngularJS? Why, with the SharedDataService method and a defined Product object.

Josh Anderson user avatar by
Josh Anderson
·
Jun. 13, 15 · Interview
Like (1)
Save
Tweet
Share
20.18K Views

Join the DZone community and get the full member experience.

Join For Free

Written by Dhananjay Kumar.


In my AngularJS classes, I often get asked, “How do I share data between the controllers in AngularJS?” On the Internet, there are many solutions suggested. However, I prefer to share data using the Shared Data Service method, and that’s what we’re going to explore in this post.

To start with, let’s suppose that we want to share a Product object between the controllers. Here I have created an AngularJS service named SharedDataService as shown in the snippet below:

myApp.service('SharedDataService', function () {

     var Product = {

        name: '',

        price: ''

    };

    return Product;

});

Next let’s go ahead and create two different controllers using SharedDataService. In the controllers, we are using the service created in the previous step. Controllers can be created as shown below:

var myApp = angular.module("myApp", ['CalService']);



myApp.controller("DataController1", ['$scope', 'SharedDataService',

    function ($scope, SharedDataService) {

    $scope.Product = SharedDataService;



    }]);



myApp.controller("DataController2", ['$scope', 'SharedDataService',

    function ($scope, SharedDataService) {

    $scope.Product = SharedDataService;



}]);

On the view we can simply use the controllers as shown in the listing below:

<div ng-controller="DataController1">

            <h2>In Controller 1h2>

            <input type="text" ng-model="Product.name" /> <br/>

            <input type="text" ng-model="Product.price" />

            <h3>Product {{Product.name}} costs {{Product.price}}  h3>

        div>

        <hr/>

        <div ng-controller="DataController2">

            <h2>In Controller 2h2>

            <h3>Product {{Product.name}} costs {{Product.price}}  h3>

        div>

Now we can share the data between the controllers. As you can see, the name and price of the product is being set in the DataController1, and we are fetching the data in the DataController2.

Do you have any better options that you use to share data? Or perhaps you have a complex scenario which may be not be solved by the above approach. If so, let me know! Tell me about it in the comments below.


Data (computing) AngularJS

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Building Angular Library and Publishing in npmjs Registry
  • Leveraging Salesforce Using a Client Written In Angular
  • Creating a Twitter Graph Using Slash GraphQL
  • Recursive Angular Rendering of a Deeply Nested Travel Gallery

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: