i have following code but my page does not show data...;( i don't now why please help me, i am new in angularjs. I AM calling web API its working fine console log show json record, but in my page record does now show... why
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:9000/employees").then(function (response) {
$scope.myData = response.data;
});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<br>
<p>Today's welcome message is:</p>
<!--<h1>{{myWelcome}}</h1>-->
<ul>
<li ng-repeat="x in myData">
<li ng-repeat="x in myData">
{{ x.ProductName }} ',' {{ x.ProductDescription }}
</li>
<!--{{ x.ProductName + ', ' + x.ProductDescription }}-->
</li>
</ul>
</div>
</body>
</html>
result = [{"ID":1,"ProductName":"xcxc","ProductDescription":"xcxc","UnitPrice":2323,"QtyAvailable":23}]
its show below error in chrome console log
XMLHttpRequest cannot load http://localhost:9000/employees. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
<li ng-repeat="x in myData">
{{ x.FirstName }} ',' {{ x.LastName }}
</li>
All the things are fine in your code, might angular not loaded or http not responded correct:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myData = [{
FirstName: "firts1",
LastName: "last1"
}, {
FirstName: "firts2",
LastName: "last2"
}, ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<br />
<!--// <p>Today's welcome message is:</p>-->
<!--<h1>{{myWelcome}}</h1>-->
<ul>
<li ng-repeat="x in myData">
{{ x.FirstName + ', ' + x.LastName }}
</li>
</ul>
</div>
</body>
</html>
<li ng-repeat="x in myData">
{{x.FirstName}}, {{x.LastName}}
</li>
We have to use JSONP to prevent the cross origin policy.
var url = "http://localhost:9000/employees?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data){
console.log(data);
});
or
If you want to disable policy then follow below steps
For Windows... create a Chrome shortcut on your desktop.
Right-clic > properties > Shortcut
Edit "target" path :
"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security
Then try with your existing code
Related
I am very new to angular js and I have been hanging around with api. The following code shows the name of the user and the name of the user when it is clicked. What I'm trying to do is I want the user to get the todos title when the button is clicked. https://jsonplaceholder.typicode.com/todos. how can I do that ? I know it's a bit confusing, but I'm waiting for you guys.
jsonplaceholder.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="script.js"></script>
<head>
<title>JsonPlaceHolder</title>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.name }}
<button ng-click="getResult($index)">Click</button>
</li>
</ul>
<h2>Results</h2>
<p><code>Title : </code> {{indexResult.name}}</p>
</div>
</body>
</html>
script.js
var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
app.controller('customersCtrl', function($scope, $http) {
$http.get(root).then(function (response) {
$scope.myData = response.data;
});
$scope.getResult = function($index) {
$scope.indexResult = $scope.myData[$index];
};
});
I write your code like this:
var app = angular.module('myApp', []);
var root = 'http://jsonplaceholder.typicode.com/users';
var todos= 'https://jsonplaceholder.typicode.com/todos'
app.controller('customersCtrl', function($scope, $http) {
$http.get(root).then(function (response) {
$scope.myData = response.data;
});
$scope.getResult = function(item) {
$scope.titleList = [];
$http.get(todos).then(function (response) {
$scope.todosList = response.data; }).then(()=> {
$scope.todosList.map(it=> {
if (it.userId === item.id){
$scope.titleList.push({title: it.title , id: it.userId});
}
});
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="app.js"></script>
<head>
<title>JsonPlaceHolder</title>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.name }}
<button ng-click="getResult(x)">Click</button>
</li>
</ul>
<h2>Results</h2>
<ul>
<li ng-repeat="item in titleList">
{{ item.title }}
</li>
</ul>
</div>
</body>
</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 wrote a file new.html and I am trying to test navigation. But when i load the page View1.html should be loaded but it shows a blank page.
Here is my new.html:
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title> Angular Test</title>
</head>
<body>
<div>
<div data-ng-view></div>
</div>
<script src = "Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</body>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleCtr',
templateUrl: 'View1.html'
})
.when('/2',
{
controller: 'SimpleCtr',
templateUrl: 'View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.controller('SimpleCtr', function($scope) {
$scope.customers = [
{ name:'Rajat', city:'Kanpur' },
{ name:'Adarsh', city:'Lucknow' },
{ name:'Manoj', city:'Banaras' }
];
$scope.addCustomer = function() {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
});
</script>
</html>
And here is my View1.html:
<div class="container">
<h2> View 1 </h2>
Name: <br/>
<input type="text" data-ng-model="filter.name"/>
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:filter.name | orderBy:'city'"> {{cust.name}} </li>
</ul>
Customer Name: <br/>
<input type="text" data-ng-model="newCustomer.name"/>
<br />
Customer City: <br />
<input type="text" data-ng-model="newCustomer.city"/>
<br />
<button data-ng-click = "addCustomer()"> Add Customer </button>
<a href = "#/2" > View 2 </a>
</div>
Here is View2.html:
<div class="container">
<h2> View 2 </h2>
City:
<br/>
<input type="text" data-ng-model="city" />
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:filter.city | orderBy:'city'"> {{cust.name}} </li>
</ul>
</div>
Please help me where i am going wrong?
You are missing a closing bracket in your code on line 8
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title> Angular Test</title>
</head>
<body>
<div>
<div data-ng-view> </div> <!-- right here -->
</div>
I created a plunker here: http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD
http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD
Your views aren't loaded because you try to access them using the file:// protocol. If you put your website on a HTTP server (XAMPP for example) you'll get the desired result.
It works fine with Plnkr. http://plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview
My best guess is you are not running the file in HTTP server. The simplest HTTP server is, run this command in your working directory:
python -m SimpleHTTPServer
Then, request your program in browser
localhost:8000/new.html
I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
You need to define your module in the right way
var app = angular.module('app',[]);
Then, use it in your HTML file
<html ng-app="app">
See it working on jsbin
Note that, the angular module's name is the one defined within the quotes
angular.module('app',[]);
So, if you wrote var xModule = angular.module('app2',[]); your module name is app2 not xModule
Here is the code I am using :
<meta name="robots" content="noindex">
<html data-ng-app="app">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div data-ng-controller="sampleController">
<ul><li data-ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li></ul>
</div>
<script id="jsbin-javascript">var app = angular.module('app',[]);
app.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
</script>
</body></html>
And the output is :
Applying filters
{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}
Let me know what is missing here.