I am trying to get AngularJS to parse all the data given to it in JSON from a Spring rest controller. I am able to get the data to parse and everything but whenever angular repeats in the loop it print a text of "> " on the page.
My javascript
var HOST_SERVER = "http://localhost:8080";
angular.module('exchange', [])
.controller("Book", function ($scope, $http) {
$http.get(HOST_SERVER + "/exchange/get")
.then(function (response) {
$scope.books = response.data;
});
});
The html
<!DOCTYPE html>
<html data-ng-app="exchange">
<head>
<title>The Book Exchange</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="jsengine01.js"></script>
<meta charset="utf-8" />
</head>
<body>
<!-- test stuff-->
<div data-ng-controller="Book">
<div data-ng-repeat="book in books">>
<h1>{{book.title}}</h1>
<h4>By {{book.author}}</h4>
</div>
</div>
</body>
</html>
I tested the controllers and they return the appropriate json responses but I can post those as well if it would be helpful
There is a second > in your code that is being repeated...
<body>
<!-- test stuff-->
<div data-ng-controller="Book">
<div data-ng-repeat="book in books">> <!-- Remove the second '>' -->
<h1>{{book.title}}</h1>
<h4>By {{book.author}}</h4>
</div>
</div>
</body>
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
im trying to fetch data from a json file but i doesnt work, i already check every options here but no one works for me, none of the code its working, i dont know if i have to import something else, and the json file its in the same level of the index file, hope you can help me
appClients.js
(function(){
var app = angular.module('customer',[]);
alert('Success');
app.controller("CustomerController",function($scope,$http){
$http.get('../customer.json')
.success(function(data) {
// $scope.phones = data;
alert('Success');
})
.error(function(data){
alert('Error');
});
});
});
index.html
<!DOCTYPE HTML>
<html ng-app="customer">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="Master" ng-controller="CustomerController as customer">
<script type="text/javascript" src="js/angularjs.min.js"></script>
<script type="text/javascript" src="js/appClients.js"></script>
<header id="MasterHeader">
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6" id="CustomerList" ng-repeat="product in customer.clients">
<h3>{{product.id}}</h3>
</div>
<div class="col-lg-6" id="CustomerDetails">Details</div>
</div>
</div>
</div>
<footer id="MasterFooter">
</footer>
</body>
</html>
It looks like your IIFE (Immediately-invoked function expression) is not being executed. Update your appClient.js file to
(function(){
var app = angular.module('customer',[]);
alert('Success');
app.controller("CustomerController",function($scope,$http){
$http.get('../customer.json')
.success(function(data) {
// $scope.phones = data;
alert('Success');
})
.error(function(data){
alert('Error');
});
});
})();
Note the additional () on the final line. This should allow you to see the initial "Success" alert.
If your ajax call then succeeds you would need to make the $scope property that the result is set to consistent with the $scope property referenced in the HTML. Based on the current snippet you seem to be setting the result to $scope.phone in the controller, but reference $scope.customer in your HTML.
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;
});
});
I am running an AngularJS application/controller. My goal is to initialize and use the impress.js library on a page that is being dynamically loaded into my main home page. However, when I try to initialize the library, the page does not load. Attached is a snippet of the controller and html file.
NOTE: When I print the impress() object to the console, it is not null, and has the required functions. It is my suspicion that the impress() object is not hooking up to the page correctly.
Controller:
'use strict';
// Create the angular module
var cmodule = angular.module('coverage', ['ngRoute'])
// Create the coverage controller
cmodule.controller('coverageController', function($scope) {
console.log("Entering controller");
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: true, // <-- This is the key
success: function () {
console.log(impress());
impress().init();
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
console.log("About to require");
angular.element(document).ready(function () {
require("/content/libraries/impress.js");
});
});
HTML File:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>My Coverage</title>
<link rel="stylesheet" href="/content/styles/team1.css">
</head>
<body class="impress-not-supported">
<!--
For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!-- Now the fun begins -->
<div id="impress">
<!-- The background image -->
<div class="present" data-x="0" data-y="0">
<!-- Place Image here -->
</div>
<!-- Example content -->
<div id="url-ident" class="step" data-x="0" data-y="0">
<q>Ready to view your coverage?</q>
</div>
<!-- Example content -->
<div id="step1" class="step" data-x="500" data-y="0">
<p>Questions start here!</p>
</div>
</div> <!-- /div impress -->
<script type="text/javascript" src="/content/libraries/impress.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!--script type="text/javascript">impress().init();</script-->
</body>
</html>
This problem was fixed by using the jmpress.js library instead, found here.
I am learning to use Restify to build a Restful API and work with Angular.
Below is my structure:
Project
page_admin
core.js
index.html
node_modules
restify
mongojs
server.js
I had set up server and implemented several API calls.
Below news API return a list of JSON data in browser:
`http://localhost:8080/news`
`[{"_id":"53b2a2c3373551813dfe8b91","title":"first","subtitle":"foobar","textbody":"","postedOn":"2014-07-01T12:00:03.215Z"},{"_id":"53b2a122373551813dfe8b8e","title":"my second","subtitle":"my second title","textbody":"node is cool","postedOn":"2014-07-01T11:53:06.389Z"},{"_id":"53b2a0cd373551813dfe8b8d","title":"delay announcement","subtitle":"sub ","textbody":"I am the text body","postedOn":"2014-07-01T11:51:41.678Z"}]`
here is my code to handle client side route:
server.get('/', restify.serveStatic({
'directory': './page_admin',
'default': 'index.html'
}));
My index.html is simple:
<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="bluesky">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>My test app</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>My example is working <span class="label label-info">{{ news.length }}</span></h1>
</div>
<!-- TODO LIST -->
<div id="todo-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<!-- LOOP OVER THE TODOS IN $scope.todos -->
<div class="checkbox" ng-repeat="new in news">
<label>
<input type="checkbox" ng-click="deleteTodo(new._id)"> {{ new.subtitle }}
</label>
</div>
</div>
</div>
</div>
</body>
</html>
core.js is like this:
var bluesky = angular.module('bluesky', []);
function mainController($scope, $http) {
$scope.formData = {};
$http.get('/news')
.success(function(data) {
$scope.news = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
}
when I try to navigate to: http://localhost:8080
I got my index page but it shows me:
'My example is working {{ news.length }}
and in console, I saw following error:
GET `http://localhost:8080/core.js` 404 (Not Found)
localhost/:24
Uncaught Error: No module: bluesky
angular.min.js:18
what I just missed so that the angular is not retrieving the data?
=============================================================
upate
if I directly include core.js put code inside , then it works.
but, how to solve this 404 not found issue? just don't want to include all js files in the index page.
As far as my knowledge about angular js, controller is not defined in your module. So instead of using function mainController($scope, $http) {
....
}
you should define controller inside the module bluesky as follows
bluesky.controller("mainController",function($scope,$http)
{
....
});