I am getting Cannot find module with name myapp,
actually the module creation and mapping of module with script code is correct then why I am facing this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX with Servlets using AngularJS</title>
<script type="text/javascript" src=js/angular.min.js></script>
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer()=function(){
$http({
method:'GET';
url:'NGServlet';
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
};
});
</script>
</head>
<body>
<div data-ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>
</html>
This is the working version. don't use ; in the object for your http call. Also your function definition was wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX with Servlets using AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer = function(){
$http({
method:'GET',
url:'NGServlet'
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
};
});
</script>
</head>
<body>
<div data-ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>
</html>
Your code is having issues:
Instead of ' , ' you have used ' ; ' in $http method and url .
Please use the updated code. Please do correct the function definition also.
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer = function(){
$http({
method:'GET',
url:'NGServlet'
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
}
});
</script>
<body>
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>
Related
I have problem with this code I have json data from my asp.net web api. I could not get this data by angularjs. as you can see the the code;
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title ng-bind="helloAngular"></title>
<script src="~/Scripts/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('myController', function ($scope, $htpp){
$htpp.get({
method:'GET',
url:'http://localhost:50972/api/product'})
.success(function (response) {
$scope.result = response.statusText
});
});
</script>
</head>
<body ng-controller="myController">
<table border="1">
<tr ng-repeat="product in response">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
</tr>
</table>
</body>
</html>
You have some typo errors: instead of $htpp use $http
myapp.controller('myController', function ($scope, $http){
$http.get({
method:'GET',
url:'http://localhost:50972/api/product'})
.success(function (response) {
$scope.result = response.data;
});
});
I hope you may help me.
I'm quite new with Angular so I'm maybe making some stupid error but, when a give a value to ng-app, it doesn't work AngularJs.
I make here an example:
This is my home.html that doesn't work (when I say "doesn't work" I mean that I see printed "{{name}}" instead of its value).
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
method: 'POST',
url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
data: {"nome":$scope.name}
}
var app=angular.module('noteApp', [])
app.controller('noteCtrl', function ($scope, $http){
$scope.addNote = function () {
$http(req).success(function(data, status, headers, config) {
$scope.nome = data;
}).error(function(data, status, headers, config) {
});
}
})
</script>
</head>
<body ng-app="noteApp">
<div ng-controller="noteCtrl">
<form>
<div>
Insert your name: <input type="text" name="name" data-ng-model="name"><br>
</div>
</form>
<p>Hola {{name}}</p>
</div>
</body>
</html>
but if I change it like this
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
method: 'POST',
url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
data: {"nome":$scope.name}
}
var app=angular.module('noteApp', [])
app.controller('noteCtrl', function ($scope, $http){
$scope.addNote = function () {
$http(req).success(function(data, status, headers, config) {
$scope.nome = data;
}).error(function(data, status, headers, config) {
});
}
})
</script>
</head>
<body ng-app>
<div>
<form>
<div>
Insert your name: <input type="text" name="name" data-ng-model="name"><br>
</div>
</form>
<p>Hola {{name}}</p>
</div>
</body>
</html>
it goes perfectly as it should.
Any suggestion?
In your view you are using {{ name }} but inside of your controller you are putting the data inside of $scope.nome.
Just change $scope.nome > $scope.name
You are setting the req variable using $scope.name but at that point scope is not defined. If you open the console you will see an error about. Try this:
http://plnkr.co/edit/LqZNX8BYnCnbUD29YRfi?p=preview
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var req={
method: 'POST',
url: 'http://localhost:8080/ConnectionDb/WebAppDbServlet',
}
var app=angular.module('noteApp', [])
app.controller('noteCtrl', function ($scope, $http){
$scope.addNote = function () {
req.data={"nome":$scope.name};
$http(req).success(function(data, status, headers, config) {
$scope.name = data;
}).error(function(data, status, headers, config) {
});
}
})
</script>
</head>
<body ng-app="noteApp">
<div ng-controller="noteCtrl">
<form>
<div>
Insert your name: <input type="text" name="name" data-ng-model="name"><br>
</div>
</form>
<p>Hola {{name}}</p>
</div>
</body>
</html>
the wrong variable name ("nome" instead of "name") is unrelated to your issue but it still need to be corrected
You are missing a " ; " after "var app=angular.module('noteApp', [])" so noteApp is not getting initialized.
I have currently included all service files and controller files in index.html in my angularJS application and it is working fine.
But I want to include the respective service file and controller file in the template file, so that unwanted files for the home page of my application will not be loaded in the initial load: thus decreasing the time to load the home page.
I have tried to do this, but the I could not get the json data from the service.
Here is what I have done so far
app.js
var app = angular.module('app', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/books',
{
templateUrl:'app/templates/books.html',
controller:'booksController'
}).when('/games',
{
templateUrl: 'app/templates/games.html',
controller: 'gamesController'
});
$locationProvider.html5Mode(true);
});
eventData.js service file
app.factory('eventData', function ($http, $log, $q) {
return {
getEvent: function () {
var deferred = $q.defer();
$http({
method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=harry%20potter'
}).success(function (data, status, headers, config) {
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
},
getGames: function () {
var deferred = $q.defer();
$http({
method: 'GET', url: 'https://www.googleapis.com/books/v1/volumes?q=hunger%20games'
}).success(function (data, status, headers, config) {
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
};
});
eventController.js
'use strict';
app.controller("EventController", function EventController($scope,eventData) {
$scope.event = eventData.getEvent();
$scope.event.then(function(event) {
console.log(event);
$scope.items = event.items;
console.log($scope.items);
},function(status) {
console.log(status);
});
});
BooksController.js
'use strict';
app.controller("booksController", function booksController($scope, eventData) {
$scope.event = eventData.getEvent();
$scope.event.then(function (event) {
console.log(event);
$scope.items = event.items;
console.log($scope.items);
}, function (status) {
console.log(status);
});
});
books.html
<script src="app/controllers/eventController.js"></script>
<script src="app/controllers/booksController.js"></script>
<script src="app/services/eventData.js"></script>
<div style="padding-left: 20px;padding-right: 20px">
<div class="row">
<h3>Sessions</h3>
<ul style="list-style-type: none;">
<li ng-repeat="session in items">
<div class="row session">
<div class="well col-md-12">
<h4 class="well">{{session.volumeInfo.title}}</h4>
<h6 style="margin-top: -10px">{{session.volumeInfo.publishedDate}}</h6>
<span>Page Count: {{session.volumeInfo.pageCount}}</span><br />
<span>Authors: {{session.volumeInfo.authors}}</span>
<p>{{session.searchInfo.textSnippet}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Airlines!</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<meta charset="utf-8">
<base href="/airlines/">
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Harry Potter</li>
<li>Hunger Games</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app/app.js"></script>
</body>
</html>
Can you identify what I am doing wrong?
I am very very new to AngularJS and programming and I am sure this is a basic question but I am having a difficult time finding our resources in how to achieve subtracting two $scope values consumed from a JSON file ($scope.carrierDiff). I would appreciate any help you can provide.
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div></body>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</html>
No need to calculate this separately
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
You just have to do this...
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{site.Carrier - site.Carrier2}}</li>
</ul>
</div>
</body>
With my limited knowledge of what is coming back from the file you are retrieving, it seems as though you are referencing the JSON data incorrectly. You need to reference $scope.sites OR data, not a hacked up version of both. If the structure of data looks like this:
data = {Carrier: 5, Carrier: 4}
Then you would reference Carrier like so:
data.Carrier1
So when you move data to $scope.sites, you are referencing the JSON in data and it would be referenced without the need to point out that it came from data
$scope.sites.Carrier1
So you code should look like so:
http://plnkr.co/edit/nnfewy?p=preview
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</body>
</html>
Another item to remember, you should have you <script> in the head or in the body, not outside. See the modification in the code above.
When I use jQuery's $.ajax it works everytime, but when I come back to Angularjs I write
test.js :
var readContracts = function($scope, $http){
$http({method: 'GET', url: 'http://test.url.com/contracts'}).
success(function(data, status, headers, config) {
$scope.contracts = angular.fromJson(data);
}).
error(function(data, status, headers, config) {
debugger;
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
test.html :
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<button ng-click="readContracts()">readContracts</button>
<ul>
<li ng-repeat="contract in contracts"> {{contract | json}} </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="test.js"></script>
</body>
</html>
And it never works. Not even the request in the chrome's debugger :-(
May an expert could see in few seconds what I did wrong ?
I think the problem is you have no controller.
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-controller="ContractsController">
<button ng-click="readContracts()">readContracts</button>
<ul>
<li ng-repeat="contract in contracts"> {{contract | json}} </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script src="test.js"></script>
</body>
</html>
function ContractsController($scope, $http){
$scope.readContracts = function(){
$http({method: 'GET', url: 'http://test.url.com/contracts'}).
success(function(data, status, headers, config) {
$scope.contracts = angular.fromJson(data);
}).
error(function(data, status, headers, config) {
debugger;
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
};