I've been learning Angular and hit a strange wall . . . first off I ran an angular demo using DEPLOYD and SERVER.JS and everything ran fine. I also ran another that hits a RESTful web service online, and it ran fine. So I take what seems to be the next logical step and create my own RESTful web service and it deploys to TOMCAT just fine. I can query the service in my browser to localhost, and it runs fine. So far so good.
So, I build a very simple Angular app to hit that service and nothing gets returned. OK, I figure I messed something up . . . so I mod my demo app to hit a DEPLOYD instance, and it works. I mod it to his the existing service, and it works . . . but when I point it to my own RESTful service nothing gets returned. I can't afford to lose any more hair over this. Here are some particulars:
When tested in the browser, my service is returning:
[{"person":{"id":1,"fullName":"Alpha","age":10}},{"person":{"id":2,"fullName":"Bravo","age":20}},{"person":{"id":3,"fullName":"Charlie","age":30}},{"person":{"id":4,"fullName":"Delta","age":40}},{"person":{"id":5,"fullName":"Echo","age":50}},{"person":{"id":6,"fullName":"Foxtrot","age":60}}]
A pretty simple JSON array, right?
Here is my HTML:
<!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8 /angular.min.js"></script>
<script src="hello.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="Hello">
<div class="well" ng-repeat="person in data.person">
<h3>
<strong>{{person.id}}</strong>
<span class="pull-right label label-primary">
{{person.age}}
</span>
</h3>
</div>
</div>
</body>
</html>
And here is my controller javascript:
function Hello($scope, $http) {
$scope.data = {};
$http.get("http://localhost:8085/TestWS/service/getAllPersonsInJSON").
success(function(data) {
$scope.data.person = data;
});
#scope.data.person();
}
I pared it down to the essentials, I think . . . but no joy getting data displayed. Anyone care to help me avoid making a larger bald spot?
TIA,
Ted
I was able to run this on my machine.
The issue looks like with nesting of data to an extra step.
The data you are receiving is a json array, to display this I directly assigned it to person.
Made these changes to controller :
removed $scope.data = {};
So controller had the below 3 lines.
$http.get("url").
success(function(data) {
$scope.person = data;
});
Then accessed the data in HTML file :
<div ng-controller="Hello">
<div class="well" ng-repeat="person in person">
<h3>
person is
<strong>{{person.person.id}}</strong>
<span class="pull-right label label-primary">
{{person.person.age}}
</span>
</h3>
</div>
</div>
Hope it will help.
Cheers
Remove this line as that's not really valid Angular code and person isn't a function.
#scope.data.person();
Everything else looks great.
Try this:
$scope.data.person = data.data;
This is because, the $http.Get(function(data){},..) will return http response packet in data variable. In order to access the data inside http response packet, you've to access data.data object.
Edit:
If above workaround donot works, use console.log(data) inside success callback and have a look at browser's console to inspect what data is being actually passed on by the success callback function.
Hope this helps.
Related
I have a solution that suddenly stopped showing data
It’s a simple but effective script which does the job without any problems,
My local version in my pc works as expected but in the live version the same code it’s not showing
The $scope.links, which I have the data and use ng-repeat to doesn’t show the code contained in it,
I have even used {{links | json}} to visualize if data is passing through, everything I do works in my local version but in the live version, it doesn’t(it doesn't show error either, just show empty HTML spaces), checking in the network to verify if data is flowing, it does !.
Only the $scope for some reason it’s not showing.
I have tried many things like even upgrade the angular version but the same problems persist,
Any help will be greatly appreciated
var app = angular.module('app', ["angucomplete"]).
controller("navbarController", function($scope, $http) {
$scope.breadcrumbs = [];
$scope.links = [];
$http.get('/api/source').success(function(data) {
$scope.nav = data;
$scope.links = data.sub;
});
});
<body data-ng-app="app">
<section>
<div data-ng-controller="navbarController">
<ul>
<li data-ng-repeat="item in links" class="{{item.link.className}} {{item.link.imageUrl === '' ? 'no-image' : ''}}">
<a href="{{item.link.url}}" ng-click="clickNavigation(item); $event.preventDefault();">
<span>{{item.link.name}}</span>
</a>
</li>
</ul>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
I'm still struggling to get my first ASP.NET WebApi / AngularJS app up and running...
I'm trying to query a WebAPI service (which I've written and verified using Fiddler that it works just fine) from Angular, and I'm trying to show the data returned on my ASP.NET Webforms page. I studied a great many tutorials and Pluralsight courses, and really thought I knew how to do it - but Angular doesn't agree with me :-(
I have my Angular app/controller here:
var app = angular.module('MyApp', []);
app.controller('MyCtrl', function ($scope, $http) {
$scope.model = [];
//Call to web API
var Url = 'http://localhost:13811/api/v1/mydata';
$http({
method: 'GET',
url: Url
}).success(function (MyList) {
$scope.model = MyList;
}).error(function () {
});
});
My (very limited) JS/Angular understanding is that this defines an Angular app and a controller, and that if I add this controller to a DOM element on my ASPX page, the controller will be invoked, will make that call out to my WebAPI service (and I do see that this is happening), and then stores the results (a list of some data objects from the database) into the $scope.model variable.
So I was assuming that I would be able to integrate this into a blank ASPX something like this:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoAngular.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Angular Demo</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app/plz-controller.js"></script>
</head>
<body ng-app="MyApp">
<form id="form1" runat="server">
<div ng-controller="MyCtrl">
<span>Angular says: {{1+2}} </span>
<div class="list-group" data-ng-repeat="x in model">
<div class="list-group-item">
<span>{{x.Field1}}</span><br/>
<span>{{x.Field2}}</span><br/>
</div>
</div>
</div>
</form>
</body>
</html>
I was assuming that adding the ng-app="MyApp" directive to the <body> tag would link the ASPX page to the Angular app, and adding the ng-controller="MyCtrl" to that <div> would then instantiate the Angular controller (and thus make the WebAPI call - this it does, I see that in the F12 developer tools).
I was also expecting that by using the data-ng-repeat="x in model" directive, I would be able to iterate over the list of data elements returned from the WebAPI call, and using the {{....}} syntax, I was hoping to be able to access the individual fields of those objects and display them.
ALAS: I do see Angular says: 3 at the top of my page, so Angular appears to be "there" and active, and I do see the WebAPI call in the F12 developer tools (and I can verify that the expected number of data elements is being returned) - yet no matter what I try, I cannot find any way to actually SHOW that data having been retrieved from WebAPI on my ASPX page......
Any ideas? What am I missing? Must be something really stupid - I'm sure - but I just don't see the forest for the trees anymore........
Fire up the debugger and put a breakpoint on the $scope.model = MyList line. Chances are that you're getting an http response object back here and you need to change it to something like $scope.model = MyList.data. Examining the object in the debugger will tell you for sure if this is the case.
I'm taking baby steps with Angular and writing simple stuff and testing across browsers, I have a simple script to bind a menu against a JSON string array. I want to do the whole Angular MVC instead of Javascript DOM manipulation.
In my tests I can see a strange behaviour as to the positioning of the top of the menu in IE dependent upon which item is selected. Anyone know how to fix this? I would like to use an Angular friendly solution, like Bootstrap?
Menu looks good in Firefox and Chrome.
<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="myCarSelector">
<h2>Menu</h2>
<p>Make of car : <span ng-bind="selectedCarMake"></span></p>
<select ng-model="selectedCarMake" ng-options="val for val in carmakes"></select>
</div>
<script>
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);
</script>
<script>
// was in separate file but pasted in for demo purposes
app.controller("myCarSelector", function ($scope) {
$scope.selectedCarMake = "BMW"; // default value
$scope.carmakes = ["Audi", "BMW", "Volkswagen"];
});
</script>
</body>
</html>
I like to accept answers and then move on to next question.
Here is a screen grab of the problem in IE 11
It seems browser default behaviour.
I'm new to angular, I've tried some testing pattern and it's ok with the $scope variable but I can't make it work for a simple controller nesting. (and avoid using the $scope variable, instead I want to use "this")
Here is my sample HTML and javascript :
<!doctype html>
<html ng-app="appTest">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="FirstController as first">
<div>
First is {{first.text}}
</div>
<div ng-controller="SecondController as second">
Second is {{second.text}}
</div>
</div>
<script>
var app = angular.module("appTest",[]);
function printFirst() {
this.text = "first"
}
function printSecond() {
this.text = "second";
}
app.controller("FirstController",[printFirst]);
app.controller("SecondController",[printSecond]);
</script>
</body>
</html>
In the output html the angular variables inside curly brackets are not replaced and I don't know what's going on. I've tried to install Angular Batarang for debugging but the scope console is empty.
Obviously it's a silly mistake but I don't see where I'm wrong
Ok, the answer has nothing to do with my code, I was just using a too old version of Angularjs (1.0.8).
I moved to the last version 1.3.4 and it works fine.
Access the variable using $scope.text please instead of this.text.
How do I make a jsfiddle out of the following code:
<html>
<head>
</head>
<body>
<div ng-app ng-controller="MainCtrl">
<ul>
<li ng-repeat="num in nums">
{{num}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function MainCtrl($scope) {
$scope.nums = ["1","2"];
}
</script>
</body>
</html>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
#pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/cloudnine/trgrjwf1/7/
Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.
Sample HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="sample" placeholder="type something here...">
<span>{{sample}}</span>
</div>
Sample JS:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {});
https://jsfiddle.net/y170uj84/
Also tested with the latest Angular 1.6.4, by setting as External Resource.
For little experiments in angular 5, you can use https://stackblitz.com/.
This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav