javascript - AngularJS:帮助以正确的方式注册自定义服务

标签 javascript angularjs html

新手问题

一直在看这个great Angular Beginners course但陷入了注册过程。

Code project (plnkr.co)

index.html

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

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

  <body ng-controller="MainController">
    <h1>{{message}}</h1>

    {{ countdown }}
    <form name="searchUser" ng-submit="search(username)">
      <input type="search" required placeholder="Username to find" ng-model="username"/>
      <input type="submit" value="Search">
    </form>

    <div ng-include="'userdetails.html'" ng-show="user"> </div>

  </body>

</html>

github.js

(function() {

  var github = function($http) { // requires the service $http

    // Private implementation details //
    var gettingUser = function(username) {
      return $http.get("https://api.github.com/users/" + username)
        .then(function(response) {
          return response.data;
        });
      /* returning the promise that already comes with 
      the function to perform the data extration
      */
    };

    var gettingRepos = function(user) {
      return $http.get(user.repos_url)
        .then(function(response) {
          return response.data;
        });
      /* returning a promise that it will return the data
      - so the controller doesn't have to. */
    };



    // Public API //
    return {
      gettingUser: gettingUser,
      gettingRepos: gettingRepos
    };
    // returns an object (github service)
  };


  var module = angular.module("githubViewer");
  /* Not creating a module, just getting the reference 
  to the one created in script.js So no need to list 
  the dependencies in a list after githubViewer*/

  // Register the Service
  module.factory("$github", github);
}());

脚本.js

(function() {

  var app = angular.module("githubViewer", []);

  var MainController = function(
    $scope, $github, $interval, $log, 
    $anchorScroll, $location) {

    var onUserComplete = function(data) {
      $scope.user = data;
      $github.gettingRepos($scope.user)
        .then(onRepos, onError);
    };

    var onRepos = function(data){
      $scope.repos = data;
      $anchorScroll( $location.hash("userDetails") );
    }

    var onError = function(reason) {
      $scope.error = "Could not fetch data";
    };

    var decrementCountdown = function(){
      $scope.countdown -= 1;
      if($scope.countdown < 1){
        $scope.search($scope.username);
      }
    }

    $scope.search = function(username) {
      $log.info("Searching for "+ username);
      $github.gettingUser(username).then(onUserComplete, onError);

      if(countdownIntervalObj){
        $interval.cancel(countdownIntervalObj);
        $scope.countdown = null;
      }
    };

    var countdownInterval = null;
    var startCountdown = function(){
      countdownIntervalObj = $interval(decrementCountdown, 1000, $scope.countdown);
    }


    $scope.username = "angular";
    $scope.message = "GitHub Viewer";
    $scope.repoSortOrder = "-stargazers_count";
    $scope.countdown = 5;

    startCountdown();
  };

  app.controller("MainController", 
  ["$scope", "$http", "$interval", "$log", "$anchorScroll", "$location", "$github", MainController]);

}());

控制台一直说$github.gettingUser不是一个函数。我做错了什么?

最佳答案

当您注入(inject)依赖项时请注意顺序,因为您注入(inject)了七个依赖项,但只是以错误的顺序将六个传递给了 Controller 。您需要传递 $http 并将 $github 放在最后。

var MainController = function($scope, $http, $interval, $log, $anchorScroll, $location, $github)

app.controller("MainController", ["$scope", "$http", "$interval", "$log", "$anchorScroll", "$location", "$github", MainController]);

关于javascript - AngularJS:帮助以正确的方式注册自定义服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34233824/

相关文章:

java - 如何从 webelement 获取文本

jquery - SVG 之上的 HTML 元素(ui 覆盖)

javascript - 从 JavaScript 中的另一个函数停止函数中的循环

javascript - Putty 窗口关闭时,机器人将关闭

javascript - 当后处理需要 5-10 秒时更改单选按钮的最佳方法

javascript - 类型错误 : Cannot read property 'open' of undefined modal

javascript - 对表单数据的代码哈希函数 - 已经有函数但不知道在哪里调用

javascript - 有效地显示和隐藏菜单项

javascript - 从 Blob URL 创建下载链接

python - 写入文件的条目不正确