Javascript Pluralsight-AngularJS：开始吧_Javascript_Html_Angularjs

Javascript Pluralsight-AngularJS：开始吧

javascript html angularjs

Javascript Pluralsight-AngularJS：开始吧,javascript,html,angularjs,Javascript,Html,Angularjs,我从Plualsight学习了“AngularJS:Get Started”课程，到达了路由模块，因此我在Plunker中有一些文件，在课程预览页面上，他们可以看到标题“Github查看器”和搜索栏。但我仍然在控制台中遇到错误，我不知道为什么，我的代码应该和他们的代码相同因此，我有以下文件： app.js github.js (function() { var github = function($http) { var getUser = function(username)

我从Plualsight学习了“AngularJS:Get Started”课程，到达了路由模块，因此我在Plunker中有一些文件，在课程预览页面上，他们可以看到标题“Github查看器”和搜索栏。但我仍然在控制台中遇到错误，我不知道为什么，我的代码应该和他们的代码相同

因此，我有以下文件： app.js

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 getRepo = function(user) {
      return $http.get(user.repos_url)
        .then(function(response) {
          return response.data;
        });
    };

    return {
      getUser : getUser,
      getRepo : getRepo
    };

  };

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

}());

index.html

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

<head>
  <script data-require="angular.js@*" data-semver="1.3.14" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script scr="app.js"></script>
  <script src="MainController.js"></script>
  <script src="github.js"></script>
</head>

<body>
  <h1>Github Viewer</h1>
  <div ng-view></div>
</body>

</html>


Github查看器

main.html

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


{{倒计时}

MainController.js

// Code goes here

(function() {

  var app = angular.module("githubViewer");

  var MainController = function($scope, $interval, $location) {
    console.log("Atentie!")

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

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

    $scope.search = function(username) {
      if (countdownInterval) {
        $interval.cancel(countdownInterval);
        $scope.countdown = null;
      }
      //
    };

    $scope.username = "Angular";
    $scope.countdown = 5;
    startCountdown();

  };

  app.controller("MainController", MainController);
}());

//代码在这里
（功能（）{
var app=angular.module（“githubViewer”）；
var MainController=函数（$scope、$interval、$location）{
console.log（“Atentie！”）
var decrementCountdown=函数（）{
$scope.countdown-=1；
如果（$scope.countdown<1）{
$scope.search（$scope.username）；
}
};
var countdownInterval=null；
var startCountdown=函数（）{
countdownInterval=$interval（递减计数，1000，$scope.countdown）；
};
$scope.search=函数（用户名）{
if（倒计时间隔）{
$interval.cancel（倒计时间隔）；
$scope.countdown=null；
}
//
};
$scope.username=“角度”；
$scope.countdown=5；
开始计数（）；
};
应用控制器（“主控制器”，主控制器）；
}());

userdetails.html

<div id="userDetails">
  <h2>{{user.name}}</h2>
  <img ng-src="{{user.avatar_url}}" title="{{user.name}}">
  <div>
    Order:
  </div>
  <select ng-model="repoSortOrder">
    <option value="+name">Name</option>
    <option value="-stargazers_count">Stars</option>
    <option value="+language">Language</option>
  </select>
</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | limitTo:10 | orderBy:repoSortOrder">
      <td>{{repo.name}}</td>
      <td>{{repo.stargazers_count | number }}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>


{{user.name}
订单：
名称
星星
语言
名称
星星
语言
{{repo.name}
{{repo.stargazers_count|number}
{{repo.language}

还有style.css，它是空的。所以在这一点上，我应该在一个单独的窗口中看到如下图所示的内容，并且控制台中没有错误。

但我只看到了标题，如下图所示和错误

有人能帮我理解为什么“工作”不起作用吗？ AngularJS有一些变化，课程不是最新的吗

你打错了

<script scr="app.js"></script>

你打错了

<script scr="app.js"></script>

现在有Angular 2，一个重要的重写。请确保您的plunkr没有使用该选项，因为您提到的课程是针对Angular 1的。@ChrisG，这可能是一个愚蠢的问题，但我如何检查它？或者如何从角度2变为角度1？现在是角度2，一个重要的重写。请确保您的plunkr没有使用该选项，因为您提到的课程是针对Angular 1的。@ChrisG，这可能是一个愚蠢的问题，但我如何检查它？或者如何从角度2变为角度1？

<script src="app.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>