带有 angular-fullstack-generator 的 phonegap 应用程序答案

【问题标题】：phonegap app with angular-fullstack-generator带有 angular-fullstack-generator 的 phonegap 应用程序
【发布时间】：2015-09-16 00:52:39
【问题描述】：

任务是运行由yeoman 使用angular-fullstack-generator 和phonegap 创建的应用程序。

对于任何感兴趣的人，这些是我找到的最有前途的教程：

Getting Started with Mobile App Development with PhoneGap + Yeoman + AngularJS + Ionic
Quick Start Guide to PhoneGap+AngularJS 由 Holly Schinsky 撰写。（UI 部分可以工作，但功能不行 - 使用基本设置）
Building PhoneGap Apps with AngularJS 由 Brian Ford 撰写。（似乎代码库在某些时候发生了变化，所以我真的没有让它工作）

所以第一个教程引导我找到了一个由 yeoman 团队使用 angular-generator 的工作解决方案。但是现在使用 angular-fullstack-generator 我遇到了以下问题。控制台告诉我：

Failed to load resource file:///app/45eec174.app.css
Failed to load resource file:///app/f9250ffb.vendor.js
Failed to load resource file:///app/90992454.app.js
Failed to load resource file://www.google-analytics.com/analytics.js

所以到目前为止，我的怀疑是在index.html 的头部生成的<base href="/"> 标记。类似于此SO-question。简单地删除它是没有选择的。

现在我对 grunt 的理解是有限的，但为什么它与 grunt serve 一样有效？

我将如何解决此问题以使其与 phonegap 一起使用？

【问题讨论】：

您没有提供很多信息，但如果我必须做出有根据的猜测，我会说您的 index.html 位于错误的位置。它相对于您的应用文件夹位于何处？
跟app在同一个文件夹里

标签： cordova gruntjs angular-fullstack

【解决方案1】：

我也有同样的使命。但还没有让它发挥作用。但是，作为第一步，我设法将 UI 作为独立应用程序运行。

你猜对了，

在加载模板时，Angular 会在整个应用程序中使用此基本标记。同时，包含base标签也不会找到index.html中包含的资源。我做了以下

从 index.html 中删除了基本标记
在角度配置中做了以下

$locationProvider.html5Mode({ 启用：真，要求基础：假 });

step#2，帮助 Angular 在 html5mode 下工作，而不需要 base 标签。

以http://backendurl.com:port/api/service的形式更改所有后端服务调用
不从服务器提供 socket-io-client
在客户端安装 socket-io-client 作为 bower 组件
用后端 url 连接 socket-io-client
为 dist 构建全栈（grunt build:dist）
为 \dist\public 创建到 cordovaapppath\www
构建 cordova 应用程序（cordova build android）

你已经完成了。我已经成功地使用 phonegap 创建了我的应用程序。我创建了一个从 Angular 全栈扩展的 github 项目。 https://github.com/kannach/AFSPhonegap

请尝试并做出贡献。

【讨论】：

非常感谢，正是我所需要的！！你是如何修复 api 调用的 url 的？参考哪个？所有资产都存在同样的问题，因为要参考 img，一个简单的“assets/images/image.png”不再起作用......（“./”前缀不起作用）
我创建了一个常量服务，我可以在其中配置后端 url。在所有具有 $http.get 的文件中，注入此常量服务并以 api 为前缀。类似“constant.backenturl + /api/action”。
这正是我想要做的 :) 我只是没有弄清楚，根科尔多瓦指的是什么，当给出路径（例如形式 img src）......你知道吗在哪个目录中，cordova 在其“file:///”之后作为“root”？换句话说，我如何指定它应该在哪里寻找？（加载 .js 文件时，它的根目录是“android_asset/www/....”，虽然没有这样的文件夹）。区分它是否在cordova上运行并采用相应的baseUrl可以解决问题。你是这样做的吗？如果是，如何？谢谢你的帮助！
我设法让它工作，但我不满意，因为它非常“丑陋”：API-Calls: localhost:9000/api 上的某种 api-calls 在科尔多瓦不起作用，输入本地 ip 而不是工作... 资产：作为 baseUrl 我插入了“android_asset ....”您知道如何在没有黑客攻击的情况下“正确”完成这项工作吗？非常感谢！
我最近没时间检查。我刚刚建立了一个 github 项目，我将在那里整合我的更改。也许，我可以在本周末之前让它工作。

【解决方案2】：

目前，在完成所有@Chandru 指南之后，如果您在版本4.0.0 Beta 2 Webpack support 之后使用Generator Angular Fullstack 版本，则必须再做一件事：

在 webpack.make.js 中改行：

publicPath: BUILD || DEV || E2E ? '/' : `http://localhost:${8080}/`,

到

publicPath: BUILD || DEV || E2E ? '' : `http://localhost:${8080}/`,

【讨论】：