Using ng-flow + ui-router

[phillipmjordan]

I'm using ng-flow on one of the pages in my route. For HTML5 compliant browsers everything works fine. But for IE8+9, which I unfortunately have to support (insert head banging) it's throwing an error. I've added the fusty flow files, but the directive (flow-init) is throwing an error that FustyFlow is undefined. Any ideas/suggestion on how to tackle this would be appreciated. Thanks!

[AidasK]

I suspect you are loading libraries in a wrong order.
Look at the main website source code: http://flowjs.github.io/ng-flow/

    <script src="bower_components/flow.js/dist/flow.js"></script>
    <script src="bower_components/fusty-flow.js/src/fusty-flow.js"></script>
    <script src="bower_components/fusty-flow.js/src/fusty-flow-factory.js"></script>
    <script src="bower_components/ng-flow/dist/ng-flow.js"></script>

This is the strict order in which files should be loaded.
You are probably using ng-flow-standalone package, which can't be used with fusty-flow.

[phillipmjordan]

@AidasK thanks for the reply. So, I got the order to load right and I'm getting this error in IE8+9: FustyFlow is undefined <div class="ng-scope" data-ui-view="">

I should also note that I'm using Require.js. Here is my require.config:

require.config({
    baseUrl: '/Scripts',
    paths: {
        'jquery': (document.addEventListener) ? ['//code.jquery.com/jquery-2.1.0.min','jquery-2.1.0.min'] : ['//code.jquery.com/jquery-1.11.1.min','jquery-1.11.1.min'],
        'angular': ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min','angular.min'],
        'angular-ui-router': 'angular-ui-router',
        'angular-sanitize': 'angular-sanitize.min',
        'flow': 'flow.min',
        'fusty-flow': ['//cdn.jsdelivr.net/fusty-flow.js/1.0.0b3/fusty-flow','fusty-flow'],
        'fusty-flow-factory': ['//cdn.jsdelivr.net/fusty-flow.js/1.0.0b3/fusty-flow-factory','fusty-flow-factory'],
        'ng-flow': 'ng-flow.min',
        'handjs': 'hand.minified-1.3.8',
        'imageRegionSelector': 'ImageRegionSelector'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-ui-router': {
            deps: ["angular"]
        },
        'angular-sanitize': {
            deps: ["angular"]
        },
        'ng-flow': {
            exports: 'ng-flow',
            deps: ["angular","flow", "fusty-flow","fusty-flow-factory"]
        },
        'handjs': {
            deps: ["jquery"]
        },
        'imageRegionSelector': {
            deps: ["handjs"]
        }
    },
});

Snippet from my angular module config:

.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function ($locationProvider, $stateProvider, $urlRouterProvider) {
            $urlRouterProvider
                .otherwise("/");
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'templates/home.html'
                })
                .state('create', {
                    abstract: true,
                    url: '/create',
                    template: '
'
                })
                .state('create.home', {
                    url: '',
                    templateUrl: 'templates/create.html'
                })
                .state('create.done', {
                    url: '/done',
                    templateUrl: 'templates/done.html'
                });
        }])
        .config(['flowFactoryProvider', function (flowFactoryProvider) {
            flowFactoryProvider.defaults = {
                target: _SERVER_ + '/photos',
                query: function (file, chunk) {
                    return { "mediaType": file.file.type }
                },
                singleFile: true
            };
            /* flowFactoryProvider.on('catchAll', function (event) {
                console.log('catchAll', arguments);
            }); */
            flowFactoryProvider.factory = fustyFlowFactory;
        }])

and snippet from create.html :

<main data-ng-controller="creatFormCtrl">
    <form name="createForm" data-ng-show="!steps.preview.active" data-ng-submit="submit()" novalidate>
        <div class="col12" data-flow-init data-flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" data-flow-files-submitted="$flow.upload()" data-flow-file-success="setPhoto($message)">
....
       </div>
   </form>
</main>

It's failing once it routes to the Create state. Any ideas would be greatly appreciated. Thanks once again.

[AidasK]

...
        'fusty-flow': ['//cdn.jsdelivr.net/fusty-flow.js/1.0.0b3/fusty-flow','fusty-flow'],
        'fusty-flow-factory': ['//cdn.jsdelivr.net/fusty-flow.js/1.0.0b3/fusty-flow-factory',

Are these links valid?
CDN is not updated, you should download these files instead.

There might be an issue with fusty-flow-factory:
https://github.com/flowjs/fusty-flow.js/blob/master/src/fusty-flow-factory.js
I haven't placed there amd define, because it would take more code than the logic inside.

One more issue might also occur, because fusty-flow does not have flow require statement:
https://github.com/flowjs/fusty-flow.js/blob/master/src/fusty-flow.js

Hope this helps. fusty-flow library might require some additional changes, pull requests are welcome.

[AidasK]

Might be fixed, closing for now