2017-09-13 5 views
0

私はPlualsightの "AngularJS:Getting Started"コースに従っています。私はRoutingモジュールに到達しています.Plunkerにはいくつかのファイルがあります。 "Github Viewer"と検索バー。しかし、私はまだコンソールでエラーが発生し、なぜ私のコードはコードと同じでなければならないのかわかりません。Pluralsight - AngularJS:開始する

だから私は、次のファイルがあります。 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="[email protected]*" data-semver="1.3.14" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script data-require="[email protected]*" 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> 

<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にuserdetails.html

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

。 この時点で、私はsepareteウィンドウで次の図のように表示され、コンソールにエラーは表示されません。以下の写真の enter image description here とエラー enter image description here

よう enter image description here

しかし、私SEタイトルだけは、誰かが私がなぜイマイチの仕事を理解するのに役立つだろうか? AngularJSにいくつか変更があり、コースは最新ではありませんか?

+0

角度2が今ありますが、重要な書き換え。 plunkrがそれを使用していないことを確認してください。あなたが言及しているコースはAngular 1のためです。 –

+0

@ChrisG、おそらくばかげた質問ですが、どうすれば確認できますか?または、角度2から角度1に変更するにはどうすればよいですか? –

答えて

2

あなたはタイプミス

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

はまたangularjsコアAPIを使用した場合、すべてのAPIは、同じバージョンオフであることを確認してください

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

する必要がありました。ここでは、(版1.3.12)&角度ルート(版1.6.2)をangularjsを使用している

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

関連する問題