Is it possible to use a scope in a factory then using it on multiple controllers ?
I'm not really up to writing the same code in every controller, it'll be a pain to work on it ^^
Here's my current idea.
.factory('FactoryName', function($scope, $routeParams, $http) {
return {
search : function(str, http) {
var url = str+'.json';
return $http.get(url).success(http).error(function() {
alert('Unable to get back the data');
});
}
httpSuccessPaper : function(response) {
$scope.papers = response;
}
This way I only have this code once and all my controller are able to use the json of "reference". I could also write something like ng-repeat="p in papers" in some view.
Here is the way I call it in my controller :
.controller('CtrlName', ['$scope', '$routeParams', '$http', 'FactoryName'
function($scope, $routeParams, $http, FactoryName) {
FactoryName.search("Paper",FactoryName.httpSuccessPaper).then(function(){
$scope.paper = getByIdPa($scope.papers,$routeParams.id);
})
It seems a bit strange to me and I'm almost sure I'm trying something impossible.
I would like your opinion.
Thank you !
you can do it like this:
angular.module('apiServices', ['ngResource'])
.factory('ExampleService', ['$http', 'serviceUrl', function ($http, serviceUrl) {
return{
getInteractions: function () {
return $http({method: 'GET', url: serviceUrl + 'ctest', headers: {'Cache-Control': 'no-cache, no-store', 'Pragma': 'no-cache', 'Expires': '0'}});
},
getRoots: function () {
return $http({method: 'GET', url: serviceUrl + 'ntest', headers: {'Cache-Control': 'no-cache, no-store', 'Pragma': 'no-cache', 'Expires': '0'}});
},
getLogging: function (params) {
return $http.post(serviceUrl + 'atest', params);
},
getMessage: function (params) {
return $http({method: 'GET', url: serviceUrl + 'btest', params: params, headers: {'Cache-Control': 'no-cache, no-store', 'Pragma': 'no-cache', 'Expires': '0'}});
}
};
}]);
You don't want Services dealing with scopes. It's ok to repeat just the setting the scope part.
.factory('FactoryName', function($scope, $routeParams, $http) {
return {
search : function(str) {
var url = str+'.json';
return $http.get(url)
}
Then the controller:
.controller('CtrlName', ['$scope', '$routeParams', '$http', 'FactoryName'
function($scope, $routeParams, $http, FactoryName) {
FactoryName.search("Paper").then(function(papers){
$scope.paper = getByIdPa($papers,$routeParams.id);
})
Related
My project use angularJS 1.6.2
the problem is that user info is correct, but doesn't change page through $state.go(sidebar.overall);
But it chage page with twice login, and the second login with refresh page.
The first login is success with server,and has got the success response.
my login.js as following:
if($scope.loginForm.$valid) {
var postData = {
username : $scope.username,
password : $scope.loginForm.password.$modelValue,
smsCode : $scope.messageCode
};
$scope.method = "post";
$scope.url = BASE_URL + "/user/login/users";
$http({
method:$scope.method,
url: $scope.url,
data : postData,
headers : {
"Content-Type": 'application/json'
}
}).then( function (response, event) {
console.log(response);
event.preventDefault();
$state.go("sidebar.overall");
if(response.data.success == true){
$cookieStore.put("userMessage", response);
$state.go("sidebar.overall");
if($cookieStore.get('userMessage')){
$scope.uMessage = $cookieStore.get('userMessage');
$http({
method: 'GET',
url: BASE_URL + '/user/roles/privileges/parts/' + $scope.uMessage.data.data.user.roleId,
headers : {
"Content-Type": 'application/json'
}
}).then(function (res){
localStorage.setItem('permitInfo',JSON.stringify(res.data));
}, function(res){
console.log(res);
});
}
}
and app.js file :
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider){
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("loginlogout");
});
}]).controller('RootController', ['$rootScope', '$scope', $timeout','$location', '$state', '$cookieStore', 'locals', function($rootScope, $scope, $timeout, $location, $state, $cookieStore, locals){
if($cookieStore.get('userMessage')){
$rootScope.userMessage = $cookieStore.get('userMessage');
console.log($rootScope.userMessage);
} else {
$state.go('loginlogout');
}
$rootScope.permitInfo = JSON.parse(localStorage.getItem('permitInfo'));
$scope.$on('$locationChangeStart',function(evt, next, previous) {
angular.element('#loading').modal('show');
});
$scope.$on('$locationChangeSuccess',function(evt, next, previous) {
angular.element('#loading').modal('hide');
angular.element(".modal").modal("hide");
});
$scope.$on('$stateChangeSuccess',function(evt, next, previous) {
angular.element('#loading').modal('hide');
angular.element(".modal").modal("hide");
});
$scope.$on('$viewContentLoaded',function(evt, next, previous) {
angular.element('input').attr("autocomplete", "off");
window.scrollTo(0,0);
angular.element(".modal-backdrop").hide();
});
angular.module('frontierApp.loginlogout', ['ui.router', 'ngCookies'])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('loginlogout',{
url : '/login',
templateUrl: 'modules/loginlogout/login_view.html',
controller: 'LoginController'
})
}])
thanks for help.
I'm trying a sample with angularJs where I'm trying to call a factory method and in the factory method, I'm doing an ajax callback to get result from database and in the success event of the ajax callback, I need to call a function in the controller to bind the result to the UI.
My Angular Code:
angular.module('myApp.controllers', [])
.controller('TasksListCtrl', ['$scope', '$rootScope', '$routeParams', 'Task',
function($scope, $rootScope, $routeParams, Task) {
debugger;
//factory call
Task.query({
MobileNumber: $routeParams.MobileNumber,
ClientCode: $routeParams.ClientCode
});
$rootScope.UserMobileNumber = $routeParams.MobileNumber;
$scope.BindTasksList = function(resultData) {
debugger;
$scope.Tasks = resultData;
$scope.$apply();
}
}
]);
My Angular Factory Code:
'use strict';
(function() {
function GetTasks(MobileNumber, ClientCode) {
debugger;
$.ajax({
url: '/api/TasksAPI/GetTasksList',
type: 'GET',
datatype: 'json',
data: {
'MobileNumber': MobileNumber,
'ClientCode': ClientCode
},
success: function(response) {
debugger;
$scope.BindTasksList(response);
},
error: function(xhr) {}
});
};
angular.module('myApp.DbScripts', [])
.factory('Task', [
function() {
return {
query: function(data) {
debugger;
GetTasks(data.MobileNumber, data.ClientCode);
}
}
}
]);
}());
My app.js Code:
'use strict';
angular.module('myApp', [
'ngTouch',
'ngRoute',
'ngAnimate',
'myApp.controllers',
'myApp.DbScripts'
]).
config(['$routeProvider',
function($routeProvider) {
debugger;
$routeProvider.when('/tasks/:MobileNumber/:ClientCode', {
templateUrl: 'partials/tasks-list.html',
controller: 'TasksListCtrl'
});
$routeProvider.when('/tasks/:taskId', {
templateUrl: 'partials/task-details.html',
controller: 'TaskDetailCtrl'
});
$routeProvider.when('/tasks/:taskId/status', {
templateUrl: 'partials/task-completion-details.html',
controller: 'TaskCompletionDetailCtrl'
});
$routeProvider.when('/tasks/:taskId/route', {
templateUrl: 'partials/route-details.html',
controller: 'RouteDetailCtrl'
});
$routeProvider.otherwise({
redirectTo: '/tasks'
});
}
]);
But, I'm unable to call the function in controller. I've also tried it with angular.element(document.getElementById('TasksListCtrl')).scope().BindTasksList(response). But even that's not working.
Can anyone please point out the mistake I'm doing?
How to send the $scope of the controller to the factory?
You can do this by leveraging the $http promises, in you factory, return the promise instead as follows
'use strict';
(function() {
function GetTasks(MobileNumber, ClientCode) {
};
angular.module('myApp.DbScripts', [])
.factory('Task', [
function($http) {
return {
query: function(data) {
return $http({
url: '/api/TasksAPI/GetTasksList',
method: 'GET',
params: {
'MobileNumber': data.MobileNumber,
'ClientCode': data.ClientCode
}
}).then(function(result) {
return result;
});
}
}
}
]);
}());
Then in your controller you can access the $http response object that is returned:
//factory call
Task.query({
MobileNumber: $routeParams.MobileNumber,
ClientCode: $routeParams.ClientCode
}).then(function(resp) {
// access $http resp here and attach to $scope.Tasks
});
If you can, I would advocate using $q along $http as well, so that you do not need to parse through the http response and get a nice little response data object back
plnk
I'm new to angularjs, and im using a service for my http requests.
one of the rest api's i need to send key value pairs in the header.
username: foo
password: bar
how do i do it using the http request format i have in my service. (i'm aware i need to pass an argument in the function i don't how to go about it and what object format)
.service('UserService', ['$http', '$rootScope', function ($http, $rootScope) {
this.CheckIfUserExists = function () {
return $http.get($rootScope.endPoint + '/user/email_token');
};
}
...
//in the controller
UserService.CheckIfUserExist()
.success(function (data) {
console.log(data);
//handler
}).
error(function(error) {
//handler
});
Example from the doc
you need know what kind of auth. you can use post for example.
.service('UserService', ['$http', '$rootScope', function ($http, $rootScope) {
var req = {
method: 'POST',
url: 'http://example.com',
headers: {
'Content-Type': undefined
},
data: { test: 'test' }
}
$http(req).success(function(){...}).error(function(){...});
In your case:
.service('UserService', ['$http', '$rootScope', function ($http, $rootScope) {
this.CheckIfUserExists = function () {
var req = {
method: 'POST',
url: 'http://example.com'
data: { 'username': 'foo', 'password': 'bar' }
};
return $http(req);
}
}
I am writing an angularJs app:
html :
<div ng-controller=NavCtrl>
<h1 ng-bind-html="currentTitle"></h1>
</div>
I am searching for a way to update the currentTitle variable in my html which is in global scope.
.service('WorkService', [function(){
return {
currentTitle : 'dada'
};
}])
.controller('NavCtrl', function($scope, $location, $http, WorkService) {
$scope.works = [];
$http({method: 'GET', url: '/api/v1/work'}). //collects all works
success(function(data, status, headers, config) {
$scope.currentTitle = WorkService.currentTitle;
})
})
.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {
$http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
success(function(data, status, headers, config) {
$scope.activateButton($routeParams.workId);
WorkService.currentTitle = data.title;
})
})
But currentTitle variable is not updated in the template. What am i doing wrong?
When you do WorkService.currentTitle = data.title current scope is unaware of this change. That is why you wont see the change in the template.
It is not ideal but for this requirement you may keep the currentTitle in $rootScope and keep update $scope.currentTitle in each controllers and that will do.
.run(function($rootScope){
$rootScope.globalData = {currentTitle : 'dada'}
})
.controller('NavCtrl', function($scope, $location, $http, WorkService) {
$scope.works = [];
$http({method: 'GET', url: '/api/v1/work'}). //collects all works
success(function(data, status, headers, config) {
$scope.globalData.currentTitle = 'New title';
})
})
.controller('DetailCtrl', function($scope, $routeParams, $http, WorkService) {
$http({method: 'GET', url: '/api/v1/work/' + $routeParams.workId + '/'}).
success(function(data, status, headers, config) {
$scope.activateButton($routeParams.workId);
$scope.globalData.currentTitle = data.title;
})
})
And in html
<h1 ng-bind-html="globalData.currentTitle"></h1>
You can't two-way bind to a variable in a service, but you can bind to an accessor function. Change your service to return getter and setter functions:
.service('WorkService', ['$sce', function($sce){
var currentTitle= $sce.trustAsHtml('dada');
return {
getCurrentTitle: function(){ return currentTitle; },
setCurrentTitle: function(value){ currentTitle = $sce.trustAsHtml(value);}
};
Then in your controller you can get the currentTitle like this:
$scope.currentTitle = WorkService.getCurrentTitle;
Note that you are setting it equal to the getCurrentTitle function itself (not the result of the function).
Now your html looks like this:
<h1 ng-bind-html="currentTitle()"></h1>
No need to set up $watches or hang stuff of $rootScope. See Demo here.
I'm trying to pass data from one controller to another using a factory and for some reason my factory isn't getting recognized in angular seed. Here is my app.js file which I'm declaring my factory
var myApp = angular.module('myApp', ['myApp.controllers','angularFileUpload', 'ngRoute']);
//
//
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/' ,{templateUrl:"/syncproto/partials/videoSlides.html"}, "sync").
when('/scenarios', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl").
when('/scenarios/:id', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl")
}]);
myApp.factory('Data', function() {
var Data;
return {
getData: function () {
return Data;
},
setData: function(value) {
Data = value;
}
};
});
Here is the controller which I'm using the factory Data
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data) {
$scope.scenarios = [];
$scope.thumbnails = [];
$scope.init = function(){
console.log('init hit');
$http({ method: 'GET', url: 'http://localhost:3000/scenarios' }).
success(function (data, status, headers, config) {
angular.forEach(data, function(scenario) {
if (scenario.video.length != 0 && scenario.video[0].thumbnailLocation != undefined){
$scope.thumbnails.push(scenario.video[0].thumbnailLocation);
//console.log('thumbnail is' + scenario.video.thumbnailLocation);
$scope.scenarios.push(scenario);
console.log(scenario.video[0].thumbnailLocation);
}
});
//console.log($scope.scenarios);
console.log('success');
}).
error(function (data, status, headers, config) {
console.log('error');
});
console.log($scope.thumbnails);
}
$scope.showVideo = function(scenario){
Data.setData(scenario);
$location.path('/');
//Data.setData($scope.scenarios[$scope.thumbnail.indexOf(thumbnail)]);
}
}])
The problem is that in $scope.showVideo = function(scenario) when i call Data.setData(scenario); I get the error TypeError: Object #<Object> has no method 'setData'
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data)
You're missing one argument for the $location service here. It should be
.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, $location, Data)