0

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

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
Derek Hannah
  • 537
  • 7
  • 23
  • also the first view's height is not right, it should say "Welcome to yoMAUI – Derek Hannah May 14 '15 at 21:01
  • Your second link is not public. Also what do you mean by `Everything loads fine when I view it in the MFP console, but not on localhost.`? MFP runs on `localhost`. – Yoel Nunez May 14 '15 at 21:46
  • heres the updated image link https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing – Derek Hannah May 14 '15 at 21:50
  • if i run gulp in the terminal it will start a local host at localhost:8000, when i do that i get an error of "WL not defined", but when i run it in the mobile first console i get no errors as shown in the image provided – Derek Hannah May 14 '15 at 21:52
  • but i do still have the problem of the sidebars not working and the home page template being off in the other image provided – Derek Hannah May 14 '15 at 21:54
  • here is a link showing how to install Mobile Angular UI with Yeoman, http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/ – Derek Hannah May 14 '15 at 21:54

2 Answers2

0

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.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/77910/discussion-on-answer-by-idan-adar-ibm-mobilefirst-platform-and-mobile-angular-ui). – Taryn May 15 '15 at 14:53
-1

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

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
Derek Hannah
  • 537
  • 7
  • 23