IBM MobileFirst Platform and Mobile Angular UI

Question

I have created an MFP project with the MFP CLI

After creating the project, I ran "yo mobileangularui" in the project root to install Mobile Angular UI

This scaffolds out a Mobile Angular UI project with AngularJS and Gulp

I am minifying all the js and css files, including the MFP javascript files and putting them in the MFP common folder with gulp

Everything loads fine when I view it in the MFP console, but not on localhost.

My problem is that the sidebars do not work when I click on them. I am not getting any errors. I log a message console.log when I click the menu button and it comes through fine, but it doesn't open the side bar.

If I build this project with out MFP everything works fine.

Not sure whats going on as everything with MFP seems to load fine in the console.

Some images:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing

Answer 1

I have never used AngularJS Mobile UI tooling, but the WL is undefined error (that is discussed in the comments) is occurring because of the way you are injecting source to the index.html.

This is how the resulting (part of the) HTML should look:

...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>

But this is how it's actually looking:

...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script src="cordova.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>

As you can see there are two Cordova references, one correct (worklight/cordova.js) and one incorrect (cordova.js)

The extra cordova.js is apparently coming from gulpfile.js at line #148 where it inject.push (path-to-cordova.js). This injection should be removed or handled differently because MFP already uses Cordova and injects it. Use MFP's.

You can also fix the header. It seems to happen because of the following in app.min.css:

.app-body, .app-content {
    height: 100%;
    overflow: hidden;
    display: block;
    padding: 0;
}

Change padding: 0 to padding-top: 25px;. But that may be iOS-specific... meaning you will not see it when previewing the app in the MFP console, because there is no status bar there unlike in the iOS Simulator/device.

Answer 2

The problem with angular mobile ui was my manual bootstraping of angular for MFP

i was using

    angular.element(document).ready(function(){
        angular.bootstrap(document, ['yoMAUI']);
        location.hash = '/';
    });

When I need to bind to that body and not the document like so

var body = document.getElementsByClassName("body") ;
    angular.element(document).ready(function(){
        angular.bootstrap(body, ['yoMAUI']);
        location.hash = '/';
    });

Is this going to mess with MFP at all, it all? seems to be running fine in the console