CODEWITHSUNDEEP
angularjs
user1131926
user1131926

Reputation: 1341

angular service sample not working

I am following a tutorial for angular and a bit stuck with service.

here is the plunk where I am stuck.

it runs into issue when injecting the parameters for consrtuctor.

Can someone please have a quick look?

plunk here

https://plnkr.co/edit/rMKt3h?p=preview

related code as follows

github.js --service code

 (function() {


    var github = function($http) {

      var getUser = function(username) {
        return $http.get('https://api.github.com/users/' + username)
          .then(function(response) {
            return response.data;
          });
      };

      var getRepos = function(user) {
        return $http.get(user.repos_url)
          .then(function(response) {
            return response.data;
          });

      };

      return {
        getUser: getUser,
        getRepos:getRepos
      };
    };

    var module = angular.module("gitHubViewer");
    module.factory("github", github);
  }());

index.html

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
  <script src="github.js"></script>

</head>

<body ng-app="gitHubViewer" ng-cloak>
  <div ng-controller="EmployeeController">

    <div ng-show="error">{{error}}</div>


    {{countDown}}
    <h2>{{user.name}}</h2>

    <form name="searchUser" ng-submit="search(username)">
      <input type="search" required ng-model="username" />
      <input type="submit" value="Search" />
    </form>

    {{username}}

    <select ng-model="repoSortOrder">
      <option value="name">Name</option>
       <option value="-stargazers_count">Stars</option>
      <option value="language">Language</option>
    </select>

    <!--<div>
      <img ng-src="{{user.avatar_url}}" />
    </div>-->

    <table style="border:1">
      <thead>
        <tr>
          <th>Name</th>
          <th>stargazers_count</th>
          <th>Language</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
          <td>
            {{repo.name}}
          </td>
          <td>
            {{repo.stargazers_count | number:2}}
          </td>
          <td>
            {{repo.language}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

script.js

import angular from 'angular';

(function() {

  var app = angular.module('gitHubViewer', []);

  var EmployeeController = function($scope,github, $interval,$log) {
    $scope.search = function(username) {
      $scope.error = null;
      $log.info("Searching for user : " + username);

      //gitHubService.getUser(username)
      //       .then(onResponse, onError);

      //$http.get('https://api.github.com/users/' + username)
      //  .then(onResponse, onError);

      github.getUser(username)
            .then(onResponse, onError);

      if(countDownInterval!==null)
      {
        $interval.cancel(countDownInterval);
        $scope.countDown=null;
      }
    };

    var onResponse = function(data) {
      $scope.user = data;

      //$http.get($scope.user.repos_url)
      //  .then(onReposResponse, onError);
      github.getRepos(data)
      .then(onReposResponse,onError);
    };


    var onReposResponse = function(data) {
      $scope.repos = data;
    };


    var onError = function(error) {
      $scope.error = error;
    };

    var decrementCountDown = function() {
      $scope.countDown -= 1;

      if ($scope.countDown < 1) {
        $scope.search($scope.username);
      }
    };

    var countDownInterval = null;
    var startCountDown = function() {
      countDownInterval = $interval(decrementCountDown, 1000, 5);
    };

    $scope.username = "Angular";
    $scope.message = "github viewer";
    $scope.repoSortOrder = "-stargazers_count";
    $scope.countDown = 5;
    startCountDown();
  };

  app.controller("EmployeeController", ["$scope","github", "$interval","$log", EmployeeController]);

}());

Upvotes: 0

Views: 38

Answers (1)

Tom C
Tom C

Reputation: 43

It might be because of the order of the JS files listed in the HTML: 

<script src="lib/script.js"></script>
<script src="github.js"></script>

Since var github is used in script.js, and it's defined in github.js, github.js should come first then script.js. Like this: 

<script src="github.js"></script>
<script src="lib/script.js"></script>

I had a similar issue with Bootstrap and jQuery UI.

Upvotes: 1

Related Questions