I have the error of angular "Error: ng:areq Bad Argument", the thing here is that if I put the javascript code directly in the html, as bellow, there is no mistake and it works, but when the same code is called from another file then is where the error appears.
<!DOCTYPE html>
<html lang="en" ng-app="aplicacion" >
<head>
<meta charset="UTF-8">
<title>Cuestionarios y asÃ</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- <script type="text/javascript" src="prueba.js"></script> -->
<script type="text/javascript">
var aplicacion = angular.module('aplicacion', []);
aplicacion.controller('cuestionacio', function($scope, $http, $document) {
$scope.preguntas = [];
$scope.cargaCuestionario = function(){
$http({
method: 'GET',
url: 'http://localhost:8000/serv/pregunticas/?format=json'
}).
success(function(data) {
console.log('ESto');
console.log(datos);
}).
error(function(datos) {
console.log(datos);
alert('Error obtienedo el cuestionario');
});
};
});
</script>
</head>
<body>
<div ng-controller="cuestionacio" ng-init="cargaCuestionario()">
<div ng-repeat="item in preguntas">
<p>{{item.pregunta}}</p>
<br>
<div ng-if="{{item.tipo}}">
<select ng-repeat>
</select>
</div>
</div>
<div>
<p>calendario</p>
<br>
<p>mapa</p>
</div>
</div>
</body>
</html>
I hope someone can help me with this. Thanks
P.S. Sorry for the horrible english.
Related
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>
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
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 just want to test opening a left modal with the help of ngAside used at the following Repository:
https://github.com/dbtek/angular-aside
I think I am doing it right, still can find a js error. Can someone help?
index.html:
<html>
<head>
<!-- Required CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Required Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="../js/angular-aside.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
{{name}}
<script>
//module declaration
var app = angular.module('myApp',['ui.bootstrap', 'ngAside']);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
var asideInstance = $aside.open({
templateUrl: 'aside.html',
controller: 'AsideCtrl',
placement: 'left',
size: 'lg'
});
});
app.controller('AsideCtrl',function($scope){
});
</script>
</body>
</html>
aside.html
Hello World!
ERROR:
To use the aside service, you have to inject it like this (notice the $aside injection in the constructor) :
app.controller('myCtrl',function($scope, $aside){
...
});
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