构建坚如磐石的 Ionic 应用程序的高级工作流程第 2 部分：Mountain
序幕
在我们关于使用Generator-M-Ionic开发 Ionic 应用程序的系列文章的第二部分中，您将学习一些精彩的要素，例如测试、子生成器、插件以及与Ionic Platform等平台的生态系统集成。我们正在基于本系列第 1 部分中创建的项目进行构建。
跨平台 HTML5 应用程序开发很困难
即使拥有 Generator-M-Ionic、Angular JS、Cordova、Ionic（支持 iOS、Android、移动网络和 Windows（自Ionic 1.2起））等出色的工具，跨平台 HTML5 应用程序开发仍然很麻烦。
原因如下：也许您的应用应该在手机和平板电脑上运行，并且针对这两种情况采用不同的、专门设计的布局和工作流程。啊，客户忘了告诉您：显然它也应该在浏览器中运行！“它无论如何都是使用 Web 技术构建的，不是吗？”您的客户问道。也许甚至可以在桌面上使用Electron？哎哟...您将进行大量优化和测试！
当处理好这些问题时，还有很多复杂的问题，比如处理翻译、离线数据、持久性以及设备或应用程序后端之间的数据同步，你必须处理这些问题才能让客户满意。
当您为不同的应用商店构建应用、尝试集成复杂的推送服务或编写自定义 Cordova 插件和钩子时，您需要处理证书和许可证，而这些内容需要彻底编码。最糟糕的是，如果客户要求发生变化，您就得重新开始。
我知道。我们经历过这一切。这就是我们构建Generator-M-Ionic 的原因，它是一个值得信赖且功能强大的编码伴侣，可让您专注于真正的挑战。而开发不应该是其中之一！
你准备好攀登严肃应用开发之山了吗？我们走吧。
质量保证
您已设置好项目、创建了第一个提交，并发现您已准备好开始编码。无论您是单独编码还是团队编码，您都需要采取一些措施来确保您的代码质量高。Generator-M-Ionic 可满足您的需求：
语法检查
您的 Generator-M-Ionic 项目附带已使用ESLint嵌入的既定编码指南和工作流程。在gulp watch的每次迭代中，Gulp 都会检查您的所有应用程序 JavaScript 文件是否违反指南。
要在编辑器中开发时获取 linting 通知或了解如何配置默认规则集，请查看我们的ESLint 指南。如果您正在使用app/文件夹中的 JSON 文件（例如，处理翻译），生成器的 linting 也会验证这些文件！这可让您的开发无忧无虑。
测试
另一个您无需亲自设置和配置所有内容的领域是单元测试（使用 Karma）和端到端测试（使用 Protractor）。您的示例应用程序甚至附带了一个现成的测试套件，您可以立即通过运行来试用它：
gulp karma
# and
gulp protractor
测试设置的相关文件如下：
test/
└── karma/
└── protractor/
karma.conf.js
protractor.conf.js
我们的测试指南可以帮助您开始为您的应用编写自己的单元和端到端测试。一旦您掌握了这些，Husky Hooks 指南将解释如何在git commit或git push之前自动运行 linting 和测试。
编码
添加 Angular 组件
我们的子生成器阵列可让您轻松创建最重要的 Angular 组件。如果适用，它们还会生成示例测试文件，以便您可以立即开始测试。
例如，我们经常使用 pair-subgenerator。它创建一个控制器，其中包含一个测试文件和一个同名的模板。
yo m-ionic:pair phone
现在我们只需要向main.js添加一个状态：
.state('main.phone', {
url: '/phone',
views: {
'tab-phone': {
templateUrl: 'main/templates/phone.html',
controller: 'PhoneCtrl as ctrl'
}
}
})
然后在我们的tabs.html文件中添加一个导航项，您可以在app/main/templates/中找到它，将它全部整合在一起：
<!-- List Tab -->
<ion-tab title="Phone" icon-off="ion-ios-telephone-outline"
icon-on="ion-ios-telephone"
ui-sref="main.phone">
<ion-nav-view name="tab-phone"></ion-nav-view>
</ion-tab>
就是这样。大约两分钟内即可创建一个新导航项、一条新路线、控制器、测试文件和模板。结果如下：
添加 Sass
这是一项更简单的任务。您生成的每个模块都带有一个默认的 Sass 文件。对于您的主模块，这将是main.scss，它位于app/main/styles/中。打开它并添加一些 Sass：
ion-list {
ion-item {
color:red;
}
}
保存后，您的gulp watch任务将自动编译并注入生成的 CSS，甚至重新加载浏览器。还不够时髦吗？随着项目越来越大，您可能希望将 Sass 拆分为多个文件。在我们的Sass 集成指南中了解如何操作。
添加插件
如果我们不为应用添加一些不错的Cordova 插件，它就不是真正的混合应用。所以让我们开始吧！
您的项目附带了最新版本的Cordova CLI的本地安装，您可以通过 Gulp 调用它。我们在本地安装它，因此您不必担心寻找文件、项目和版本。语法几乎与使用全局 CLI 安装完全相同。例如，要安装 Cordova 相机插件，请运行：
gulp --cordova "plugin add cordova-plugin-camera --save"
您也想为 Windows 开发应用程序？安装相应的Cordova 平台要求并输入：
gulp --cordova "platform add windows --save"
不要忘记调用--save以便在config.xml中保留新的插件和平台！
我们的开发介绍中有专门的部分介绍如何使用 Cordova CLI 包装器。
现在我们安装了新插件，我们想使用它！ngCordova被声明为您使用生成器创建的每个模块的依赖项。因此，您可以立即开始使用插件。
请参阅main.js中的主要模块声明以了解其操作方式。因此，在我的PhoneCtrl中，我只需注入$cordovaCamera 服务即可访问该插件，仅此而已：
angular.module('main')
.controller(<span免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~