When I run my Application in Browser, the console tells me :
Error: [ng:areq] Argument 'FlightListController' is not a function, got undefined
'FlightListController' is bound to my index.html via "ng-view"
<div class="container" ng-view="FlightListController"></div>
and is imported accordingly at the end of my index.html
<script src="app/controller/FlightListController.js"></script>
The FlightListController.js content is:
var app = angular.module("flightlog");
app.controller("Flight", function ($scope, $http) {
$http.get("http://localhost:3000/flights").success(function (response) {
$scope.flights = response;
}).error(function (err) {
$scope.error = err;
});
Now i don't have any clue what the Angular Error wants to tell me. The Link hidden behind the error doesn't really help.
var app = angular.module("flightlog");
app.controller("FlightListController", ['$scope', '$http', function ($scope, $http) {
$http.get("http://localhost:3000/flights").success(function (response) {
$scope.flights = response;
}).error(function (err) {
$scope.error = err;
});
}]);
HTML:
<div class="container" ng-controller="FlightListController">
If I am not wrong you are telling the view wich is his controller you should use:
ng-controller not ng-view
<div class="container" ng-controller="FlightListController">
https://docs.angularjs.org/api/ng/directive/ngController - Documentation
Related
I have a server set up on localhost:5000 that has a JSON string that contains "Hello world"
I want my AngularJS application to fetch this data, and display it.
here is what I have.
this is the script getJSON.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "localhost:5000"
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
this is how I call it in my html
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("localhost:5000")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
now the "myWelcome" should be "Hello world" but it just displays myWelcome when I run the code.
the backend is fully working! I've done it with regular Angular but need it to work with AngularJS unfortunately.
Any advice?
This is not a full answer I see what you're trying to do. It looks like you're not calling the correct controller and your value never gets updated. Move your app definition into your script tags and remove the controller that you have there
//index.html
<script>
var app = angular.module('myApp', []);
</script>
// myCtrl.js
app.controller('myCtrl', function($scope, $http) {
$scope.myWelcome = 'test';
$http({
method : "GET",
url : "localhost:5000"
}).then(response) {
$scope.myWelcome = response.data;
}, catch(error) {
$scope.myWelcome = error;
});
});
Next check your network tab and see if the request is actually executed. If it is not then you're controller is not connected to the app properly. You should be able to set breakpoints at this time and see what is firing and what is not.
EDIT: Also make sure you're loading your js file into your view after the first script tag is fired. Otherwise 'app' will not be defined.
I am trying to create a factory to retrieve weather data for a simple web page I am creating but, I am getting stuck when trying to call the function in the factory. I have fallowed Dan Wahlin's course on Udemy but I just cant figure out why I am getting the error. It definitely seems like I am doing something wrong but I can't figure it out.
Here is code
HTML
<!DOCTYPE html>
<div ng-controller="WeatherController" style="position:absolute; top:0px; ">
{{weather.weather.main}}<br>
<img src='http://openweathermap.org/img/w/10d.png' height="100px" width="100px">
</div>
<div style="background-color:white; position: absolute; bottom:0px;">
<canvas id="canvas" width="400" height="400">
</canvas>
</div>
<script src="script/angular.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/WeatherFactory.js"></script>
<script src="app/controllers/WeatherController.js"></script>
<script src="script/clock.js"></script>
app.js
(function () {
angular.module('displayApp', []);
}());
WeatherController.js
(function () {
var WeatherController = function ($scope, $log, $http, weatherFactory) {
$scope.weather = "";
function init() {
weatherFactory.getWeather() //******This line stops with error*****
.then(function (response) {
$scope.weather = response.data;
}, function (data, status, headers, config) {
$log.log(data.error + ' ' + status);
});
// $scope.weather = "Get the weather?"
}
init();
};
WeatherController.$inject = ['$scope', 'weatherFactory'];
angular.module('displayApp').controller('WeatherController', WeatherController);
}());
WeatherFactory.js
(function () {
var weatherFactory = function ($http) {
var factory = {};
factory.getWeather = function () {
//return $http.get('api.openweathermap.org/data/2.5/weather?q=Rancho Santa Margarita&appid=60f84f7ee9256ef5057de8b616105ab9');
return "Get the weather";
};
return factory;
};
weatherFactory.$inject = ["$http"];
angular.module('displayApp').factory('weatherFactory', weatherFactory);
}());
Specific error is
Cannot read property 'getWeather' of undefined
at init (WeatherController.js:17)
What am I missing, or what am I doing wrong?
Any and all help is appreciated.
Thanks.
You are missing a few injections. You currently have:
WeatherController.$inject = ['$scope', 'weatherFactory'];
And your arguments are $scope, $log, $http, weatherFactory. Just add the missing injections:
WeatherController.$inject = ['$scope', '$log', '$http', 'weatherFactory'];
So I am sure I am not using best practices, but, I'm just trying to get this to work. I'm making a note taking app, and for whatever reason, the service I created, returns undefined and I can't figure out why.
Here's the service:
angular.module('notesService', []).factory('Notes', ['$http', function($http){
return {
get : function(){
var notes = $http.get('/api/notes');
return notes;
}
}
}]);
And here is the controller:
angular.module('mainController', [])
.controller('mainController', function($scope, Notes){
console.log(Notes.get());
});
The controller is not producing anything on the page just yet, i'm still testing.
Here is what the service returns to my controller:
e {
$$state : {
status : 1,
value : {
config : Object,
data: Array[10]
}
}
}
This isn't the entire thing, but it is all the stuff I need for my purposes.
Whenever I access $$state.value it returns undefined and I have no idea why.
You have the service in an entirely different module. So you gotta inject notesService into angular.module('mainController', [notesService]).
You dont ideally need to add new module for each controller and services, you can have single module and add everything to it
$http return a promise see documentation for $http
Also there is no need of the empty array in the angular.module parameter [] this might be what causes the error see in console.
angular.module('notesService').factory('Notes', ['$http', function($http){
return {
get : function(){
return $http.get('/api/notes');
}
}
}]);
angular.module('mainController')
.controller('mainController', function($scope, Notes){
Notes.get().then(function(result){
console.log(result);
})
});
I created an application that will help you to learn the best practices, plus solve your current problem.
//--In app.module.js--//
angular.module('notesApp', []);
//-- In app.controller.js--//
angular.module('notesApp')
.controller('MainController', ['$scope', '$http', '$log', 'notesFactory',
function($scope, $http, $log, notesFactory) {
$scope.data = {};
notesFactory.getData('http://localhost:3000/api/notes', 'GET')
.then(function(response) {
$log.log(response.data);
}, function(error) {
$scope.data = error;
});
}
]);
//--In app.service.js --//
angular.module('notesApp')
.factory('notesFactory', ['$http',
function($http) {
var notesService = {};
notesService.getData = function(url, method) {
return $http({
url: url,
method: method
});
}
return notesService;
}
]);
<html ng-app='notesApp'>
<head>
<title>
Notes Application
</title>
</head>
<body>
<div ng-controller='MainController'>
<pre>{{ data | json}}</pre>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js'></script>
<script src='app.module.js'></script>
<script src='app.controller.js'></script>
<script src='app.service.js'></script>
</body>
</html>
Check the console for the json object as shown in the screenshot
I am newbie learning to make back end calls from my angular app's service, I am making the back end call from the angular's Service.
I am calling the function in the service from the controller.
The rest service I provided is not the actual service I am hitting, for some reasons I cannot disclose it. I am sure that the rest service I have is valid and is working, cause I was able to hit it though the controller, which is a bad way of doing it, so this is the reason i want to change the back end call to the service.
Below is my js file. Any help would be appreciated, please feel free to let me know if I am doing this wrong.
angular.module("myApp",[])
.controller("myCont", ['myService', function($http, myService){
var vm = this;
this.myUrl = "some rest service";
console.log("The controller");
vm.getDataInController = function() {
console.log("The function is called");
myService.getData(vm)
.success(function (custs) {
console.log("The data is obtained");
})
.error(function (error) {
console.log("some error occurred");
});
}
}])
.service('myService', ['$http', function ($http) {
this.getData = function (vm) {
console.log("control is in the service");
console.log(vm.myUrl);
$http({
type: 'GET',
url: vm.myUrl
// data is where we have the JSON returned in the form of OBJECT from the gis
}).then(function successCallback(response) {
console.log("the backend call worked");
}), function errorCallback(response) {
console.log("the backend call worked");
}
};
}])
;
My Html file is
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src = "angular-min.js"></script>
<script src = "sampleOneScript.js"></script>
</head>
<body ng-app = "myApp" ng-controller = "myCont as main">
{{main.myUrl}}
<br>
<button type = "button" ng-click = main.getDataInController()>Click me </button>
</body>
</html>
The error I got in the console.
TypeError: Cannot read property 'getData' of undefined
at vm.getDataInController (http://localhost:63342/exercise.weokspce/ng-repeat%20example/sampleOneScript.js:15:26)
at fn (eval at (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:212:87), :4:275)
at f (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:252:82)
at m.$eval (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:132:366)
at m.$apply (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:133:60)
at HTMLButtonElement. (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:252:134)
at HTMLButtonElement.Hf.c (http://localhost:63342/exercise.weokspce/ng-repeat%20example/angular-min.js:35:137)
The problem may be that you are not injecting properly all the dependencies for "myCont". Try changing the line:
.controller("myCont", ['myService', function($http, myService){
with:
.controller("myCont", ['$http', 'myService', function($http, myService){
and see if that corrects things
Im trying to get data in a Json format from a remote WS using Angular and im having some trouble.
The data comes from the web service correctly but i cant use it inside the controller.
Why is that?
Angular Code:
var booksJson;
var app = angular.module('booksInventoryApp',[]);
// get data from the WS
app.run(function ($http) {
$http.get("https://SOME_API_PATH").success(function (data) {
booksJson = data;
console.log(data); //Working
});
});
app.controller('booksCtrl', function ($scope) {
$scope.data = booksJson;
console.log($scope.data); //NOT WORKING
});
HTML:
<section ng-controller="booksCtrl">
<h2 ng-repeat="book in data">{{book.name}}</h2>
</section>
You should put your $http.get inside your controller.
Also, the web service returns an object not an array. So your ng-repeat should be something like this: book in data.books
Here is a working example:
var app = angular.module('booksInventoryApp', []);
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.then(function(response) {
$scope.data = response.data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="booksInventoryApp">
<section ng-controller="booksCtrl">
<h2 ng-repeat="book in data.books">{{book.name}}</h2>
</section>
</article>
Create the bookJSON as array, and push the elements instead of assignment. So
var bookJSON=[];
Inside $http.get do
data.forEach(function(item) { bookJSON.push(item); });
The second console log will show undefined because, the call is async. The assignment happens in future.
The run method does not guarantee, that the code is run before controller loads.
There are other ways too to solve this issue.
Avoid global variable. Look at $routeProvider resolve property.
Or implement a service to get this data as promise.
Instead of using a run block you can use your $http service inside the controller, then attach your data to the scope like normal. Just remember to inject the $http service into your controller.
app.controller('booksCtrl', function ($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks").success(function (data) {
$scope.booksJson = data;
});
});
<!DOCTYPE html>
<html>
<head>
<title>test your webservice</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="booksInventoryApp">
<section ng-controller="booksCtrl">
</section>
</article>
<script type="text/javascript">
var app = angular.module('booksInventoryApp', []);
app.controller('booksCtrl', function($scope, $http) {
//ResponseInvocationAgentRequestDTO
var jsonObject = {
"id":65,
"idUserSender": 5}
console.log("aaaaaaaaaaaaaaaaaaaa");
$http({
method: 'put',
url: 'yout URI' ,
data: jsonObject
})
.success(function(data,status){
console.log('all is good', data);
})
.error(function(data,status){
console.log('Erreur into url '+data);
});
});
</script>
</body>
</html>