2017-09-13 35 views
0

我遵循Pluctsight中的“AngularJS:入门”课程,并且到达Routing模块,因此我在Plunker中有一些文件,他们可以在Preview页面上看到标题是“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> 

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文件。 所以在这一点上,我应该看到一个独立的窗口,如下图所示,控制台中没有错误。 enter image description here

但我本身只有标题,就像下面的图片 enter image description here 和错误 enter image description here

有人能帮助我理解为什么心不是”工作? AngularJS有一些变化,并且课程不是最新的?

+0

现在有角2,重大改写。确保你的plunkr不使用它,因为你提到的课程是Angular 1. –

+0

@ChrisG,可能是一个愚蠢的问题,但我该如何检查?或者我如何从Angular 2改为Angular 1? –

回答

2

你犯了一个错字

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

应该

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

还要确保使用angularjs核心API的时候,所有的API应该关闭相同的版本。这里,我们使用angularjs(版本1.3.12)&角路(版本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