mcfly-io / generator-mcfly

A Yeoman generator for scaffolding an application using angular, browserify, ionic and famous
324 stars 43 forks source link

[bug] (plunkr included) ui-router $state 'resolve' not injected into controller (or registered as a provider) #163

Closed rbutera closed 9 years ago

rbutera commented 9 years ago

tl;dr

setting a resolve property on a ui-router state declaration object doesn't work, but it works in vanilla ionic framework and with vanilla ui router

The Problem

Error: [$injector:unpr] Unknown provider: plzworkProvider <- plzwork <- ionichan.chanMobileUI.me
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=plzworkProvider%20%3C-%20plzwork%20%3C-NaNonichan.chanMobileUI.me
    at REGEX_STRING_REGEXP (http://localhost:5000/scripts/bundle.js:11084:12)
    at http://localhost:5000/scripts/bundle.js:15036:19
    at Object.getService [as get] (http://localhost:5000/scripts/bundle.js:15183:39)
    at http://localhost:5000/scripts/bundle.js:15041:45
    at getService (http://localhost:5000/scripts/bundle.js:15183:39)
    at invoke (http://localhost:5000/scripts/bundle.js:15215:13)
    at Object.instantiate (http://localhost:5000/scripts/bundle.js:15232:27)
    at http://localhost:5000/scripts/bundle.js:19522:28
    at IonicModule.controller.self.appendViewElement (http://localhost:5000/scripts/bundle.js:43602:24)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (http://localhost:5000/scripts/bundle.js:41859:41)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (http://localhost:5000/scripts/bundle.js:41779:20)
    at IonicModule.controller.self.render (http://localhost:5000/scripts/bundle.js:43476:14)
    at IonicModule.controller.self.register (http://localhost:5000/scripts/bundle.js:43434:10)
    at updateView (http://localhost:5000/scripts/bundle.js:48711:23)
    at IonicModule.directive.compile (http://localhost:5000/scripts/bundle.js:48695:9)
    at invokeLinkFn (http://localhost:5000/scripts/bundle.js:19279:9)

and the view won't load.

Sample Source Code from generator-angular-famous-ionic project

Note: please check the plnkr for a working version

Note 2: the state that doesn't work is root.Tabs.People.Me

Views

it may be easier to grok the following code if you understand the basic view hierarchy. The following is not actual code, it's just a representation of the views in HTML.

<ion-nav-view>
    <ion-nav-view name="view-content">
          <ion-nav-view name="active-tab">
                 <ion-view><ion-content>THE CONTENT HERE</ion-content></ion-view>
         </ion-nav-view>
    </ion-nav-view>
</ion-nav-view>

root.states.js

'use strict';

module.exports = function (namespace) {
    var angular = require('angular');
    var app = angular.module(namespace);

    app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.otherwise('/stream');

            $stateProvider
                .state('root', {
                    template: require('../views/root.html'),
                    url: '/',
                    abstract: true
                });
        }
    ]);

    return app;
};

tabs.states.js

'use strict';

module.exports = function(namespace) {

    var angular = require('angular');

    var app = angular.module(namespace);

    app.config(['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('root.Tabs', {
                    abstract: true,
                    views: {
                        'view-content': {
                            template: require('../views/tabs/tabs.html') // should contain a view called active-tab
                                // TODO: create tabs controller and add to states
                        }
                    }
                });

        }
    ]);

    return app;
};

people.states.js

'use strict';

module.exports = function (namespace) {
    var angular = require('angular');
    var app = angular.module(namespace);

    var plzwork = function plzworkResolve($q, currentUser) {
        debugger;
        var deferred = $q.defer();

        currentUser.get().then(function (result) {

            deferred.resolve({
                current: result
            });

        }, function (error) {
            debugger;
            deferred.reject(error);
        });

        return deferred.promise;
    }

    plzwork.$inject = ['$q', app.namespace.auth + '.currentUser'];

    app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {
            /**
             * PEOPLE TAB STATES
             */
            $stateProvider
                .state('root.Tabs.People', {
                    abstract: true,
                    views: {
                        'view-content': {
                            template: require('../../views/tabs/tabs.html') // should contain a view called active-tab@root.Tabs
                        }
                    }
                })

                // Stream
                .state('root.Tabs.People.Me', {
                    url: 'me',
                    views: {
                        'active-tab@root.Tabs': {
                            template: require('../../views/tabs/people/me.html'),
                            resolve: {
                                'plzwork': plzwork
                            },
                            controller: 'ionichan.chanMobileUI.me as meCtrl'
                        }
                    }
                });
        }
    ]);

    return app;
};

me.controller.js

'use strict';
var controllername = 'me';

module.exports = function (app) {
    /*jshint validthis: true */

    var deps = ['$log', app.namespace.auth + '.currentUser', 'plzwork'];

    function controller($log, currentUser, plzwork) {
        var vm = this;
        vm.current = {
            user: {},
            isLoggedIn: false
        };

        vm.text = {
            title: 'Welcome'
        };

        var logout = function () {
            currentUser.logout();
            activate();
        };

        var activate = function () {

            // get the current user#
            // TODO: check old version (without plzwork)
            if (plzwork) {
                vm.current.user = currentUser.currentUser;

                if (vm.current.user) {
                    vm.text.title = 'Me';
                } else {
                    vm.text.title = 'Welcome';
                }
            } else {
                $log.info('currentUser: not logged in');
            }

            vm.current.isLoggedIn = currentUser.isLoggedIn;
        };

        activate();
    }

    controller.$inject = deps;
    app.controller(app.name + '.' + controllername, controller);
};

Possible Workarounds?

I would be happy to give access to my project to anyone that is willing to help

rbutera commented 9 years ago

lol, as soon as I finished writing this issue it started working. sorry!