Develop Reference

AngularJS ui router (resolve part)

I wrote ui.router to get data from JSON file.
I am not getting error messages, but code does not enter "resolve" part.
So I cannot get data from JSON file.
Can anyone tell me what could possibly make this happen and the way to fix it?
Here is my code.
(function(){
/*
* Declaration of main angular module for this application.
*
* It is named turtleFacts and has no dependencies (hence the
* empty array as the second argument)
*/
angular
.module('GrammarQuiz', ['ui.router'])
.config(
function($stateProvider, $urlRouterProvider) {
console.log('HOLY SMOKES, I CAN BREATHE IN HERE')
$urlRouterProvider.otherwise('/browse/1');
$stateProvider
.state('home',{
url: "/#/testtest",
resolve: {
questions: function($http){
console.log('!!##!##!');
return $http({
method: 'GET',
url: 'api/data1.json'
}).error(function(data,status,headers,config){
console.log('thisi now working!!!!');
})
}
}
})
})
})();

I'm pretty sure you have to return the value you want from the $http callbacks:
resolve: {
questions: function($http) {
return $http({
method: 'GET',
url: 'api/data1.json'
}).success(function(data) {
return data; // this is what you're missing
}).error(function() {
console.log('error');
});
}
}
But you should really use .then instead of .success and .error
resolve: {
questions: function($http) {
return $http({
method: 'GET',
url: 'api/data1.json'
}).then(function success(response) {
return response.data;
}, function error(response) {
console.log('error');
});
}
}

try to change question: function ($http)... to
question: ['$http', fucntion($http) {..}]

Angular Ui-Router TemplateProvider Never Called Despite Returning A Promise

This question is similar to this: Angular ui-router templateProvider never called except in my case I am returning a promise and it still isn't working. The xhr request is never fired.
app.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /content
$urlRouterProvider.otherwise("/content")
$stateProvider.state('map1', {
url: "/content/sectionI",
templateProvider: function($http, $stateParams) {
return $http({
method: 'GET',
url: '/contentMore',
params: {request:"Section_I_Unlocked",part:"map"}
}).then(function successCallback (html){
return html.data;
});
}
});
});
What am I doing wrong? I see the url change when I click on state map1 but the templateProvider never fires?

There is a working plunker
I adjusted a bit the url path (but mostly for plunker purposes, not sure how your server is configured), and the concept as is is working:
$stateProvider.state('map1', {
url: "/content/sectionI",
templateProvider: function($http, $stateParams) {
return $http({
method: 'GET',
url: 'contentMore.html',
params: {
request: "Section_I_Unlocked",
part: "map"
}
}).then(function successCallback(html) {
return html.data;
});
}
});
Check it in action here
There are even more easy ways how to load data.. e.g. with combination templateProvider and $templateRequest:
Using templateRequest in angular + typescript ($templateRequest not a function)
Angular ui.router reload parent templateProvider

Angular 1.5.0 - Why is factory called only once?

I have an html template that displays data from an Angular factory. The problem is that the factory's get method performs call to the backend only when the page is loaded for the first time. When repeatedly opening the page I only see results from the first call to the backend. It looks like the factory somehow caches the results.
With using Chrome debug tools I see that Angular makes GET requests with the same resource id on each page load.
This is the factory definition:
.factory('Company', ['$resource', '$routeParams', function ($resource, $routeParams) {
return $resource('/companies/getCompany/:companyId', {}, {
get: {
method: 'GET',
url: '/companies/getCompany/:companyId',
params: {
'companyId': $routeParams.companyId
}
},
save: {
method: 'POST',
url: '/companies/updateCompany'
},
insert: {
method: 'POST',
url: '/companies/createNewCompany'
}
});
}])
This is the controller code
.controller('MyController', ['$scope', '$location', 'Company',
function ($scope, $location, Company) {
Company.get(function (data) {
$scope.company = data;
});
}]);
I'm using ng-click to open the page
<tr ng-repeat="company in companies"
ng-click="redirectToCompanyForm(company.id)">
$scope.redirectToCompanyForm = function (companyId) {
$location.url('/updateCompany/' + companyId);
}
I set a breakpoint on the factory - app pauses only the first time when I access the page.
Why is my factory called only once and how can I solve this?

