Angular Question

Experts!
 
I am learning Angular and trying to get products from the database, the products in the following link are coming as static from store.js file.
 
http://www.codeproject.com/Articles/576246/A-Shopping-Cart-Application-Built-with-AngularJS

What is the way of doing it.  
 
I am trying the following code, but I don't see any error or any success. Could you please help  me.
(
function () {
var app = angular.module("productViewer", []);
var ProductController = function ($scope, $http) {
var onUserComplete = function (response) {
alert(response.data);
$scope.products = response.data;
};
var onError = function (reason) {
alert("error");
$scope.error = "Could not fetch the Products";
};
 
$http.get("https://api.github.com/users/robconery")
 .then(onUserComplete, onError);
};
app.controller(
"ProductController", ["$scope", "$http", ProductController]);
}());

Thanks
Dinesh Kumar


Please Note: I wanted to make change in the existing code given on the code project article mentioned earlier.
Dinesh KumarAsked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
...before the EE police gets me again, here's the revised snippet:

(function() {
        var app = angular.module("productViewer", []);
        app.controller("ProductController", ProductController);
        ProductController.$inject = ["$scope", "$http"];
        
        function ProductController($scope, $http) {
            function onUserComplete(response) {
                alert(response.data);
                $scope.products = response.data;
            };
            function onError(reason) {
                alert("error");
                $scope.error = "Could not fetch the Products";
            };
            $http.get("https://api.github.com/users/robconery")
                .then(onUserComplete, onError);
        };
}());

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
The problem has to do with function declaration vs function expression. The function expression gets loaded into the browser when the browser reaches that line of code. It is defined at this point, but since there is no 'response' at this stage, it returns nothing. When the $http.get is called, the success function is predefined as 'nothing', so you don't get an error. you just get nothing.

The solution is to make your functions into declarations, which are executed at run time. Now when the $http.get is called, it actually runs the function with 'response' data.

See this amended jsfiddle:
http://jsfiddle.net/gjdkksxc/
0
 
Dinesh KumarAuthor Commented:
Let me try this until then I have created a ProductService.js having the following code:

(function () {

    var products = function ($http) {

        var getProducts = function (username) {
            return $http.get("http://localhost:60128/Products-Service/Products")
                        .then(function (response) {
                            alert(angular.toJson(response.data.value));
                            return angular.toJson(response.data.value);
                        });
        };

        return {
            getAllProducts: getProducts
        };

    };

    var module = angular.module("AngularStore");  //refering to Existing Module
    module.factory("ProductService", products);

}());

Open in new window


And in the store.js file, I am trying further code with some modification:

function store(ProductService) {
   
    this.products = ProductService.getAllProducts;
    alert(this.products);

but it says getAllProducts is undefined. :(
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kyle HamiltonData ScientistCommented:
you are still writing function expressions. why?

why are you rewriting the tutorial?

If you want to learn angular, you have to learn the fundamentals of javascript first.
function declarations vs function expressions is just one of those fundamentals.
0
 
Dinesh KumarAuthor Commented:
Thank you Kyle!
0
 
Kyle HamiltonData ScientistCommented:
np :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.