I'm changing my angular controllers to minification friendly but I am getting a error with my $resource calls. all of my factories look the same as the one i am posting. I have followed the tutorials online but it is not working out for me.
//'use strict';
app.controller('documentCtrl', ['$scope', '$upload', '$filter', '$route', '$sessionStorage','$sce', '$q', '$modal', '$http', '$location', '$rootScope', function (
$scope, $upload, $filter, $route, $sessionStorage, $sce, $q, $modal, $http, $location, $rootScope) {
$scope.docTypes = Type.query(function () { });
$scope.selectType = function () {
var id = $scope.typeId.TypeId
$http.get('/api/apiType/' + id)
.success(function (result) {
$scope.TypeName = result.TypeName
console.log($scope.TypeName);
});
};//
$scope.docPipes = Pipe.query(function () { });
$scope.selectPipe = function () {
var id = $scope.pipeId.PipeId
$http.get('/api/apiPipe/' + id)
.success(function (result) {
$scope.PipeName = result.PipeName
console.log($scope.PipeName);
});
};//
Factory
'use strict'
app.factory('Type',['$resource', function ($resource) {
return $resource('/api/apiType/:id', { id: '#_id' }, {
get: {
method: 'GET', isArray: false // this method issues a PUT request
}
}, {
stripTrailingSlashes: false
});
}]);
app.factory('TypeUpdate',['$http', function ($http) {
return {
update: function (doc) {
return $http.put('/api/apiType/' + doc.TypeId, doc);
}
};
}]);
Error
ReferenceError: Type is not defined
Update
Type is a $resource call defined in my factory.
Is this the way the controllers should be defined? The examples I found online did not include variables.
app.controller('documentCtrl', ['$scope', '$upload', '$filter', '$route', '$sessionStorage','$sce', '$q', '$modal', '$http', '$location', '$rootScope', 'ngTableParams', 'notificationFactory', 'Type', 'Document', 'Plant', 'Pipe', 'Company', 'Location', function (
$scope, $upload, $filter, $route, $sessionStorage, $sce, $q, $modal, $http, $location, $rootScope, ngTableParams, notificationFactory, Type, Document, Plant, Pipe, Company, Location) {
You have declared a factory called "Type". This needs to be listed in your controller dependencies.
Related
I would like to save the details of my candidate after assigning questionnaire and their details like first name, last name and so on. However, I am doing it in two parts in my web api.
This is my angular controller code.
MainApp.controller('CandidateController', ['$scope', '$window', '$http', '$location', '$routeParams', '$filter', '$mdDialog', function ($scope, $window, $http, $location, $routeParams, $filter, $mdDialog) {
$scope.saveCandidate = function () {
if ($scope.mailingSameAsPermanent ) {
$scope.candidateData.MailingAddress.Address1 = "Same";
}
$http.post('api/Candidate/AddCandidate', JSON.stringify($scope.candidateData))
.then(function () { $location.path("/candidate"); },
function () { $scope.message = "Save error"; })
$http.post('api/Candidate/AssignQuestionnaire',
JSON.stringify($scope.candidateData))
.then(function () { $location.path("/candidate"); },
function () { $scope.message = "Save error"; })
};
}]);
How do I post two http posts in one scope?
app.service('situacao', function($log, $q, $http, $rootScope){
var situacao = this;
situacao.lista = {};
situacao.getAllSituacao = function(){
var defer = $q.defer();
console.log("php/getAll.php");
$http.get($rootScope.endPoint + "php/getAll.php")
.success(function(res) {
console.log(res);
situacao.lista = res;
defer.resolve(res);
}).error(function(err, status){
defer.reject(err);
});
return defer.promise;
};
return situacao;});
app.controller('listCtrl',['$scope', '$uibModal', '$log', '$http', function(situacao, $scope, $modal, $log, $http) {
$scope.init = function(){
$scope.getAll();
}
$scope.getAll = function(){
situacao.getAllSituacao().then(function(res){
//sucess
$scope.dispSituacao = situacao.lista;
}, function(err){
//error
})
};
$scope.init();
}]);
I'm trying to use the "service" but results in error:
situacao.getAllSituacao is not a function.
what is wrong?
You have to update your inject to pass it in as well since you're using the array notation:
Change
app.controller('listCtrl', ['$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http)
To
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {
In my situation, I named all injected services correctly, but, their order was not the same, and it gave me the same error. My code was something like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function ($scope, situacao, $modal, $log, $http) {}
Putting them in correct order solved the problem. Like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {}
Hope this helps someone.
The issue is that I can't seem to send information from Controller 1 to Controller 2... I have my service that sets/gets data but it isn't working. The actual error that I'm getting is that Controller 1's dataService.getData is not a function... when it works elsewhere.
Service 1 (in its own file)
app.service('dataService', function() {
var data, queried;
return {
setData: function(queryData) {
this.data = queryData;
this.queried = false;
},
getData: function() {
this.queried = true;
return this.data;
}
};
});
Controller 1 (sending information)
app.controller('MyCtrl', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller 2 (getting information)
app.controller('MyCtrl2', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
You didn't injected service dataService inside your MyCtrl & MyCtrl2, ensure dependency should be injected before using it.
Controller
app.controller('MyCtrl', ['$scope', '$location', '$state','dataService', //<-added dependency here
function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller2
app.controller('MyCtrl2', ['$scope', '$location', '$state','dataService',//<-added dependency here
function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
I have a controller that updates my awards scope:
Controller 1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
})
}
}])
Controller 2
I have another controller 2 with a click event thats outside of this controllers scope. Is it possible for the controller below to call the $scope.updateAwardScope function from controller 1?
.controller('MainController', function ($rootScope, $scope) {
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});
I've found the use of the factory/service pattern to be a very effective way of reusing code in angular applications. For this particular case you could create an AwardFactory, inject it in your controllers and then call the update function. i.e
AwardFactory
myApp.factory('AwardFactory', ['TokenRestangular', function(TokenRestangular.all) {
var factory = {
awards: []
};
factory.update = function() {
resource = TokenRestangular.all('award');
resource.getList().then(function (awards) {
factory.awards = awards;
});
return factory.awards; // You can skip the return if you'd like that
};
return factory;
}]);
YourController
.controller('MainController', function ($rootScope, $scope, AwardFactory) {
$scope.updateAwardScopeClick = function () {
AwardFactory.update();
}
});
Hope it helps!
You can use angular broadcast and receive
Controller1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
$rootScope.broadcast("update.awards");
})
}
}])
Controller 2
.controller('MainController', function ($rootScope, $scope) {
$rootScope.$on('update.awards', function(){
$scope.updateAwardScopeClick();
});
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/