From the Angular docs:
Note: All services in Angular are singletons. That means that the injector uses each recipe at most once to create the object. The injector then caches the reference for all future needs.
So you are right, all services are only created once and then cached by Angular.
Edit: better answer for your situation below:
$resource caching
You can disable caching the resource by adding the options to the $resource call:
return $resource('/companies/getCompany/:companyId', {}, {
get: {
method: 'GET',
params: {
'companyId': $routeParams.companyId
},
cache: false // THIS LINE
}
}
Edit 2: according to the docs, the first parameter of $resource is not optional and must be an url.

Maybe you can use low level $http methods in your controller.
$resource is a fantastic utility but in your case you don't want persist the data.
Try the $http.get method..
Or try the query() method.
$scope.myData = DataFactory.query();

Finally fixed the issue. Factory use was incorrect. This is the factory module
.factory('Company', ['$resource', function ($resource) {
return $resource('/companies/getCompany/:id', null, {
save: {
method: 'POST',
url: '/companies/updateCompany'
},
insert: {
method: 'POST',
url: '/companies/createNewCompany'
}
});
}])
And this is how the factory should be called
Company.get({id: $routeParams.companyId}, function (data) {
$scope.company = data;
});
Now the correct data is shown everytime the page is loaded.

returning value to higher scope inside from a chained functions in angular js

I have a function getUsers that I want to return JSON from an web api .. but I cant seem to get the data out, I can't return the data because the function is inside $http. What should i do ?
function getUsers() {
$http({ method: 'GET', url: '/api/loginapi/userdetails' })
.success(function (data, status, headers, config) {
details = data;
});
return details;
}

$http makes an asynchronous call, so you can't immediately return fetched data.
What you can return is a promise. Good news, $http() returns one:
function getUsers() {
return $http({ method: 'GET', url: '/api/loginapi/userdetails' });
}
Then you can use your function:
getUsers().then(function(data) {
var details = data;
// Process your details!
});

You can access data there for sure, nothing is 'inside' $http, I suggest you pass in a callback to getUsers() and do whatever you want with the returned data:
var getUsers=function(callback){
$http({ method: 'GET', url: '/api/loginapi/userdetails' })
.success(function (data, status, headers, config) {
callback(data);
});
}
and use it like this inside your controller:
getUsers(function(users){
$scope.whatever = users;
})

I created plunkr for your question http://plnkr.co/edit/lqX4apmvnKM3i5jGZDQM?p=preview
$http return a promise. Please read details about promise at http://johnmunsch.com/2013/07/17/angularjs-services-and-promises/ . It is an important understanding if you want to write asynchronous application. This is another useful link - Inside my own Angular service, how do you get the return value back to the Controller that called the service? . Refer to answer. It explains how to use promise and deffered in angularjs.
var app = angular.module('plunker', []);
app.service('UserService', ['$http', '$q',
function($http, $q) {
this.getUser = function() {
return $http({
method: 'GET',
url: 'data.json'
});
};
}
]);
app.controller('MainCtrl', function($scope, UserService) {
$scope.user = {};
UserService.getUser().then(function(response){
$scope.user = response.data;
});
});

AngularJS: Call a particular function before any partial page controllers

I want to call a particular function: GetSession() at the beginning of my application load. This function makes a $http call and get a session token: GlobalSessionToken from the server. This session token is then used in other controllers logic and fetch data from the server. I have call this GetSession()in main controller: MasterController in $routeChangeStart event but as its an asynchronous call, my code moves ahead to CustomerController before the $http response.
Here is my code:
var GlobalSessionToken = ''; //will get from server later
//Define an angular module for our app
var myApp = angular.module('myApp', ['ngRoute']);
//Define Routing for app
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/customer', {
templateUrl: 'partials/customer.html',
controller: 'CustomerController',
resolve: {
loadData: function($q){
return LoadData2($q,'home');
}
}
}).
otherwise({
redirectTo: '/home'
});
}]);
//controllers start here and are defined in their each JS file
var controllers = {};
//only master controller is defined in app.js, rest are in separate js files
controllers.MasterController = function($rootScope, $http){
$rootScope.$on('$routeChangeStart', function(){
if(GlobalSessionToken == ''){
GetSession();
}
console.log('START');
$rootScope.loadingView = true;
});
$rootScope.$on('$routeChangeError', function(){
console.log('ERROR');
$rootScope.loadingView = false;
});
};
controllers.CustomerController = function ($scope) {
if(GlobalSessionToken != ''){
//do something
}
}
//adding the controllers to myApp angularjs app
myApp.controller(controllers);
//controllers end here
function GetSession(){
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
}).error(function (data, status, headers, config) {
console.log(data);
});
}
And my HTML has following sections:
<body ng-app="myApp" ng-controller="MasterController">
<!--Placeholder for views-->
<div ng-view="">
</div>
</body>
How can I make sure this GetSession() is always called at the very beginning of my application start and before any other controller calls and also called only once.
EDIT: This is how I added run method as per Maxim's answer. Still need to figure out a way to wait till $http call returns before going ahead with controllers.
//Some initializing code before Angular invokes controllers
myApp.run(['$rootScope','$http', '$q', function($rootScope, $http, $q) {
return GetSession($http, $q);
}]);
function GetSession($http, $q){
var defer = $q.defer();
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
defer.resolve('done');
}).error(function (data, status, headers, config) {
console.log(data);
defer.reject();
});
return defer.promise;
}

