I have done the following in AngularJS. The data is obtained from the URL mentioned.
If you open the URL, you can see the response it provides.
However, I am not able to obtain the title inside HTML via angularjs.
I am getting a blank result. What am I doing wrong?
Has it something to do with JSON encoding?
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
}
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data in mydata">
{{data.Title}}
</li>
</ul>
</body>
</html>
</html>
There is quite a lot wrong with your code :-(
Syntax errors, not injecting $http, the response is a single movie instead of a collection.
Try the following.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
{{mydata.Title}}
</body>
</html>
Example with a collection:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?s=True%20Grit').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data1 in mydata.Search"> {{data1.Title}} </li>
</ul>
</body>
</html>
I created a working plunker mistakes including: not creating an app module, not injecting $http, trying to iterate over "data" which your scope doesn't know about - since you have "mydata" in your scope. and iterating over an object the wrong way. (it would be correct to iterate like this if you were getting an array of objects) see this answer for details
Related
I am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
I'm trying to pull the list of current streams from the API and iterate that information with AngularJS. When I put in the JSON data directly in the js file, Angular works fine. However, when using an http request as shown below, I get a blank page. I've searched high and low, but have had trouble applying it to my specific issue. Any help is appreciated. Thanks!
Http file:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
Repeat.js
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.jsonp("https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK")
.success(function(response) {$scope.names = response.streams;});
});
https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK isn't JSONP (it is plain JSON).
You need a server that will make a JSONP response in order to use $http.jsonp().
Well, using $http.get('url') does work. I was incorrectly thinking the 'data' object was an array and passing "[0]" to it which was incorrect. Below is the code and it works to pull the info and repeat the data as indicated in the markup. Thanks for your help!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in data.streams">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.get('https://api.twitch.tv/kraken/streams?').success(
function(data, status){
$scope.data = data;
});
});
Hello I had watched an tutorial about AngularJS. In this tutorial was showed how to build an easy hello world app but when I try the exactly same code it dosen't work.
All scripts are loaded well. Has someone an idea?
index.html
<!DOTYPE html>
<html ng-app>
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl">{{test}}</div>
</body>
</html>
Controller
function MyFirstCtrl($scope) {
$scope.test = "Hello World";
}
My output is {{test}}.
You need to give name to your ng-app directive, a different way using Controller as syntax, would be:
<!DOTYPE html>
<html ng-app="myApp">
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
</body>
</html>
and controller js
var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
this.test = 'Some test';
});
A jsFiddle Demo
You must create the app like this:
angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
$scope.test = "Hello World";
}]);
And load in html ngApp the respective app:
<html ng-app="myApp">
You need to pass the angular script and your controller script
<!DOTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="path/to/controller.js"></script>
</head>
...
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);
I tried to look at documentation but it seems i am missing something. I am trying to inject html which is bound to a json. It works fine if the html is declared but when i inject it despite calling the $compile it is not working. Here is the code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script src="todo.js"></script>
<script>
function TodoCtrl($scope)
{
$scope.todos = [{text:'LearnAngularJS'}, {text:'Unlearn Angular'},];
}
$(document).ready(function()
{
$('#div1').html(
$compile('<div ng-controller="TodoCtrl"><ul><li ng-repeat="todo in todos" compile="text">{{todo.text}}<li><ul><div>')(scope));
});
</script>
</head>
<body>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}}
<li>
<ul>
</div>
<div id="div1">
<div>
</body>
</html>
http://plnkr.co/edit/NQQBgQKBWEqKHxGwnI0h?p=preview
As Ajay pointed out, you'll have to associate one of your scope with template.