I'm trying to save the data from multistep form using ui-route in AngularJS to MongoDB.
In Postman, I can send data to MongoDB and it can save it. My problem is now, getting the data that the user created and saving it to MongoDB.
I have formServices to handle post request. But when I add to controller as angular.module('formApp', ['ngAnimate', 'ui.router', 'formServices']) and uses 'Form' inside of controller I get this error:
angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=formApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3DformServices%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DformServices%250A%2520%2520%2520%2520at%2520http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.2.16%252Fangular.min.js%253A7%253A280)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A6%3A450%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A33%3A332%0A%20%20%20%20at%20Array.forEach%20(%3Canonymous%3E)%0A%20%20%20%20at%20q%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A7%3A280)%0A%20%20%20%20at%20e%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A32%3A445)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A33%3A18%0A%20%20%20%20at%20Array.forEach%20(%3Canonymous%3E)%0A%20%20%20%20at%20q%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A7%3A280)%0A%20%20%20%20at%20e%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A32%3A445)%0A%20%20%20%20at%20ac%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular.min.js%3A36%3A34)
at angular.js:36:1
at angular.js:3809:15
at Array.forEach (<anonymous>)
at q (angular.js:323:7)
at e (angular.js:3775:5)
at ac (angular.js:3715:11)
at c (angular.js:1379:20)
at $b (angular.js:1394:12)
at Wc (angular.js:1307:5)
at angular.js:21459:5
repo who wants to dig in further: https://github.com/Edifie/yedy-final
I'm pretty sure the error pops up because of formService because when i take it out, it works fine.
formServices.js
angular.module('formServices', [])
.factory('Form', function($http){
formFactory = {};
formFactory.create = function(formData){
return $http.post('/api/forms', formData);
}
return formFactory;
});
formCtrl.js
angular.module('formApp', ['ngAnimate', 'ui.router', 'formServices']).
.controller('formController', function($scope, $http, Form) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
// $scope.processForm = function() {
// };
var app = this;
this.regForm = function(formData){
app.loading = true;
app.errorMsg = false;
Form.create(app.regForm).then(function(formData){
if(formData.data.success){
app.loading = false;
//create success message
app.successMsg = formData.data.message = "...Redirecting";
$timeout(function(){
//delay for 2 seconds after submitting the form
$location.path("/"); //send to home page after submitting
}, 2000);
}else{
//crete error message
app.loading = false;
app.errorMsg = formData.data.message;
}
});
}
});
Related
Im using angularjs in MVC.
Here My Controller.js:
//Get User By ID
$scope.GetUserById = function (UID) {
var Get = UserService.GetUserById(UID);
Get.then(function (response) {
$scope.User = response.data;
alert($scope.User.Address);
});
};
services.js:
//Get By ID
this.GetUserById = function (UID) {
debugger;
return $http.get("../api/UsersData/GetUserById?UID=" + UID);
};
When I'm using the debugger, the alert message is displayed. If I'm not debugging then it doesn't return a value.
What is the issue in my code?
How to display the value to html page?
You should get it working with few adjustments.
Service.js:
angular.module('myApp').factory('MyService', MyService);
//Avoid Minification Problems
MyService.$inject = [ '$http' ];
function MyService( $http ){
function GetUserById(UID){
return $http.get('../api/UsersData/GetUserById?UID=' + UID)
.then( function (response) {
if(response){
return response;
}
});
}
//Expose Method to External Calls
return {
GetUserById : GetUserById
}
}
Controller.js:
angular.module('myApp').controller('MyController', MyController);
MyController.$inject = [ '$scope', 'MyService' ];
function MyController( $scope, MyService ){
$scope.GetUserById = function(UID){
MyService.GetUserById(UID).then( function(response){
$scope.User = response.data;
alert($scope.User.Address);
});
}
}
Make sure what response is actually returning with a $log or using console.log in order to properly alert the address. Do this check also in the service, for instance you should check if response.address exists.
You can also use a Service instead of a Factory.
How to redirect to a another view after successful save ng-submit form
Controller
.factory('Post', function($resource) {
return $resource('api/add_new_order',{name: "#name", phone: "#phone"});
})
.controller('ContactCtrl', function($scope, Post, Authorization) {
// Get all posts
$scope.posts = Post.query();
// Our form data for creating a new post with ng-model
$scope.postData = {};
$scope.newPost = function() {
var post = new Post($scope.postData);
post.$save();
}
$scope.issues = {};
$scope.answer = function(){
console.log($scope.issues.name);
}
$scope.postData = Authorization;
})
It depends on the routing you are using. Ionic defaul is the ui-router package. You first have to define different $states in the app's config block (-> see here). Then you can inject the $state service in your controller and the method $state.go() will do the 'redirection'.
I have this service. And it get me error when I do $rootScope.$apply
(function () {
'use strict';
angular
.module('AngularChatApp')
.factory('WS', function($websocket, $rootScope, Online){
var dataStream = $websocket("ws://"+apiconf.config.ws_server+"/ws");
var collection = [];
dataStream.onMessage(function(message) {
message = JSON.parse(message.data)
console.log(message);
if(message.action=='update_users_online'){
Online.getOnline(function(rezult){
$rootScope.$apply(function(){
$rootScope.user_list = rezult.user_list;
});
})
}
});
dataStream.onOpen(function(message) {
});
var methods = {
collection: collection,
send: function(mess) {
dataStream.send(JSON.stringify(mess));
}
};
return methods;
});
})();
And I want to refresh user list in my page after particular message from websocket server.
To do this I need change scope in controller.
But how can I say to contoller that I want to do if I get message inside service not inside controller?
This is the code:
loginCtrl.js
var loginapp = angular.module('loginapp', []);
loginapp.controller('loginCtrl', ['$scope','$http','loginService' function($scope,$http,loginService){
$scope.doLogin = function() {loginService.login($scope); }; //call login service
}]);
loginService.js
'use strict';
var loginapp = angular.module('loginapp', []);
loginapp.factory('loginService',function($http){
return{
login:function(scope){
var $promise=$http.post("login/do_login", {'username': $scope.username, 'pass': $scope.pass});
//send data to user.php
console.log($promise);
}
}
});
Browser says at console:> loginCtrl.js:2 Uncaught SyntaxError: Unexpected token function (error on line 2)
Whats wrong?
You're missing a comma in your controller definition:
var loginapp = angular.module('loginapp', []);
loginapp.controller('loginCtrl', ['$scope','$http','loginService', function($scope,$http,loginService){
$scope.doLogin = function() {loginService.login($scope); }; //call login service
}]);
loginService.login($scope)
this is bad aproach!
make user object and pass it, not the whole world
and if that promise, get result in .then()
$scope.user = {'username': your_user_name, 'pass': your_password};
$scope.doLogin = loginService.login($scope.user).then(function(result){
... get result
});
.....
login:function(user){
var $promise=$http.post("login/do_login", {'username': user.username, 'pass': user.pass});
//send data to user.php
return $promise;
}
}
You have missing comma here:
'loginService' function
When I run my app it always throws the following error:
Error: [$injector:unpr] Unknown provider: localStorageServiceProvider <- localStorageService
http://errors.angularjs.org/1.3.5/$injector/unpr?p0=localStorageServiceProvider%20%3C-%20localStorageService
This is my Code:
home.js:
angular.module('home', [])
.controller('homeCtrl', ['$scope', '$location', 'localStorageService',
function ($scope, $location, localStorageService) {
$scope.username = "maax",
$scope.buttonType = "icon ion-search",
$scope.buttonDisable = false,
$scope.click = function () {
$scope.buttonDisable = true
$scope.buttonType = "icon ion-loading-a"
//Grap geoLocation
var location = navigator.geolocation.getCurrentPosition(sendToServer);
function sendToServer(pos) {
//sendGeoData(pos.coords.latitude, pos.coords.longitude, window.localStorage.getItem("userId"))
savePlayerData("sd");
}
//Ask server for availalble player an get data
//End server request
//Link to play-screen
$location.path("/tab/play-screen");
localStorageService.addEvent();
};
}])
Here is my service, that I try to inject:
'use strict'
angular.module('service', [])
//var testEvent = {
// "playerName": "Max",
// "aufgabe": "Döner kaufen"
//}
//
//localStorage.setItem('events', testEvent);
//Create a hitsotry of Events to see the recent Events
.factory('localStorageService', function () {
return {
addEvent: function () {
return null
}
}
//
// return 1;
// //Pull the current events
// var event = JSON.parse(localStorage.getItem('events'));
//
// /*overwrite the localStorage with the newest Event added in
// the begining */
//
// var eventUpdatet = newEvent;
// eventUpdatet.push(events);
// localStorage.setItem('events', JSON.stringify(eventUpdated));
});
I hope you can help me, because I really do not see my error.
Thank you very much!!
You need to plug the dependency of both modules, fix this line:
angular.module('home', ['service'])