I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.
My question is about services holding data that is commonly required among controllers.
I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:
varianceService is not defined
Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.
Thanks in advance.
Here is an example of the code:
var app = angular.module(
'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
)
.service('varianceService', function () {
var variances = {};
return {
redirect: function (path) {
$location.path(path);
},
getHttpVariances: function (month1, month2) {
var url = "/Home/GetVariances?month_1=";
url += month1;
url += "&month_2="
url += month2;
url += "&forwardBilling=true"
$http.get(url).success(function (data) {
variances = data;
return data;
});
return {};
},
getVariances: function () {
return variances;
}
};
})
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/MainPage', {
templateUrl: 'mainpage.html',
controller: 'MainPageCtrl'
}).
when('/Variance/:type', {
templateUrl: 'variance.html',
controller: 'VarianceCtrl'
}).
otherwise({
redirectTo: '/MainPage'
});
}])
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
The problems lies in the bracket notation of injecting services in your function..
What you inject in the bracket notation must also be present in the function definition..
e.g.
controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {
}]);
so in relation to your code above.. it should be like this..
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.
Change this
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
to
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
Related
i would like to reuse the code defined between the controllers
.controller('GenericController', ['$scope', '$controller', '$rootScope', '$dialogs', '$state', '$http', '$modal', '$q', '$timeout', 'projectFactory', 'projectPromise', 'phaseFactory', 'buFactory', 'stakeholderGroupFactory', 'ldapFactory', 'genericFactory', 'User',
function ($scope, $controller, $rootScope, $dialogs, $state, $http, $modal, $q, $timeout, projectFactory, projectPromise, phaseFactory, buFactory, stakeholderGroupFactory, ldapFactory, genericFactory, User) {
$scope.testing = function() {
console.log("Hello");
};
}]);
You can use the factory and create the object for the function to reuse it.
app.factory("sample",function(){
return function() {
console.log("Hello");
};
})
else collating multiple common functions
app.factory("commonFunctions",function(){
commonFunction1(){
console.log("common func1")
}
commonFunction2(){
console.log("common func2")
}
return {
commonFunction1: commonFunction1,
commonFunction1: commonFunction2
};
})
Used the $controller for the importing this fixed my issue
I want to call a service which I defined in DeliverService but when I called it from controller it gives an error of Cannot read propery getRiders of undefined , NO idea why this happened :|
DeliverService.js
angular.module('Deliver')
.service('DeliverService', ['$http', '$state', '$resource', '$q', 'SettingService', '$localStorage', "MessageService", function($http, $state, $resource, $q, SettingService, $localStorage, MessageService) {
var service = {
getRiders : function(){
return $http.get("Hero.json");
//return $http.get(SettingService.baseUrl + "api/orders");
} }
return service;
}]);
DeliverCtrl.js
use strict';
angular.module('Deliver').controller('DeliverCtrl',['$scope','$state', "SettingService","DeliverService", function($scope, $state, $ionicModal, MessageService, SettingService,DeliverService) {
$scope.riders = [];
DeliverService.getRiders().then(function(response){
$scope.riders = response.data.data;
}, function(error){
});
}]);
Your dependencies aren't in the matching order here. Hence, DeliverService isn't actually injected.
Your controller code should look something like this:
angular.module('Deliver').controller('DeliverCtrl',
['$scope','$state', '$ionicModal', 'MessageService', 'SettingService','DeliverService',
function($scope, $state, $ionicModal, MessageService, SettingService, DeliverService) {
$scope.riders = [];
DeliverService.getRiders().then(function(response){
$scope.riders = response.data.data;
}, function(error){});
}]);
In DeliverCtrl.js
The injection Parameter and function parameters do not match
It should be like this
['$scope','$state','$ionicModal','MessageService','SettingService','DeliverService', function($scope, $state, $ionicModal, MessageService, SettingService,DeliverService)
Newbie in Ionic and Angular.
I am trying to develop a test app and trying to use the factory function.
I did the design from Ionic Creator and trying to add my coding in to it.
Below is my controller file.
angular.module('app.controllers', [])
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
.controller('mainPageCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('historyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('firstrunCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('resultsCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('doctorCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('bookingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('appointmentCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
Below is my file that has the factory.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]
.factory('awesomeFactory', function($http) {
return {
GetUser: function() {
return $http.get("http addy return json object").then(function(response) {
//Process Stuff Here
return response;
});
},
}
})
);
I am getting 2 errors.
1. Error: awesomeFactory is undefined.
2. TypeError: (intermediate value).factory is not a function[Learn More]
I just don't know what I am doing wrong. Probably something small.
But any help is greatly appreciated.
Thank you in advance.
This is because here in this code
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
First you will have to do factory injection then try to create its instance
Try this
.controller('loadingCtrl', ['$scope', '$stateParams','awesomeFactory',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
new to Angular and I'm trying to inject constants from a separate file. It seems to work with the DI, but when I try to use it, I get an error: Error: undefined is not an object (evaluating 'CApiEndpoints.authUrl').
I tried dot notation and brackets as suggested in Accessing AngularJS constants but continue to get the error.
The files are included in index.html, and DI doesn't complain.
index.html
<script type="text/javascript" src="js/angular/constants.js"></script>
<script type="text/javascript" src="js/angular/app.js"></script>
js/angular/constants.js
var app = angular.module('appConst', []);
app.constant('CApiEndpoints', {
authUrl: 'http://api.example.com/v1/',
...
});
and my js/angular/app.js
var app = angular.module('app', ['ngRoute', 'ngCookies', 'appConst', 'appServices']);
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', function($scope, $route, $http, $cookies, $routeParams, $location, CApiEndpoints){
console.log(CApiEndpoints); // shows 'undefined'
$http({
method : 'GET',
url : CApiEndpoints.authUrl + 'user_info'
})
.then(
function successCallback(response) {
console.log(response);
},
function errorCallback(response) {
console.log(response);
});
}]);
Any help would be appreciated. I've searched for the last 2 hours trying to figure this out.
While injecting dependencies inside your controller function using DI inline array annotation, they must follow the order how they are injected in array.
If you follow above rule you will come to know that you have two extra paramters inside your function, so you should remove those two unwanted ($routeParams, $location) dependency.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints',
function($scope, $route, $http, $cookies, CApiEndpoints){
//controller code
}
]);
If you haven't added those parameter mistakenly, you should add those parameter on both side inside function & array.
app.controller('pageController', ['$scope', '$route', '$http', '$cookies', '$routeParams', '$location', 'CApiEndpoints',
function($scope, $route, $http, $cookies, $routeParams, $location CApiEndpoints){
//controller code
}
]);
I'm having problems finding the solution to TypeError: undefined is not a function in my code.
I have the following app.js:
var app = angular.module('test', ['ngRoute', 'test.services', 'test.directives', 'test.controllers']);
app.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/q/:q', {
templateUrl: '/templates/productlist.html',
controller: 'ProductCtrl'
}).
otherwise({
redirectTo: '/q'
});
});
Then I have a controller
var controllers = angular.module('test.controllers', []);
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope, ProductFactory, $routeParams) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);
And a factory
var services = angular.module('test.services', ['ngResource']);
var baseUrl = 'http://localhost\\:8080';
services.factory('ProductFactory', function ($resource) {
return $resource(baseUrl + '/test/smart/:query', {}, {
query: { method: 'GET', isArray: true }
})
});
This code results on load in the above mentioned TypeError on the line $scope.products = ProductFactory.query({query: $scope.query}); in my controller.
Further, when debugging my code I see that $routeParams.q is null or undefined.
What I want is that in my controller the $scope.products variable becomes an array with the result of the query.
What am I doing wrong?
Please try with correct function arguments,
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope /*ProductFactory*/, $routeParams, ProductFactory) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);