REST call in AngularJS does not display record

Question

This is my first AngularJS project. I followed this website to create a simple html to display a single record by calling restful services. The rest works with the url "http://localhost:8080/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009".

Here is my html:

<html ng-app="cgApp" ng-controller="CgseqCtrl">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
    <script src="../js/controller.js"></script>
  </head>
  <body>
    <div>
        <hr>
            <h2>{{seq.analysisId}}</h2>
            <h2>{{seq.library}}</h2>
        </hr>
    </div>

  </body>
</html>

I defined the resource in a service js

//service.js
angular.module('cgApp', ['ngResource'])
.factory('CgseqService', function ($resource) {
        return $resource('http://localhost:8080/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009',
            {get: {method: 'GET'}
        });
});

The controller:

//controller.js
angular.module('cgApp', ['ngResource'])
.controller('CgseqCtrl', ['CgseqService', '$scope', function (CgseqService, $scope)
{
    $scope.getSeq = function(response) {
        CgseqService.get(function(data) {
            $scope.seq = data;
        });
    };
}]);

When I started my http server with Node.js and typed the url in the browser, nothing is displayed. What did I do wrong?

np-controller="CgseqCtrl". Typo? Should say ng-controller. — Josh Beam
– Josh Beam, Commented Mar 31, 2016 at 0:03
I also don't see where you've imported your factory code in your HTML. It only looks like you loaded your controller code. — Josh Beam
– Josh Beam, Commented Mar 31, 2016 at 0:04
@ggderas The example in the link does not have success/error function in the request — Nasreddin
– Nasreddin, Commented Mar 31, 2016 at 0:05

Josh Beam · Accepted Answer · 2016-03-31 00:07:32Z

1

Several errors.

You didn't load your factory code. It looks like you only loaded your controller.js (I'm assuming your factory code is in a different file since in your example you commented it as //service.js):

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
    <script src="../js/controller.js"></script>
  </head>

np-controller should say ng-controller:

<html ng-app="cgApp" np-controller="CgseqCtrl">

You also never called your $scope.getSeq function:

$scope.getSeq = function(response) {
    CgseqService.get(function(data) {
        $scope.seq = data;
    });
};

You should call $scope.getSeq() somewhere to actually invoke it.

edited Mar 31, 2016 at 0:07

answered Mar 31, 2016 at 0:06

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nasreddin Over a year ago

I thought the service is declared in controller.js as its dependency. Do I have to list all scripts in that section explicitly?

Josh Beam Over a year ago

@Nasreddin Yeah you need to actually load all your scripts otherwise the code is unaware that the injected dependency 'CgseqService' even exists.

Nasreddin Over a year ago

Why do I need to call getSeq function? Doesn't the whole controller function get executed?

Josh Beam Over a year ago

@Nasreddin the controller function gets executed, but not necessarily the contents inside of it.

Nasreddin Over a year ago

I can't think of where and how to invoke getSeq. Can I remove the function declaration but expose CgseqService.get(function(data) in the controller?

|

Collectives™ on Stack Overflow

REST call in AngularJS does not display record

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related