Question

我遵循＆＃34; AngularJS：入门＆＃34;当然来自Plualsight，我到达路由模块，所以我在Plunker中有一些文件，他们可以在预览页面看到的标题是＆＃34; Github Viewer＆＃34;和搜索栏。但我仍然在控制台中遇到错误，我不知道为什么，我的代码应该和他们的代码一样。

所以我有以下文件： app.js

(function() {

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

  app.config(function($routeProvider) {
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",
        controller: "MainController"
      })
      .otherwise({redirectTo: "/main"});
  });

}());

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>

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

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>

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

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

有人可以帮助我理解为什么不是＆＃39;工作？ AngularJS的一些变化和课程是不是最新的？

Answer 1

你弄错了

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

应该是

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

同时确保在使用angularjs core api时，所有API都应该关闭相同的版本。在这里你使用angularjs（版本1.3.12）＆amp; angular-route（版本1.6.2）

将两者都更改为1.6.2或最新

<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>

Demo Here

Pluralsight - AngularJS：入门

1 个答案: