CODEWITHSUNDEEP
javascriptjqueryangularjs
Ryan
Ryan

Reputation: 85

ng-click works kind of

I am learning angular js right now and have hit another rut. I am trying to make my buttons change the movie ID. I know it is recognizing the click because I had it change some words in the HTML file to test it. I think it isn't talking to my JS file.

I found this during my search http://jsfiddle.net/7Sg6a/. The docs just have an expression inside the parenthesis and this example has parameters. I tried both and a few other but neither worked.

Here is my latest failed attempt. If I could get a nudge in the right direction I would be very grateful.

<!DOCTYPE HTML>
<html lang = "en" ng-app="movies"><!-- lets page use controllers/movies.js-->

<head>
  <title>Watch a movie!</title>

  <meta charset = "UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="">
  <meta name="keywords" content="">

  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.mysite.com/rss/rss2.xml" />
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
  <!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"> -->
  <!-- Preloading scripts? -->
  <script src="js/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
  <!--<script src="js/angular-resource.min.js" type="text/javascript"></script>-->
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <!-- <script src="js/bootstrap.js"></script> -->
  <script src="controllers/movies.js"></script>

</head>
<body>
  <div id="wrapper">
    <header>
      <div id="logo">
    <img src="images/logo.png" alt="Cinema Plus - Movies plus a whole lot more." class="img-responsive">
      </div>
    </header>

    <nav>
      <div class='row-fluid'>
    <div class="span2"></div>
    <button ng-click="nowShowing()" type="button" class="btn btn-primary btn-lg span4 "><h3>NOW PLAYING</h3></button>
    <button ng-click="comingSoon()" type="button" class="btn btn-default btn-lg span4 "><h3>COMING FRIDAY</h3></button>
    <div class="span2"></div>
      </div>
    </nav>

    <div id='content' class='row-fluid'>

      <div class='span8 info'>
        <h2 ng-controller = "movieController">{{movies.title}}</h2>
    <h2 ng-controller = "movieController">RATED: {{movies.mpaa_rating}}</h2>
    <h2 ng-controller = "movieController">{{movies.runtime}} Minutes</h2>
    <p ng-controller = "movieController">DESCRIPTION: {{movies.synopsis}}</p>
      </div>

      <div class='span4 poster'>
        <img ng-controller = "movieController" src={{movies.posters.original}} alt={{movies.title}} class="img-responsive">
      </div>

    </div>

    <div>
        Note: This theator only plays one movie at a time. film will be hard coded into the app. Would like to see it fed by RSS orsomething in the future.
    </div>

  </div> <!-- END WRAPPER -->

</body>
</html>

JS

var movies = angular.module('movies', []);

    movies.controller('movieController', function ($scope, $http) {

        $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
            params: {
                apikey: 'wq98h8vn4nfnuc3rt2293vru',
                callback: 'JSON_CALLBACK'
            }
        })
        .success(function (data) {
            $scope.movies = data;
        }); 

    });

   movies.click('nowShowing', function ($scope){
       alert("asdasd");
   });

how long until I actually get this and can stop asking stupid questions?

Upvotes: 0

Views: 140

Answers (1)

Brian Vanderbusch
Brian Vanderbusch

Reputation: 3339

your .click function doesn't belong. You're using Angular like jQuery, and it's more (awesome) than that. You need to put the nowShowing function and such inside your controller:

var movies = angular.module('movies', []);

movies.controller('movieController', function ($scope, $http) {

    $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
        params: {
            apikey: 'secret',
            callback: 'JSON_CALLBACK'
        }
    })
    .success(function (data) {
        $scope.movies = data;
    });

    $scope.nowShowing = function(){
          //whatever is in here will execute when a user interacts with an element with the ng-click="" directive    
    } 

});

Also, I would highly recommend you create a service for your http requests to your api. You are creating a tightly coupled app with your current approach.

movies.factory('moviedata',function($http){

return 

    $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
        params: {
            apikey: 'secret',
            callback: 'JSON_CALLBACK'
        }
    })

})

then 'inject' it in your controller like so:

movies.controller('movieCtrl',function($scope, moviedata){

   //resolve returned promise
   moviedata.success(function(data){
        $scope.data = data;
    });

    $scope.nowShowing = function($log){
          //whatever is in here will execute when a user interacts with an element with the ng-click="" directive
      $log.info("nowShowing method fired");


    }


})

Upvotes: 2

Related Questions