ng-click works kind of - javascript

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?

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

Related

Making a request to API on keyup but I cant access something in the scope

Ive been trying for the past couple of hours but for I can't seem to figure out why I can access $scope.FeatureGroup to add to my url
Any ideas?
angular.module('ngRepeat', ['ngAnimate',]).controller('repeatController', function($scope, $http) {
$scope;
$scope.FeatureGroup = 50000;
$scope.ShowMeData = function($scope){
var url = 'URLHERE' + $scope.FeatureGroup;
$http.get(url).success(function(data) {
console.log(data);
//$scope.Object = data;
});
}
});
<html lang="en"><head>
<meta charset="UTF-8">
<title>Example - example-ng-repeat-production</title>
<link href="animations.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
There are Features - Please click them to see the page:
<br><input type="number" ng-model="FeatureGroup" ng-value="10" ng-keyup="ShowMeData()">
<br><input type="search" ng-model="q" placeholder="filter Features..." aria-label="filter friends">
<ul class="example-animate-container">
{{FeatureGroup}}
<!-- ngIf: Objects.length === 0 -->
<!-- ngRepeat: feature in Object | filter:q as results -->
</ul>
</div>
</body>
</html>
That is because of following line. You are overriding the $scope variable:
$scope.ShowMeData = function($scope){
You are really not passing any scope variable while calling the function
ng-keyup="ShowMeData()".
Just change it to:
$scope.ShowMeData = function(){
and it should work.

JQuery always loads before AngularJS document

I am using AngularJS to display results of my API (my first attempt at AngularJS), and want to use Jquery to add some effects to the page.
The problem is, Jquery seems to load before Angular has time to add images and other elements to the page. This prevents the JQuery effects from working I have been through numerous answers and tutorials, which center around the following solutions, none of which have worked for me.
Another approach suggested was to put the JQuery into "directives", but how would I put the contents of 3 large javascript libraries into an AngularJS directive? Sorry, I'm new in Javascript!
Here are the unsuccessful attempts:
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Angular is loaded !-->
angular.element(document).ready(function () {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Jquery-main is loaded !-->
$(document).ready(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
Here are the relevant extracts of my code:
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>MyWebpage</title>
<!-- Template includes !-->
<link media="all" rel="stylesheet" href="./css/slider-revolution.css">
<link media="all" rel="stylesheet" href="./css/all.css">
<link media="all" rel="stylesheet" href="./css/style.css" class="color">
</head>
<body ng-app=“myApp">
<div ui-view></div>
</body>
<!-- Application Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>
<!-- Template scripts !-->
<!-- Application Scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/indexController.js"></script>
app.js :
...
state('index', {
url: '/',
templateUrl: '../views/indexView.html',
controller: 'IndexController as user'
...
indexView.js
...
<!— JQuery plugin gallery -->
<div class="gallery responsive">
<div class="mask" ng-if=“myStuff.banner">
<ul class="slideset">
<ul style="margin:0px; padding:0px">
<li class="slide" data-transition="slidedown" data-slotamount="10" data-masterspeed="300" data-thumb="" ng-repeat="banner in user.banner" width="300">
<! -- load a big ol’ picture !—>
<img ng-src="../../storage/img/{{banner.image.image_url}}">
<div class="caption text-box lfl lfl" data-x="-91" data-y="140" data-speed="300" data-start="800" data-easing="easeOutExpo">
<h1><span>{{banner.banner_title}}</span></h1>
<a class="more" href="{{banner.banner_link}}">READ MORE</a>
<div style="" class="tp-leftarrow tparrows default"></div>
<div style="" class="tp-rightarrow tparrows default"></div>
</div>
</li>
</ul>
</div>
</div>
...
indexController.js:
...
// gets all the data from my API, including image src
vm.getMyStuff = function() {
$http.get('http://localhost:8888/api/public/myapistuff).success(function(myStuff) {
vm.myStuff = myStuff;
}).error(function(error) {
vm.error = error;
});
}
}
})();
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});

Function not invoked on button click but invoked on form load

In the below code snippet, the button clicks for filepath1 and filepath2 do not fire the function readCSV().
However, readCSV() is triggered on form load.
I'd expect the function to be triggered on button click as well.
Appreciate if you can help me out here.
Thanks!
<!DOCTYPE html>
<html ng-app="test" ng-controller="homePage">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<title>TEST</title>
<link rel="stylesheet" href="_css/compiled.css" />
<link rel="stylesheet" href="_css/style-fonts.css" />
<link rel="stylesheet" href="_css/scrollbar/perfect-scrollbar.min.css" />
<script src="_js/libs/angular.min.js"></script>
</head>
<body>
<header class="wrapper headerWrapper mainColorBG">
</header>
<section class="lightBlueBar">
<h2 class="inlineBlock redText"><span class="circularIcon icon-flask"></span> <span class="text">Reports</span></h2>
<div class="searchBar inlineBlock">
<form method="get" ng-submit="readCSV()">
<div ng-controller="submitController">
<label ng-model="filePath" class="fileLabel inlineBlock button grayButton"><span class="icon-cloud-upload"></span><span>Upload</span> <input type="file" ng-model="csvPath"/></label>
<button ng-model="filePath1" ng-click="readCSV()" class="button blueButton"><span class="icon-paper-plane"></span> SUBMIT</button>
<button ng-model="filePath2" ng-click="readCSV()">submit</button>
</div>
</form>
</div>
</section>
</body>
</html>
Script section
var test=angular.module("test",[]);
test.controller('submitController',function readCSV($scope, $http){
var csv = "hello";//$scope.csvPath;
$scope.filePath1;
alert(csv);
});
The way you have declared the controller is wrong. readCSV is not needed here in the controller. And the controller is always initiated when the app is loaded.
For you to call a function do something like this
var test=angular.module("test",[]);
test.controller('submitController',function($scope, $http){
$scope.readCSV=function(){
//Do something
};
});
Try:
var test = angular.module("test", []);
test.controller('submitController', function ($scope, $http) {
$scope.readCSV = function () {
var csv = "hello";//$scope.csvPath;
$scope.filePath1;
alert(csv);
}
});

adding ngAnimate to controller makes app to not displaying content

I'm trying to add animation when changing the content inside a my html using ng-inculde, but when ever i add ['ngAnimate'] in the declaration of the controller all of the content inside the main tag simply dissapear.
HTML:
<div ng-app="myApp">
<div ng-controller="firstCtrl">
<div id="wrapper">
<main ng-init="nav('data/table.html')">
<div ng-include="filePath">
</div>
</main>
</div>
</div>
</div>
JS:
var myApp = angular.module("myApp",['ngAnimate']);
myApp.controller ('firstCtrl', function($scope, PersonService){
$scope.users = PersonService.list();
$scope.saveUser = function () {
PersonService.save($scope.newuser);
$scope.newuser = {};
}
$scope.nav = function(path){
$scope.filePath = path;
}
})
this code wont work since im adding ['ngAnimate'] but if i'll delete it and keep the brackets empty the content will display. can someone tell me why and if its the correct way to get the animation when the content changes (table.html changes to a different file)
this is the header part incase needed:
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.6/angular-animate.js"></script>
<script src="js/angular.min.js"></script>
</head>
Give reference of angular-animate.min.js file in order to use 'ngAnimate' module. You have to give reference of this file after angular.min.js.

Adding Config/RouteProvider breaks ng-repeat

This issue is most likely due to my naivity as I am just beginning to teach myself JS and AngularJS in parallel. I have put together a simple example of what I am seeing in this plunker. Basically, my app handles an ng-repeat correctly, but as soon as I add the config method it does not replace {{menuItem.itemName}} with the value of the variable. Now, my config method is currently empty, so that may be the problem. But, I assumed I could just have a no-op method and add routes as I went, testing each one.
Here is my HTML:
<html ng-app="site">
<head>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js></script>
<script src ="script.js"></script>
<link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
<title>Site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller='mainCtrl'>
<div id="main-container">
<div id="header">Site
</div>
<div id="side-bar">
<ul id="side-bar-menu">
<li ng-repeat="menuItem in menuItems"><span class="underline"><a ng-href={{menuItem.itemLink}}>{{menuItem.itemName}}</a></span></li>
</ul>
</div>
</div>
</body>
</html>
JS:
'use strict';
angular.module('site',[]).
controller('mainCtrl', ['$scope', function($scope) {
$scope.menuItems = [{
itemName: "Home",
itemLink: "#Home"
}];
}]);
//enabling the config breaks the output (and of course ;
//above needs to be replaced with . when config enabled)
/*config(['$routeProvider', function($routeProvider) {}]);*/

Categories