generator-ionic-1-ndjathe 是一个用于创建基于 Ionic 1 的移动端应用项目的 npm 包。该包提供了快速启动和创建项目的脚手架，包含了一些预制的工具和插件，使得在 Ionic 开发的前端工程师可以更加高效和快速地搭建呈现不同功能的移动应用。
安装
使用 npm 进行安装：
$ npm install -g generator-ionic-1-ndjathe
安装完成后，使用以下命令生成项目：
$ yo ionic-1-ndjathe
项目结构
生成的项目结构如下：
-- -------------------- ---- ------- ------------------ --- ------ - --- -------------- - --- --------- --- ---------- --- -------- --- ---------- --- ----- - --- -------------- --- ---- - --- ---- - --- --- - --- ---- - --- ---------- - --- ---------- - --- ---------- - --- --------- --- ---------- --- ---------- --- ----------- --- ------------ --- ---------
命令行工具
启动项目
$ gulp watch
执行上述命令后可在浏览器中输入 http://localhost:8100/ 进行项目预览。
添加新的页面
$ yo ionic-1-ndjathe:page page-name
执行上述命令后生成的项目结构如下：
-- -------------------- ---- ------- ---- --- ---- --- --- - --- ------------ - --- ------ --- ---- --- ---------- - --- -------------- --- ---------- --- ---------- --- ---------
添加新的控制器
$ yo ionic-1-ndjathe:controller controller-name
执行上述命令后生成的项目结构如下：
-- -------------------- ---- ------- ---- --- ---- --- --- - --- ------------ - - --- ------------------ - --- ------ --- ---- --- ---------- --- ---------- --- ---------- --- ---------
示例代码
创建一个列表页，需要在终端中执行以下命令：
$ yo ionic-1-ndjathe:page list
完成上述操作后，打开 www/templates/list.html，撰写以下代码：
-- -------------------- ---- -------
--------- -------------
-------------
----------
--------- --------------- -- -------
-- --------- --
-----------
-----------
--------------
-----------接着，执行以下命令：
$ yo ionic-1-ndjathe:controller list
完成后，打开 app.js 文件添加如下代码：
-- -------------------- ---- -------
------------------ -
---- --------
------ -
----------- -
------------ ----------------------
----------- ----------------
-
-
--接下来，在 www/js/controllers/list.js 中编写以下代码：
-- -------------------- ---- -------
-------------------------------------
----------------------------- ---------------- -
------------ - -
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- -
--
---最后，在 www/templates/tabs.html 中添加以下代码：
<ion-tab title="List" icon="ion-ios-list-outline" href="#/app/list"> <ion-nav-view name="tab-list"></ion-nav-view> </ion-tab>
这样就完成了添加一个列表页的操作，使用 gulp watch 启动项目后就可以在应用中看到新生成的页面了。
总结
generator-ionic-1-ndjathe 为 Ionic 1 及其相关的开发者提供了一个快速生成项目的脚手架。在配合 Yeoman 使用的情况下，前端开发工作者可以更高效地创建不同功能的移动端应用项目。本文从安装、使用、命令行工具和示例代码四个方面介绍了如何使用该工具包，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b581e8991b448d1ec9