I'm using AngularJS to make my first application, I want to the run function to be executed before any controller.
My run function looks like :
.run(function ($rootScope,authentification)
{
teamsFactory.sendAuthent().then(function(response)
{
$rootScope.authentdata=response.data;
});
})
My service where I make the authentication :
teams.sendAuthent= function(DeviceID) {
return $http({method:"POST",url:http://myserver.com/authentification",headers: {'X-SocialAPI-Service-Name': 'auth'}})
.then(function(aResponse)
{
var deferred=$q.defer();
deferred.resolve({data:aResponse.data});
return deferred.promise;
});
}
And this is my controller where I use the rootScope data :
.controller('home', function($rootScope,$scope, $http,)
{
alert($rootScope.authentdata.token);
})
But this is not working it says that autehndata is undefined, so the controller is executed before the run function how to resolve that ?
you can try this,
$rootScope.$watch('authentdata', function(n, o) {
if(angular.isDefined(n) {
alert($rootScope.authentdata.token);
// or alert(n.token);
}
}
Related
I have a single controller where for each different route diffrent parameters are passed.My routes.js file looks like this-
.when('/event/:eid/edit-question/:qid', {
templateUrl: 'views/edit-question.html',
controller: 'eventController',
controllerAs: 'eventCtrl',
resolve: {
"check": function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
},
"params": function ($route) {
return $route.current.params;
}
}
})
.when('/event/edit-event/:eid', {
templateUrl: 'views/edit-event.html',
controller: 'eventController',
controllerAs: 'eventCtrl',
resolve: {
"check": function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
},
"params": function ($route) {
return $route.current.params;
}
}
})
I'm resolving the route params before loading the controller.
My controller functions looks like this-
myApp.controller('eventController', ['$location','$rootScope', 'params', 'authService', 'apiService', function ($location,$rootScope, params,authService, apiService) {
let dash = this;
//all the route parameters will be resolved and stored here
dash.params = params;
//get the details of an event
dash.getTheEventDetail = () => {
apiService.getEventDetail(dash.params.eid).then(function successCallBack(response){
console.log(dash.params.eid);
dash.eventDetail = response.data.data;
});
}
dash.getTheEventDetail();
//get the detail of a question for the qid passed as parameter
dash.viewQuestion = () => {
console.log(dash.params.qid);
console.log(dash.eventDetail);
dash.questionDetail = dash.eventDetail.questions.filter(question => question._id === dash.params.qid);
console.log(dash.questionDetail);
}
The viewQuestion function gets executed before the getTheEventDetail when I try to access the route /event/:eid/edit-question/:qid due to which dash.eventDetail remains undefined
the viewQuestion is called on initialization of the controller in the edit-question view like this.
<div ng-init="eventCtrl.viewQuestion()"></div>
There can be certain workaround like calling viewQuestion function inside end of getTheEventDetail().But this cause the viewQuestion to be called everytime when the getTheEventDetail is called.Is there a good way to deal with routeParams in this case.
Why not use the $routeParams service in your controller instead? It seems that viewQuestion is dependent upon the getEventDetail method of the apiService running successfully and setting the eventDetail. If this is the case remove the ng-init command and add the view question to your call back to ensure that the promise has completed before calling a method on data that doesn't exist yet. Also, filter returns an array, and since you're searching by ID I assume you may want a single question instead of an array. If this is correct you may need to specify and index of [0] at the end or us Array.find instead.
I'm not sure exactly what outcome you're looking for, but I've pasted a possible solution below (untested of course). Hope that helps.
myApp.controller('eventController', ['$location','$rootScope', routeParams', 'authService', 'apiService',
function ($location,$rootScope, $routeParams,authService, apiService) {
let dash = this;
//get the details of an event
dash.getTheEventDetail = () => {
apiService.getEventDetail(dash.params.eid)
.then(response => {
dash.eventDetail = response.data.data;
if ($routeParams.qid) {
dash.viewQuestion()
}
});
}
dash.getTheEventDetail();
//get the detail of a question for the qid passed as parameter
dash.viewQuestion = () => {
dash.questionDetail =
dash.eventDetail.questions.filter(question => question._id === $routeParams.qid);
console.log(dash.questionDetail);
}
}
I'm trying to write a service that simulates a polling functionality. My code is the following:
app.service('poller', ['$timeout',
function($timeout) {
return ({
poll
})
function poll(e) {
$timeout(function() {
poll(e);
}, 5000);
}
}
]);
When I inject it in my controller I try to use it like this:
poller.poll($scope.getNewMessages());
The weird thing is that it's only called once. Also when I try to use console log in the service like console.log(e) I get undefined. What am I doing wrong?
You need to pass function as value to the poller function and you need to call the function:
app.service('poller', ['$timeout', function($timeout) {
return ({
poll
});
function poll(e) {
e();
$timeout(function() {
poll(e);
}, 5000);
}
}
]);
poller.poll($scope.getNewMessages);
I've written a backend service which is used by a Angular.JS frontend using a factory, like so:
angular.module('app.social', ['ngResource'])
.factory('Social', function($http) {
return {
me: function() {
return $http.get('http://localhost:3000/me');
},
likeVideo: function(link) {
return $http.post('http://localhost:3000/like/video', { link : link });
},
post: function(link) {
return $http.post('http://localhost:3000/post', { link : link });
},
postVideo: function(link) {
return $http.post('http://localhost:3000/post/video', { link : link });
},
friends: function() {
return $http.get('http://localhost:3000/friends');
},
taggableFriends: function() {
return $http.get('http://localhost:3000/friends/taggable');
},
videos: function() {
return $http.get('http://localhost:3000/videos');
}
};
});
The Social.me endpoint receives profile information from the REST backend. This function is used in various Angular controllers, however (profile page, item detail page, header account button etc.). This means that for every view, profile information is requested from http://localhost:3000/me. Is this good practice, or is it a better idea to cache the information within the factory?
EDIT: Updated code (based on answer from #Rebornix):
angular.module('app.social', ['ngResource'])
.service('SocialService', function() {
var serviceData = {
me: null
};
return serviceData;
})
.factory('Social', function($http, SocialService) {
return {
me: function() {
if (SocialService.me === null) {
return $http.get('http://localhost:3000/me').then(function(response) {
SocialService.me = response.data;
return SocialService.me;
});
} else {
return SocialService.me;
}
}
}
};
});
In the controller, I use:
angular.module('app.profile', [])
.controller('ProfileCtrl', ['$window', '$scope', 'Social', function($window, $scope, Social) {
$scope.me = Social.me();
}])
And the view:
<div ng-controller="ProfileCtrl">
<h1 class="profile-name">{{ me.name }}</h1>
</div>
But the view is not updated as the Facebook.me value get initialized on the first request. I guess I have to manually trigger $scope.$apply() somehow?
You can create a service as storage across controllers like
angular.module('app.social', ['ngResource'])
.service("SocialService", function() {
var info = {
me: null,
friends: []
};
return info;
})
.factory('Social', function($http, SocialService) {
return {
me: function() {
$http.get('http://localhost:3000/me').then(function(response){
SocialService.me = response.data;
});
},
Then in all your controllers, reference infoService instead of calling API again. What you need to is fetching latest data and refresh infoService, all controllers scope will be notified with this change.
In your controller
angular.module('app.profile', [])
.controller('ProfileCtrl', ['$window', '$scope', 'SocialService', 'Social', function($window, $scope, SocialService, Social) {
$scope.SocialService = SocialService;
// Kick off social factory to update user info, you can move it into
// any other functions like `ng-click`.
Social.me();
}])
Then in your view
{{SocialService.me}}
(function (app) {
'use strict';
app.factory('myService', MyService);
MyService.$inject = ['$q', 'serviceResource'];
function MyService($q, serviceResource) {
var jobs = [];
var service = {
getJobs: getJobs
};
return service;
//////////////////////////////////////
function getJobs(refresh) {
if (refresh) {
return serviceResource.autosysJobs().$promise.then(function (data) {
jobs = data;
return jobs;
}, function (err) {
throw err;
});
}
else {
var deferrer = $q.defer();
deferrer.resolve(jobs);
return deferrer.promise;
}
}
}
}(angular.module('app')));
you can pass a bool argument to tell weather to get local copy or fresh copy
It all depends upon the frequency of data change in back end data change and degree of tolerance of data inconsistency in your application. if the source data is changing too frequently and you can't afford inconsistent data then you have no choice other than to get fresh copy every time, but if that's not the case then you can cash data locally
I have bug (or maybe wrong usage?) with ui-router, resolve, factory and $http.get call.
Here's a snippet of the code in the config section:
$stateProvider
.state('index', {
url: '/',
views: {
'': {
templateUrl: './views/layout.html',
controller: 'MyAppCtrl'
},
'app-navbar#index': {
templateUrl: './views/app-navbar.html'
},
'app-accordion#index': {
templateUrl: './views/app-accordion.html',
controller: 'AppController',
resolve: {
appPromiseObj: function (AppFactory) {
return AppFactory.getApps();
}
}
},
...
and have the following AppFactory
myApp.factory('AppFactory', function ($http) {
var appFac = {
apps: []
};
appFac.getApps = function () {
promiseObj = $http
.get('http://localhost:4567/applications')
.success(function (data) {
console.log("success calling http");
angular.copy(data, appFac.apps);
});
return promiseObj;
};
return appFac;
});
But when I run the app, the console.log message in the 'success' callback never gets executed. The browser console log shows the http call executes OK with code 200. I am assuming this means angular thinks it has failed or should I be doing something else?
I even tried returning the $q promise object (as suggested in other somewhat related stack overflow threads) but no success. In the factory code if I use test data (i.e., no HTTP call) everything works fine even if I don't return a promise object. Any pointer on where the problem could be? Appreciate any pointers to help me debug...
I created working plunker here. The problem was incorrect promise handling inside of the AppFactory.getApps(). We need to return the promise at the begining and then also return some adjusted stuff on success. Now it works...
This is the main change I made:
// INSTEAD of this
// appFac.getApps1 = function () {
// promiseObj = $http.get('http://localhost:4567/applications')
// .success(function (data) {
// console.log("success calling http");
// angular.copy(data, appFac.apps);
// });
//
// return promiseObj;
// Let's use this
appFac.getApps = function () {
return $http
.get('http://localhost:4567/applications')
.success(function (data) {
console.log("success calling http");
angular.copy(data, appFac.apps);
return appFac.apps
});
// this is already returned above
//return promiseObj;
Check it in action here
EXTEND
Based on your extended plunker (still not fully working as expected)
-http://plnkr.co/edit/c89j3eFvYyguMt0QznAI?p=preview
I created adjsuted and workin version
http://plnkr.co/edit/f2aucPcbtzqwIEogbjuJ?p=preview
The only changes was proper naming (e.g. app.js to be loaded as a script instead of script.js...). But at the end, the promise is now resolved and this json:
[{"id":10566982,"networkID":34256899,"appID":56114114
,"name":"10566982name","description"
...
]
Is loaded and converted into accordion:
56114114name
58616695name
Finally to answer your question in the comment below:
but what is the difference between promiseObj = $http(...)... ; return promiseObj and return $http (...); ?
There is no difference (except I see my approach a bit more clear). The real difference is:
angular.copy(data, appFac.apps);
vs
return appFac.apps
as a final statement of the .success() method. It MUST return something. tha's the trick
on my server side (ASP.ne MVC) I have method which looks like this:
[HttpGet]
public JsonResult GetTrenings(string treningId)
{
var tempId = Guid.Parse(treningId);
var trening = TreningService.GetTreningById(tempId);
_trenings = TreningService.GetAllTreningsForUser(trening.UserId);
return Json(_trenings, JsonRequestBehavior.AllowGet);
}
And I have Angular service :
publicApp.angularModule.factory('feedSingleTreningService', function ($q, $http) {
return {
getTrenings: function (data) {
var input = $http.get("/Feed/GetTrenings", { params: { treningId: data } });
var deferred = $q.defer();
deferred.resolve(input);
return deferred.promise;
},
};
});
And In my Controller I call this service like this:
feedSingleTreningService.getTrenings(data).then(function(results) {
console.log("test", results);
});
But nothing is shown in console, I've debugged server side and request reaches it, and it returns _trenings, also service returns promise, but nothing happens.
I've changed then to finally, and in console "test" was shown but results were undefined.
Why is this happening ?
You don't need to defer your call to $http because it already returns a promise.
Just return
return $http.get("/Feed/GetTrenings", { params: { treningId: data } });
then anything that calls your function can do:
getTrenings(myData).then(function(data) { do something }).fail(function() { error });