Route to component with route resolve | AngularJS

Question

After going through the article https://ui-router.github.io/guide/ng1/route-to-component, we tried to use resolve in AngularJS. But unfortunately,we received the error as:

Unknown provider: testProvider <- test <- SaleComponentController"

Can someone help us in displaying "test" as output in the controller "SaleComponentController"

angular.module('salesApp')
.config(['$stateProvider',function($stateProvider){

    $stateProvider.state('sales',{
        url: '/sales',
        data: {
            requiredAuth: true
        },
        component: 'sales',
        reloadOnSearch: false,
        views: {//default
            '@': {
                component: 'sales'
            },
            'delivery@sales': {
                component: 'delivery' 
            }
        },
        resolve: {
            test: function(){
                return "test";
            }
        }
    })
}])

.component('sales',{
    bindings: {
        items: '<',
        test: '@'  
    },
    templateUrl: 'sales/sales.html',
    controller: 'SaleComponentController'
})
.controller('SaleComponentController',
  function (SalesService, $q, $transitions,test){
    var $ctrl = this;
    console.log("test");
    console.log($ctrl.test);

});

score 0 · Answer 1 · answered Dec 10 '19 at 21:56

Declare resolver bindings with one-way ("<") bindings:

.component('sales',{
    bindings: {
        items: '<',
        ̶t̶e̶s̶t̶:̶ ̶'̶@̶'̶
        test: '<'  
    },
    templateUrl: 'sales/sales.html',
    controller: 'SaleComponentController'
})

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method:

.controller('SaleComponentController',
  ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶S̶a̶l̶e̶s̶S̶e̶r̶v̶i̶c̶e̶,̶ ̶$̶q̶,̶ ̶$̶t̶r̶a̶n̶s̶i̶t̶i̶o̶n̶s̶,̶t̶e̶s̶t̶)̶{̶
  function (SalesService, $q, $transitions){
    var $ctrl = this;
    this.$onInit = () => {
        console.log("test");
        console.log($ctrl.test);
    });    
});

For more information, see

When to use the AngularJS `$onInit` Life-Cycle Hook

Route to component with route resolve | AngularJS

1 Answers1