Even though some of the solutions here are perfectly valid, resolve property of the routes definition is the way to go, in my opinion. Writing your app logic inside session.then in every controller is a bit too much , we're used such approach too in one of the projects and I didn't work so well.
The most effective way is to delay controller's instantiation with resolve, as it's a built-in solution. The only problem is that you have to add resolve property with similar code for every route definition, which leads to code duplication.
To solve this problem, you can modify your route definition objects in a helper function like this:
function withSession(routeConfig) {
routeConfig.resolve = routeConfig.resolve || {};
routeConfig.resolve.session = ['getSessionPromise', function(getSessionPromise) {
return getSessionPromise();
}]
return routeConfig;
}
And then, where define your routes like this:
$routeProvider.when('/example', withSession({
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
}));
This is one of the many solutions I've tried and liked the most since it's clean and DRY.

You can't postpone the initialisation of controllers.
You may put your controller code inside a Session promise callback:
myApp.factory( 'session', function GetSession($http, $q){
var defer = $q.defer();
$http({
url: GetSessionTokenWebMethod,
method: "POST",
data: "{}",
headers: { 'Content-Type': 'application/json' }
}).success(function (data, status, headers, config) {
GlobalSessionToken = data;
defer.resolve('done');
}).error(function (data, status, headers, config) {
console.log(data);
defer.reject();
});
return defer.promise;
} );
myApp.controller( 'ctrl', function($scope,session) {
session.then( function() {
//$scope.whatever ...
} );
} );
Alternative: If you don't want to use such callbacks, you could have your session request synchronous, but that would be a terrible thing to do.

You have not provided any details related to GetSession. For scenarios like this you should use the resolve property while defining your routes in $routeProvider. I see you are using resolve already.
What you can do now is to wrap the GlobalSessionToken into a Angular service like GlobalSessionTokenServiceand call it in the resolve to get the token before the route loads. Like
resolve: {
loadData: function($q){
return LoadData2($q,'home');
},
GlobalSessionToken: function(GlobalSessionTokenService) {
return GlobalSessionTokenService.getToken() //This should return promise
}
}
This can then be injected in your controller with
controllers.MasterController = function($rootScope, $http,GlobalSessionToken){