IBM MobileFirst платформы и Mobile Угловая UI

Question

Я создал проект многофункционального устройства с MFP CLI

После создания проекта, я побежал «йо mobileangularui» в корневом каталоге проекта для установки мобильных Угловое UI

This подмости из проекта Mobile Угловой UI с AngularJS и глотком

Я Минимизация всех JS и CSS файлы, в том числе MFP файлы JavaScript и положить их в общей папке MFP с глотком

Everything нагрузка FIN e, когда я просматриваю его в консоли MFP, но не на localhost.

Моя проблема заключается в том, что боковые панели не работают, когда я нажимаю на них. Я не получаю никаких ошибок. Я записываю сообщение console.log, когда я нажимаю кнопку меню, и он проходит через штраф, но он не открывает боковую панель.

Если я построю этот проект без МФУ, все будет хорошо.

Не уверен, что происходит, поскольку все, что работает с МФУ, кажется, прекрасно заряжается в консоли.

Некоторые изображения:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing

Answer 1

Я никогда не использовал AngularJS Mobile UI инструментов, но ошибка WL is undefined (что обсуждается в комментариях) происходит из-за того, как вы инъекционных источник в индекс .html.

Это как результирующая (часть) HTML должен выглядеть:

... 
... 
<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> 

Но это, как это на самом деле ищет:

... 
... 
<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> 

Как вы можете видеть, что есть две ссылки Кордова, один правильный (worklight/cordova.js) и один неверный (cordova.js)

Дополнительный cordova.js, по-видимому, поступает из gulpfile.js по строке # 148, где он inject.push (path-to-cordova.js). Эта инъекция должна быть удалена или обработана по-разному, потому что MFP уже использует Кордову и вводит ее. Используйте MFP.

Вы также можете исправить заголовок. Это, кажется, происходит из-за следующих в app.min.css:

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

Изменение padding: 0 в padding-top: 25px;. Но это может быть специфично для iOS ... это означает, что вы не увидите его при просмотре приложения в консоли MFP, потому что там нет строки состояния, в отличие от iOS Simulator/device.

Answer 2

Проблема с угловой мобильный ш был мой ручной bootstraping угловой для МФУ

я использовал

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

Когда мне нужно привязать к этому телу, а не документ, как так

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

Это вообще беспорядок с МФУ, все? кажется, работает нормально в консоли