IBM MobileFirst 平台和移动 Angular UI

Question

我已经使用 MFP CLI 创建了一个 MFP 项目

创建项目后，我在项目根目录中运行“yo mobileangularui”来安装Mobile Angular UI

这使用 AngularJS 和 Gulp 搭建了一个 Mobile Angular UI 项目

我正在缩小所有 js 和 css 文件，包括 MFP javascript 文件，并使用 gulp 将它们放在 MFP 公用文件夹中

当我在 MFP 控制台中查看它时，一切都加载正常，但不是在本地主机上。

我的问题是当我点击侧边栏时它们不起作用。我没有收到任何错误。当我单击菜单按钮时，我记录了一条消息console.log，它可以正常运行，但它没有打开侧边栏。

如果我在没有 MFP 的情况下构建这个项目，一切正常。

不确定发生了什么，因为 MFP 的所有内容似乎都可以在控制台中正常加载。

部分图片：
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 移动 UI 工具，但由于您将源代码注入 index.html 的方式，正在发生 WL is undefined 错误（在 cmets 中讨论）。

这是生成的（部分）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>

如您所见，有两个 Cordova 引用，一个正确（worklight/cordova.js），一个不正确（cordova.js）

额外的cordova.js 显然来自gulpfile.js 的第148 行inject.push (path-to-cordova.js)。由于 MFP 已经使用 Cordova 并进行了注入，因此应该删除或以不同方式处理此注入。使用多功能一体机。

您还可以修复标题。这似乎是因为 app.min.css 中的以下内容：

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

将padding: 0 更改为padding-top: 25px;。但这可能是特定于 iOS 的......这意味着您在 MFP 控制台中预览应用程序时不会看到它，因为与 iOS 模拟器/设备不同，那里没有状态栏。

Answer 2

角度移动用户界面的问题是我为 MFP 手动引导角度

我正在使用

    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 = '/';
    });

这会不会弄乱 MFP，这一切？似乎在控制台中运行良好