ui-route resolve dependency V2

[jussolutions]

• [x] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.2.3
Node	8.9.4
npm	5.6.0
Operating System	OS X 10

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	SCSS
Router	ui-router
Client Tests	Mocha
DB	SQL
Auth	N

Hi,

I was reading the following article as I am experiencing the same issue, but I have followed the articles but just cannot work out what I have done so I apologies if this has been answered.

Having created a brand new project using Angular-Fullstack-Generator and then changed the following files:

main.component.js

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import routing from './main.routes';

export class MainController {
  'ngInject';
  awesomeThings = [];

  /*@ngInject*/
  constructor($http) {
    this.$http = $http;
    console.log( 'this - ', this );
  }
  $onInit() {
    this.$http.get('/api/things')
      .then(response => {
        this.awesomeThings = response.data;
      });
  }
}

export default angular.module('newgeneratorApp.main', [uiRouter])
  .config(routing)
  .component('main', {
    template: require('./main.html'),
    bindings: {
      data: '<data'
    },
    controller: MainController
  })
  .name;

main.route.js

'use strict';

export default function routes($stateProvider) {
  'ngInject';

  $stateProvider.state('main', {
    url: '/',
    template: '<main></main>',
    resolve: {
      data: function() { 
        'ngInject'
        console.log( 'Here' );
        return 'Test123'
       }
    }
  });
}

When I run this I end up with "console.log( 'this - ', this );" of the main.component.js being undefined. The resolve is being fired as "console.log( 'Here' )" is being printed out.

How do I get the return value back into my component so that I can access it? I have tried the injection technique, i.e. adding data to the constructor but that gives me an Unknown Provider issue.

Any help would be really appreciated.

Many thanks

[jussolutions]

Hi,

I managed to resolve this issue by updating the code to the following:

Firstly, the main.route.js file:

'use strict';

export default function routes($stateProvider) {
  'ngInject';

  $stateProvider.state('main', {
    url: '/',
    component: 'main',
    template: '<main main="$resolve.main"></main>',
    resolve: {
      main: function($q) { 
        console.log( 'Here' );
        return 'Test123';
       }
    }
  });
}

Notice:

template: <main main="$resolve.main"></main>'

This seems to pass the information back to the component.

The main.component.js looks like:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import routing from './main.routes';


export class MainController {
  awesomeThings = [];

  /*@ngInject*/
  constructor($http) {
    this.$http = $http;
    console.log( 'this - ', this.fred );
  }
  $onInit() {
    console.log( "Data Load - ", this.main );
    this.fred = this.main;
    this.$http.get('/api/things')
      .then(response => {
        this.awesomeThings = response.data;
      });
  }
}


export default angular.module('newgeneratorApp.main', [uiRouter])
  .config(routing)
  .component('main', {
    template: require('./main.html'),
    controller: MainController,
    bindings: { main: '<' }
  })
  .name;

Would be good to get some feedback on this, will leave this issue open unless the moderators want to close it.