CODEWITHSUNDEEP
javascriptangularjs
Yorkshireman
Yorkshireman

Reputation: 2343

Global variable in another file can't be accessed

I know this has been asked a ton of times, but I've checked several other questions and answers and I'm still no closer to solving my problem.

index.html:

<!doctype html>
<html lang="en" ng-app="GitUserSearch">
  <head>
    <meta charset="utf-8">
    <title>Github user search</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap_css_overrides/bootstrap_overrides.css">
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="js/secrets.js"></script>
    <script src="js/app.js"></script>
    <script src="js/gitUserSearchController.js"></script>
  </head>

  <body ng-controller="GitUserSearchController as searchCtrl">
    <div class="container">
      <br>
      <form class="form-horizontal">
        <input type="text" ng-model="searchCtrl.searchTerm" ng-change="searchCtrl.doSearch()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">
        <button class="btn btn-primary" ng-click="searchCtrl.doSearch()">Search</button>
      </form>
      <br>
      <ul class="list-group">
        <li ng-repeat="user in searchCtrl.searchResult.items">
          <img ng-src="{{user.avatar_url}}&s=50">
          <a ng-href="{{user.html_url}}">{{user.login}}</a>
        </li>
      </ul>
    </div>
  </body>
</html>

js/secrets.js:

githubToken = "longGithubTokenThatICannotShareHerePublicly";

secrets.js is in .gitignore.

js/gitUserSearchController.js:

githubUserSearch.controller('GitUserSearchController', ['$resource', function($resource) {
  var self = this;

  var searchResource = $resource('https://api.github.com/search/users/');
  var githubToken = githubToken;

  self.doSearch = function() {
    self.searchResult = searchResource.get(
      { q: self.searchTerm, access_token: githubToken }
    );
  };
}]);

When I run the app I can see, using the browser's inspections tools, that the http request is being made without the githubToken string.

When I hard-code the githubToken string into the gitUserSearchController, instead of trying to make it use the supposed githubToken global variable, the http request is made perfectly with the GitHub token present , as it should be.

So it seems to be a problem with how I have the files setup and how the variables are being declared and accessed.

Repo here.

Upvotes: 0

Views: 90

Answers (1)

jfriend00
jfriend00

Reputation: 707536

When you do this:

var githubToken = githubToken;

You're defining a new local variable that "hides" the global by the same name. For any given symbol name, the local scope is searched before the global scope is searched so a local variable with the same name as a global essentially "hides" the global.

Plus, due to "hoisting" of all var definitions in Javascript to the top of the function scope in which they are declared, your above line of code is actually treated like this:

var githubToken;
githubToken = githubToken;

So, you can further see why it's not doing what you want it to do.

Change the name of the local variable to be something different or don't even define a new variable, just use the global directly since there appears to be no reason to assign to a local variable anyway.

Upvotes: 5

Related Questions