Question

我正在关注有关角度的教程，并且对服务有些停滞。

这是我被困住的那颗小东西。

在为容器注入参数时会遇到问题。

有人可以快速浏览一下吗？

在这里

相关代码如下

github.js-服务代码

 (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]);

}());

Answer 1

这可能是因为HTML中列出的JS文件的顺序：

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

由于在script.js中使用了var github，并且在github.js中定义了var github，因此应该先出现github.js，然后再出现script.js。像这样：

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

我在Bootstrap和jQuery UI中也遇到了类似的问题。

角度服务样本不起作用

1 个答案: