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

AngularJS: help registering custom service the right way

本文关键字：方式 注册 自定义 服务 帮助 AngularJS      更新时间：2023-09-26

新手问题

我一直在看这个很棒的Angular初学者课程，但在注册过程中遇到了麻烦。

代码项目（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);
}());

script.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不是一个函数。我做错了什么？

当您注入依赖项时要注意顺序，因为您正在注入七个依赖项，但只是以错误的顺序将六个依赖项传递给控制器。您需要通过$http并将$github放在末尾。

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

当您将资源注入控制器时

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

订单集类型必须与您的控制器功能声明匹配

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

所以这里$github包含的是$http模块：）

这是你的plunkr的更正版本http://plnkr.co/edit/9UyNHDKiXDZAZt8PPEPy?p=preview尽管我更喜欢这种语法，但我发现它更清晰：http://plnkr.co/edit/byhQ7ST8AZlQ6oMYIMeV?p=preview

你应该看看https://github.com/johnpapa/angular-styleguide
工作中使用了一个样式指南，其中充满了最佳实践
享受角度的乐趣

因为提供程序的顺序在数组["scope"、"github"等]中与控制器的顺序不同。您的服务对应于另一个被缩小的提供商，即使不是，也无关紧要。您必须按照在提供程序数组

中定义的相同顺序传递注入器
相关文章：