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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.