0

I deployed an application to Heroku that uses Angular.JS on rails. It works when I open it locally, but on Heroku, the {{}} brackets dont pull data, instead it just displays as {{}} (e.g. {{name.Title}} instead of actaully getting the title). How can I fix this?

the application itself is very simple, rails with no database, nothing, just one angular page that takes information from a public API and displays it.

Here is my code: app/assets/javascripts/controllers/mainindexCtrl.js.coffee

@IndexCtrl = ($scope, $http)->

  $scope.movieList = null
  $scope.bigDisplay = null
  $scope.submitInput = (movie) ->

    $http(method: "GET", url: "http://www.omdbapi.com/", params: {s: movie}

    ).success((data, status, headers, config) ->
      $scope.movieList = data.Search
    ).error (data, status, headers, config) ->

  $scope.movieInfoGet = (movie) ->
    index = $scope.movieList.indexOf(movie)
    $http(method: "GET", url: "http://www.omdbapi.com/", params: {t: movie.Title}

    ).success((data, status, headers, config) ->
      $scope.movieList[index].Details = data

    ).error (data, status, headers, config) ->
      console.log "error "

  $scope.bigDisplayGet = (movie) ->

    $http(method: "GET", url: "http://www.omdbapi.com/", params: {t: movie.Title}

    ).success((data, status, headers, config) ->
      $scope.bigDisplay = data
    ).error (data, status, headers, config) ->

app/views/index.html.erb:

  <div data-ng-controller="IndexCtrl">
    <div class="col-md-4">
      <form data-ng-submit="submitInput(searchInput); hideOrNot=true">
        <input class="search" type="search" data-ng-model="searchInput">
      </form>
      <div data-ng-repeat="name in movieList">
        <h4 data-ng-click="hideOrNot = !hideOrNot; movieInfoGet(name); bigDisplayGet(name)">{{name.Title}}</h4>
          <ul data-ng-hide="hideOrNot">
            <!-- <li><img src={{name.Details.Poster}}></li> -->
            <li>year: {{name.Details.Year}}</li>
            <li>imdb: {{name.Details.Rated}}</li>
            <li>released: {{name.Details.Released}}</li>
          </ul>
      </div>
    </div>
    <div class="col-md-8">
      <ul>
        <li>{{bigDisplay.Title}}</li>
        <li><img src={{bigDisplay.Poster}}></li>
      </ul>


      <h3>big space</h3>
    </div>

  </div>
<!-- </div> -->

error I get when I first get on the page:

Error: [$injector:unpr] Unknown provider: tProvider <- t
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=tProvider%20%3C-%20t
    at http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:5205
    at http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:21648
    at Object.n [as get] (http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:20909)
    at http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:21743
    at n (http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:20909)
    at r (http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:21194)
at Object.i [as instantiate] (http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:21338)
at http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:5:5594
    at http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:30928
    at o (http://murmuring-dusk-6700.herokuapp.com/assets/application-abaefe0f7bf3e04087fe7ffcbdb9b278.js:4:5648)
yimmy
  • 436
  • 6
  • 13
  • 1
    It will great if you post your angular code here. you will get ans. – Sudarshan Kalebere Aug 11 '14 at 09:17
  • 2
    Seems like problem with your dependencies are not getting injected please refer this answer http://stackoverflow.com/questions/19671962/uncaught-error-injectorunpr-with-angular-after-deployment – Sudarshan Kalebere Aug 11 '14 at 09:33
  • You need to create angular module and follow the instructions in above link. – Sudarshan Kalebere Aug 11 '14 at 09:34
  • some dependency that is available during local build is not included in your dist build. You will have to inspect your build and see what libraries are not included after the build. – Andre Paap Aug 11 '14 at 09:49
  • How do I inspect which libraries are not included after the build? Also, Sudarshan, I'm not sure which answer you're referring ot in that link, the one with 29 upvotes? Like changing the way I'm defining stuff, or hte later stuff they talk about? – yimmy Aug 11 '14 at 13:25
  • you need to study it @yimmy and pick which one best suits for you. – Sudarshan Kalebere Aug 11 '14 at 13:29
  • also just to check whether you have working angular app or to check your binding you do this {{1+2}} output should be 3, one suggestion is i cant find app module in your code so try initializing your app. – Sudarshan Kalebere Aug 13 '14 at 06:21
  • Thank you, it works now. The picture thing was a whole other unrelated problem (with the API itself), but I did a workaround so its works now. THank you! – yimmy Aug 13 '14 at 06:52

1 Answers1

0

usually angular is not initialized properly. In the console of your browser, do you see errors and in the net tab, are all resources loaded?

Andre Paap
  • 751
  • 5
  • 9
  • I added the errors I see when I first get on the page (in the console log I mean). Thanks for your help! – yimmy Aug 11 '14 at 09:31