Hello i'm trying to do dynamic $http request to filltext.com server.
code:
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta carset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body >
<div class="container" ng-controller="theController">
<div ng-repeat="person in people">
<input type="text" ng-model="person.fname">
<input type="text" ng-model="person.lname">
</div>
</div>
<script>
var app=angular.module('App', []);
app.controller('theController', ['$scope','$http',function($scope,$http){
$scope.getPeople=function(count){
$http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows="+count+"&fname={firstName}&lname={lastName}").
success(function (data) {
$scope.people = data;
})
};
$scope.countSelection=10;
$scope.getPeople($scope.contSelection);
}]);
</script>
</body>
</html>
Problem is when i'm trying to add +count+ into $http.jsonp string parametr i'm not getting data from filltext.com, but when i write rows=5 statically then it's generating data
Thank you for your help :)
Related
So for some reason the HTML page i'm trying to load with templateUrl is not showing up. The files are all in the same directory, console shows no error, it just doesn't load the page elements i'm trying to add. My directive is as simple as:
.directive('tagTeste',function(){
return{
templateUrl: 'templateUrl.html'
};
});
My template html i'm trying to load:
<!doctype html>
<html ng-app="teste">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<table border="1" width="500" height="150">
<thead>
<tr>
<td>Nome</td>
<td>Telefone</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="pessoa in pessoas">
<td>{{pessoa.nome}}</td>
<td>{{pessoa.telefone}}</td>
</tr>
</tbody>
</table>
<form>
<p> Nome: <input type="text" ng-model="nomenovo" required> </p>
<p> Telefone: <input type="number" ng-model="numeronovo" required> </p>
<input type="button" ng-click="add()">
</form>
<body>
</html>
My index page:
<!doctype html>
<html ng-app="teste">
<head>
<h1 align="center">Table teste</h1>
<meta charset="utf-8">
<title>Teste</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="repeaterdirective.js"></script>
<script type="text/ng-template" id="templateUrl.html">
</head>
<div ng-controller="index" align="center">
<body>
<div tag-teste></div>
</body>
</div>
</html>
Remove <script type="text/ng-template" id="templateUrl.html"> from index.
And clear a bit templateUrl.html. Tags as <html> and <body> are already contained in index.
Take a look at plunker.
Updated after comment:
Change index as:
<!doctype html>
<html ng-app="teste">
<head>
<meta charset="utf-8">
<title>Teste</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="index" align="center">
<h1 align="center">Table teste</h1>
<div tag-teste></div>
</div>
</body>
</html>
If you use templateUrl while loading your file in Chrome browser with the file:///, protocol you will always get this error.
On the other hand Mozilla Firefox will allow it, so will Microsoft Edge.
The other solution is to serve your pages from an HTTP server.
An easy one to use is http-server.
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
I am new in angular and can't able to find error in below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
function testController($scope){
$scope.data = {message: "test123"};
}
</script>
</head>
<body>
<div ng-app="">
<div ng-controller="testController">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
The above code print <<data.message>> as output. Please let me know where I go wrong.
You haven't defined your angular module.
For example
var app = angular.module('app', []);
Then in your HTML:
<html ng-app="app">
You need to register the controller in your angular app.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
var DummyCtrl = function ($scope){
$scope.data = {message: "test123"};
}
angular.module('app', [])
.controller('DummyCtrl', DummyCtrl);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="DummyCtrl">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
You need to register your controller with angular.
angluar.module(APP_NAME).controller("testController", testController);
I am getting AngularJS bad argument error while running the following example, please let me know where I am doing wrong ? Actually the following code is working fine if I run outside/normally, but when I copy/paste this code in my application, it is giving the following error. (this page/tab is displaying from my application's controller like: TestController, which is available in coffeescript. but I don't need any coffeescript for this requirement, I need it in AngularJs. So, In this tab, I need to display the below code/button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApplication', []);
myApp.controller('TestController', ['$scope', function($scope){
$scope.test = function(){
alert("Success");
}
}]);
</script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="TestController">
<div class="tab-pane" id="wizards">
<button type="button" ng-click="test();">Test</button>
</div></div></div>
</body>
</html>
Error: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined
This Plunker is working for me
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="WizardController">
<button ng-click="test()">Test</button>
</div>
</div>
</body>
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!