How to use routeHelperProvider for ui-router

fajarachmadyusup13 commented 7 years ago

i was follow this style guide, especially in Routing section, but i don't know why, i still get some error, like this

Error: Could not resolve 'hello' from state '' w/z.transitionTo@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:17378 w/z.go@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:16936 G/</i<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular-ui-router.min.js:7:25826 e/q<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:160:431 f@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:47:146 kg/k.defer/c<@http://localhost:443/belajar-angularJSLagi/mastering/app/_lib/angular.min.js:50:68

and here's my code :

`<!DOCTYPE html>

TES Hello About

`

`(function() { 'use strict';

//app.js
angular
    .module('app', ['app.dashboard', 'app.helper']);

})();`

`(function() { 'use strict';

// app.dashboard.js
angular
    .module('app.dashboard', ['ui.router', 'app.helper']);

})();`

`(function() { 'use strict';

// app.helper.js
angular
    .module('app.helper', []);

})();`

`(function() { 'use strict';

// routerHelper.js
angular
    .module('app.helper')
    .provider('routerHelper', routerHelper);

routerHelper.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider'];
/* @ngInject */
function routerHelper($locationProvider, $stateProvider, $urlRouterProvider) {
    /* jshint validthis:true */
    this.$get = RouterHelper;

    $locationProvider.html5Mode(true);

    RouterHelper.$inject = ['$state'];
    /* @ngInject */
    function RouterHelper($state) {
        var hasOtherwise = false;

        var service = {
            configureStates: configureStates,
            getStates: getStates
        };

        return service;

        ///////////////

        function configureStates(states, otherwisePath) {
            states.forEach(function(state) {
                $stateProvider.state(state.state, state.config);
            });
            if (otherwisePath && !hasOtherwise) {
                hasOtherwise = true;
                $urlRouterProvider.otherwise(otherwisePath);
            }
        }

        function getStates() {
            return $state.get();
        }
    }
}

})(); `

`(function() { 'use strict';

// router.dashboard.js
angular
    .module('app.dashboard')
    .run(appRun);

appRun.$inject = ['routerHelper'];

function appRun(routerHelper) {
    routerHelper.configureStates(getStates());
}

function getStates() {
    var = rts[{
        state: 'hello',
        config: {
            abstract: true,
            template: '<h3>YYY<h3/>',
            url: '/hello'
        }
    }, {
        state: 'about',
        config: {
            abstract: true,
            template: '<h3>XXX<h3/>',
            url: '/about'
        }
    }];
    return rts;
}

})(); `

DanAtkinson commented 7 years ago

This sounds more like a question for StackOverflow than an issue with the style guide itself.

tcrite commented 7 years ago

Are you trying to navigate to an abstract state?

fajarachmadyusup13 commented 7 years ago

@tcrite yeah, you know whats the problem ?

tcrite commented 7 years ago

@fajarachmadyusup13 to my knowledge, I don't think you can navigate directly to an abstract state.

fajarachmadyusup13 commented 7 years ago

@tcrite you have any alternative ways for my problem ?

tcrite commented 7 years ago

@fajarachmadyusup13 I would either create a child state underneath those abstract states and navigate to those, or change the abstract flag to false.

tcrite commented 7 years ago

I use abstract states as like my main template. So if I had some shared navigation or something.

fajarachmadyusup13 commented 7 years ago

still need routerHelperProvider or not ?

fajarachmadyusup13 commented 7 years ago

i was solved this problem, i set abstract attribute to false

johnpapa / angular-styleguide

How to use routeHelperProvider for ui-router #813