How can I get data from JSON to another angular js controller?

Question

I am new to AngularJS and stick with the code below.

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: "partials/home.html",
        controller: "mainController",
    })
    .when('/products', {
        templateUrl: "partials/productlist.html",
        //controller: "ProductController",
    })
    .when('/product/:prodID', {
        templateUrl: "partials/product.html",
        controller: "viewController",
    })
    .when('/contact', {
        templateUrl: "partials/contact.html",
        controller: "contactController",
    })
    .otherwise({
        redirectTo: "/"
    });
});

app.controller('ProductController', function($scope, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
    });
 }).
controller('viewController',function($scope,$routeParams){
    $scope.eachproduct = $scope.datap[$routeParams.prodID];
});

And my product.html page code will look like this.

<div ng-controller="viewController">
    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li class="active">{{eachproduct.link}}</li>
    </ol>
    <div class="col-md-4">
        <figure><img ng-src="{{ }}"></figure>
        <p>
            <a href="">Read More</a>
        </p>
    </div>
</div>

The problem is that I am not viewing the value of the product page {{eachproduct.link}}.

Any solution will be found.

Answer 1

Use $rootScopeinstead$scope

$ rootScope

$ rootScope is the topmost area. An application can have only one $ rootScope, which will be used by all application components. Therefore, it acts as a global variable. All other $ scopes are children of $ rootScope.

Example:

    controller('viewController',['$scope','$routeParams', '$http','$rootScope',function($scope,$routeParams, $http,$rootScope){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
       $rootScope.eachproduct = $scope.datap[$routeParams.prodID];
     });
   }]);

Answer 2

app.controller('ProductController', function($scope, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
    });
 }).
controller('viewController',function($scope,$routeParams, $http){
    $http.get('partials/productTable.json').success(function(response){
        $scope.datap = response.lists;
        $scope.eachproduct = $scope.datap[$routeParams.prodID];
    });
});

Answer 3

, angular, factory , .

Take a look at this example, while it does not use routes, the principle is the same: https://jsbin.com/wiwejapiku/edit?html,js,output

For more information about providers, see here: https://docs.angularjs.org/guide/providers

Your example will work something like this:

app
.factory('productFactory',function(){
    return {
        data: {}
    };
})
.controller('ProductController', function($scope, $http, productFactory){
    $scope.productFactory = productFactory;
    $http.get('partials/productTable.json').success(function(response){
         $scope.productFactory.data = response.lists;
    });
}).
controller('viewController',function($scope,$routeParams, productFactory){
    $scope.productFactory = productFactory;
    $scope.eachproduct = $scope.productFactory.data[$routeParams.prodID];
});

Note that you will also need to change your view to the link 'productFactory.data' accordingly.