Call API to get InitData before bootstrap angular application

[Hoàng Ngọc Dũng]

Hi friends
I have to do like this to getting user log in information before bootstrap angular app. Do we have a better way ?
I don't want to use $http.get('/api/settings/account.json') to call api, I want to use AuthService.getUserInfo() but I can't get this service if i don't bootstrap angular app first.
My question is, in angular do we have an initialize resolve callback function like application_start ?

userInfo = null

angular.module 'gnp-app', modules
  .config ['$routeProvider',  ($routeProvider) ->
    $routeProvider
      .otherwise
        redirectTo: '/'
  ]
  .config ['$httpProvider', ($httpProvider) ->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] =
      $('meta[name=csrf-token]').attr('content')
  ]
  .config ['$locationProvider', ($locationProvider) ->
    $locationProvider.html5Mode(true)
  ]
  .run ['AuthService', (AuthService) ->
    AuthService.setUserInfo(userInfo)
  ]

$http = angular.injector(["ng"]).get("$http")
$http.get('/api/settings/account.json').then (response) ->
  userInfo = response.data
.finally ->
  angular.element(document).ready ->
    angular.bootstrap(document, ["gnp-app"])

[Sander Elias]

Hi Hoàng,

 

My question is, in angular do we have an initialize resolve callback function like application_start ?

What do you think `angular.module(x,[y]).run(...)` does? ;)

There is a way to see if the digest cycles are done, but its pretty hacky, and in my opinion only usable during development as a helper tool.
If you really need this, I can look it up for you.

Regards

Sander

[Hoàng Ngọc Dũng]

Hi Sander
Please take a look into my repo: http://jsfiddle.net/lovedota/qpwwm8bn/
I have a api to authorize when app start and the '$locationChangeStart' to prevent going to private page. This is the console.log()

locationChangeStart trigger:  undefined
locationChangeStart trigger:  undefined
Has User:[object Object]

When application start i want the api 'AuthService.fetchUser()' finish then all the angular event or handler will be triggered.
I find all things but it does not work. I have to do by that way https://blog.mariusschulz.com/2014/10/22/asynchronously-bootstrapping-angularjs-applications-with-server-side-data
But the code is not clean...
Please help !

[Sander Elias]

Hi Hoàng,

Well, the best way to clean this up is what the article is telling you about injecting the needed data on the server, this will save you an extra request also.

If really can't include this using the server, you can still do it, but do not use angular for the processing of your data. You can get by with user $http via the injector, but I don't like that too much either.

It is possible to to, and you have found the way already. It's a bit of a kludge, but there is no way (aside from above methods) around it. You need the timeout, because angular needs to finish at least 1 digest cycle before everything is settled enough for your solution to work.

Does that make it more clear?

Regards

Sander

[Hoàng Ngọc Dũng]

Hi Sander
Thank you for your helping.
Is this feature missing in angular, and does angular team work on it ? I mean is 'In some application, there always has an API for fetching the configuration/user information at the first time', it is really cool to have this feature in angularjs to make our code clean.
ex:
In this repo, we can use AuthService.fetchUser than use

$http = angular.injector(["ng"]).get("$http")
$http.get('/api/settings/account.json').then (response) ->
  userInfo = response.data
.finally ->
  angular.element(document).ready ->
    angular.bootstrap(document, ["gnp-app"])



http://jsfiddle.net/lovedota/qpwwm8bn/

Thanks !