Am new to angular js....i wrote simple example using http post call..
but it throws an error like
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.3/$injector/modulerr?p0=MyApp&p1=Error%3A%2…tps%3A%2F%2Ftestvendor.planotest.com%2FScripts%2Fangular.min.js%3A17%3A315)
My js code is given below..
$(function () {
var ang = angular.module('MyApp', []);
MyApp.controller('tagReports', function ($scope) {
$scope.CustomerTagID = _TagID;
$scope.listOfTags = [];
$scope.tagList = [];
$scope.LoadCustomerDetails = function () {
$http({ method: " post", url: "/LeadManagement/Customer/GetCustomerDetailsListByTag/" + viewModel.CustomerTagID(), cache: $templateCache }).
success(function (data) {
}).
error(function (data, status) {
});
};
});
});
thank you
I guess you want to use IIFE for angualarjs with jQuery. So I have fixed the code as below
(function ($) {
var MyApp = angular.module('MyApp', []);
MyApp.controller('tagReports', function ($scope, $http, $templateCache) {
$scope.CustomerTagID = _TagID;
$scope.listOfTags = [];
$scope.tagList = [];
$scope.LoadCustomerDetails = function () {
$http({ method: " post", url: "/LeadManagement/Customer/GetCustomerDetailsListByTag/" + viewModel.CustomerTagID(), cache: $templateCache }).
success(function (data) {
}).
error(function (data, status) {
});
};
});
})(jQuery);
Hope it helps !
You need to inject $http as a dependency into your controller, like that:
MyApp.controller('tagReports', function ($scope, $http) {});
Related
Although there are many questions regarding the subject , yet I am unable to figure it out , how to proceed further.
I am new in AngularJS. I want to pass data coming from API in Controller and pass it to another function. For this I know I have to create a Service. But after coming to this extend of code I am unable to figure it, how to store it in Service and pass it on other Controller or of function within same Controller. I am new in making Service.
Controller:
$scope.GetR = function (){
$scope.X = null;
$scope.Y = null;
$http({method: 'POST', url: 'http://44.43.3.3/api/infotwo',
headers: {"Content-Type": "application/json"},
data: $scope.ResponseJson
})
.success(function(data, status, headers, config) {
$scope.X = data.X;
$scope.Y = data.Y;
//console.log($scope.X+"and"+$scope.Y);
//Seding RS to API to get AAs
$scope.RJson = {
"ICl": $scope.ICl,
"RS": $scope.X
};
$http({method: 'POST', url: 'http://44.128.44.5/api/apithree',
headers: {"Content-Type": "application/json"},
data: $scope.RJson
})
.success(function(data, status, headers, config) {
$scope.At = data;
$scope.Eq = data.AA.Eq;
$scope.FIn = data.AA.FIn;
$scope.MM = data.AA.MM;
console.log("Eq:"+$scope.Eq+" FIn:"+$scope.FIn+" MM:"+$scope.MM);
}).error(function(data, status, headers, config) {
console.log("API failed...");
});
}).error(function(data, status, headers, config) {
console.log("Something went wrong...");
});
};
Now I want to pass this data to Service so that I can call this output on other API input
.success(function(data, status, headers, config) {
$scope.At = data;
$scope.Eq = data.AA.Eq;
$scope.FIn = data.AA.FIn;
$scope.MM = data.AA.MM;
console.log("Eq:"+$scope.Eq+" FIn:"+$scope.FIn+" MM:"+$scope.MM);
This shows how to create a service and share data between two controllers.
The service:
(function() {
'use strict';
angular
.module('myAppName') // Replace this to your module name
.service('MyService', MyService);
MyService.$inject = [];
function MyService() {
this.data = null;
}
})();
First controller:
(function() {
'use strict';
angular
.module('myAppName') // Replace this to your module name
.controller('MyFirstController', MyFirstController);
MyFirstController.$inject = ['MyService', '$http'];
function MyFirstController(MyService, $http) {
var vm = this;
vm.data = MyService.data;
$http.post('/someUrl', whatEverData).then(resp=> {
MyService.data = resp.data;
})
}
})();
Second controller:
(function() {
'use strict';
angular
.module('myAppName') // Replace this to your module name
.controller('MySecondController', MySecondController);
MySecondController.$inject = ['MyService', '$http'];
function MySecondController(MyService, $http) {
var vm = this;
vm.data = MyService.data; // Here you can use the same data
}
})();
Not sure if this is what you are looking for. Below code is not tested (May have syntax errors)
Service:
function() {
'use strict';
angular
.module('myAppName')
.factory('MyService', MyService);
MyService.$inject = [];
function MyService() {
var data = null;
return {
getData: function() {
return data;
},
setData: function(d) {
data = d;
}
}
}
})();
Controller:
(function() {
'use strict';
angular
.module('myAppName')
.factory('controller', controller);
controller.$inject = ['$scope', '$http', 'MyService'];
function controller($scope, $http, MyService) {
$scope.GetR = function() {
$scope.X = null;
$scope.Y = null;
var promise = $http({
method: 'POST',
url: 'http://44.43.3.3/api/infotwo',
headers: {
"Content-Type": "application/json"
},
data: $scope.ResponseJson
});
promise.success(function(data, status, headers, config) {
$scope.X = data.X;
$scope.Y = data.Y;
//console.log($scope.X+"and"+$scope.Y);
//Seding RS to API to get AAs
$scope.RJson = {
"ICl": $scope.ICl,
"RS": $scope.X
};
}).error(function(data, status, headers, config) {
console.log("Something went wrong...");
});
return promise;
};
$scope.sendRS = function() {
var promise = $http({
method: 'POST',
url: 'http://44.128.44.5/api/apithree',
headers: {
"Content-Type": "application/json"
},
data: $scope.RJson
});
promise.success(function(data, status, headers, config) {
$scope.At = data;
$scope.Eq = data.AA.Eq;
$scope.FIn = data.AA.FIn;
$scope.MM = data.AA.MM;
console.log("Eq:" + $scope.Eq + " FIn:" + $scope.FIn + " MM:" + $scope.MM);
}).error(function(data, status, headers, config) {
console.log("API failed...");
});
return promise;
}
var init = function() {
$scope.GetR().then(function() {
$scope.sendRS().then(function(data) {
MyService.setData({
At: data,
Eq: data.AA.Eq,
FIn: data.AA.FIn,
MM: data.AA.MM
});
})
})
}
init();
}
})();
Other controller
(function() {
'use strict';
angular
.module('myAppName')
.controller('controller1', controller1);
controller1.$inject = ['$scope', 'MyService'];
function controller1($scope, MyService) {
$scope.data = MyService.getData();
}
})();
There is a register form. On submit of register form I am trying to save the data through angular service. It is giving me an error Error: [$http:badreq]
This is my register.controller.js
(function(){
var app = angular.module('myapp');
app.controller('RegisterController',RegisterController);
RegisterController.$inject = ['UserService', '$location','$rootScope'];
function RegisterController(UserService, $location, $rootScope) {
var vm = this;
vm.register = register;
function register(){
UserService.Create(vm.user)
.then(function(response)
{
if(response.success){
}else{
}
});
}
};
})();
Here is the UserService
(function () {
'use strict';
angular
.module('myapp')
.factory('UserService', UserService);
UserService.$inject = ['$timeout', '$filter', '$q', '$http'];
function UserService($timeout, $filter, $q, $http) {
var service = {};
service.Create = Create;
return service;
var url='ajax.php';
function Create(user) {
$http({
method: 'post',
url: url,
data: user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).
success(function(data, status, headers, config) {
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(data);
});
}
}
})();
What is the issue with code. Please help. Thanks in advance
You are using return service; prior to define the URL so the $http service get's undefined instead of URL. Solution is to move return statement in the last of the service function like:
(function () {
'use strict';
angular
.module('myapp')
.factory('UserService', UserService);
UserService.$inject = ['$timeout', '$filter', '$q', '$http'];
function UserService($timeout, $filter, $q, $http) {
var service = {};
service.Create = Create;
var url='ajax.php';
function Create(user) {
$http({
method: 'post',
url: url,
data: user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).
success(function(data, status, headers, config) {
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(data);
});
}
return service;
}
})();
I'm new to AngularJS and I'm trying to run this AngularJS that should modify the URL without reloading the page but the console says Uncaught Error: [$injector:modulerr]
Where is the problem?
var app = angular.module("SearchAPP", ['ng-route']);
app.run(['$route', '$rootScope', '$location',
function($route, $rootScope, $location) {
var original = $location.path;
$location.path = function(path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function() {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
}
]);
app.controller('GetController', ['$http', '$scope', '$location',
function($http, $scope, $rootScope, $location) {
$scope.click = function() {
var response = $http({
url: 'http://localhost:4567/search',
method: "GET",
params: {
keyword: $scope.searchKeyword
}
});
response.success(function(data, status, headers, config) {
$scope.searchResults1 = data;
// $http.defaults.useXDomain = true;
$location.path('/' + $scope.searchKeyword, false);
});
response.error(function(data, status, headers, config) {
alert("Error.");
});
};
}
]);
Attach angualar-route.js and use ngRoute instead of ng-route
var app = angular.module("SearchAPP", ['ngRoute']);
I am trying make an ajax request to php from angular js. But I am not getting the data I have sent by php file.
an error Unknown function "getJalse" exist in factory
My source:
File app.js:
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'contentsCtrl',
templateUrl: 'views/contents.php'
})
.when('/jalse/:jalseId', {
controller: 'recordsCtrl',
templateUrl: 'views/jalse.php'
})
.otherwise({redirectTo: '/'});
});
}());
File jalseFactory.js:
(function () {
'use strict';
var jasleFactory = function ($http, $q) {
var factory = {};
factory.getJalses = function () {
var deferred = $q.defer();
$http({method: 'GET', url: 'includes/records.php'}).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
return factory;
};
jasleFactory.$inject = ['$http', '$q'];
angular.module('myApp').factory('jasleFactory', jasleFactory);
}());
File recordsCtrl.js:
(function () {
'use strict';
var recordsCtrl = function ($scope, $routeParams , jasleFactory) {
var jalseId = $routeParams.jalseId;
$scope.records = jasleFactory.getJalse();
$scope.jalse = null;
function init() {
for (var i = 0, len = $scope.records.length; i < len; i++) {
if ($scope.records[i].contentID == parseInt(jalseId)) {
$scope.jalse = $scope.records[i];
break;
}
}
}
init();
};
recordsCtrl.$inject = ['$scope' , '$routeParams' , 'jasleFactory'];
angular.module('myApp').controller('recordsCtrl', recordsCtrl);
}());
Because your factory has getJalses and you are calling getJalse.
Change
factory.getJalses = function ()
To
factory.getJalse = function ()
Im a complete angularjs newbie. So hopefully I am somewhat on track.
I have a datacontext configured like
(function () {
'use strict';
var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['common', '$http', datacontext]);
function datacontext(common, $http) {
var $q = common.$q;
var service = {
getCustomerGroups: getCustomerGroups
};
return service;
function getCustomerGroups() {
var groups = [];
$http({ method: 'GET', url: '/api/getgroups' }).
success(function (data, status, headers, config) {
console.log(status);
console.log(headers);
console.log(data);
groups = data;
return $q.when(groups);
}).
error(function (data, status, headers, config) {
console.log(data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
return $q.when(groups);
}
}
})();
Within my view I am using ngTagsInput
<tags-input ng-model="groups"
display-property="GroupName"
placeholder="Add Customer Group"
enableeditinglasttag="false"
class="ui-tags-input"
replace-spaces-with-dashes="false">
</tags-input>
And finally my controller
(function () {
'use strict';
var controllerId = 'customers';
angular.module('app').controller(controllerId, ['common','$scope','$http','datacontext', customers]);
function customers(common,$scope,$http,datacontext) {
var vm = this;
vm.title = 'Customers';
$scope.groups = [];
function getGroups() {
return datacontext.getCustomerGroups().then(function (data) {
return $scope.groups = data;
});
}
activate();
function activate() {
var promises = [getGroups()];
common.activateController(promises, controllerId)
.then(function() {
}
);
}
}
})();
I am not getting any errors and I can see the correct data is returned in the success method of $http. However the tag is not populated. Is it because the tag is calling the datasource before the $http has completed?
I am not sure how $q.when works, but it returns promise but does not resolve it. You should us the defer api.
So at start set
var defer = common.$q.defer();
and later in success do defer.resolve.
success(function (data, status, headers, config) {
console.log(status);
console.log(headers);
console.log(data);
groups = data;
defer.resolve(data);
and see if it works.