ngrecipe 是一个专为 AngularJS 程序员打造的功能强大、易于使用的 npm 包，它可以让你轻松创建美味佳肴菜谱应用程序。
ngrecipe 的安装
如果你尚未安装 ngrecipe，可以通过下面的命令在你的 AngularJS 项目中安装它：
npm install ngrecipe --save
安装之后，在你的 HTML 文件中引入以下的文件：
<script src="node_modules/ngrecipe/dist/ngrecipe.min.js"></script>
请注意，这只是在你的开发和测试阶段所需的。当你准备好把你的程序部署到生产环境时，你将需要使用 UglifyJS 或类似的工具来合并和压缩打包后的文件。
ngrecipe 的使用
ngrecipe 的主要功能是向你的应用程序添加一个recipe指令，它允许你创建和管理菜谱。
在你的 HTML 文件中添加以下标记，以创建一个新的菜谱：
<recipe></recipe>
这样就创建了一个名为 recipe 的指令，但是现在它并没有任何数据。
添加数据
为了向菜谱中添加数据，你可以使用静态的数据：
<recipe>
{/* Add your data inside here */}
</recipe>或使用动态数据：
<recipe ng-controller="MyController">
<div ng-repeat="recipe in myRecipes">
<h3>{{recipe.name}}</h3>
<p>{{recipe.description}}</p>
</div>
</recipe>在这个例子中，我们使用了一个控制器 MyController，它从一个数组 myRecipes 中读取菜谱数据。
添加菜单
你可以通过添加一个实例属性 menus 来向菜谱中添加菜单。菜单应该是一个数组，每个元素都应该描述一个菜单项。
-- -------------------- ---- -------
------------ - -
-
------ -----
------ -
-----
-----
-----
----
-
--
-
------ -----
------ -
-----
-----
----
-
--
-
------ -----
------ -
-----
-----
------
-
-
--在 HTML 文件中添加以下标记，以显示菜单：
<recipe menus="menus"></recipe>
添加食谱
你可以通过添加一个实例属性 recipes 来向菜谱中添加食谱。食谱应该是一个数组，每个元素都应该描述一个食谱项。
-- -------------------- ---- -------
-------------- - -
-
----- -------
--------- -----
------------ -
-----
-----
----
--
------------- -
-------
-------
-----
--
------ ----------------------------------
--
-
----- -----
--------- -----
------------ -
-----
-----
----
--
------------- -
------
------
---------
--
------ -------------------------------
--
-
----- -----
--------- -----
------------ -
-----
------
------
--
------------- -
------
-------
-----
-------
--
------ --------------------------------------
-
--在 HTML 文件中添加以下标记，以显示食谱：
<recipe recipes="recipes"></recipe>
添加搜索框
你可以向菜谱中添加搜索框，以便快速查找满足特定条件的食谱。要添加搜索框，请将如下标记添加到 HTML 文件中：
<recipe search="true"></recipe>
添加评论
你可以向菜谱中添加评论，以便用户分享他们的看法和经验。要添加评论，请将如下标记添加到 HTML 文件中：
<recipe comments="true"></recipe>
示例代码
-- -------------------- ---- -------
--------------------- -------------
--------------------------- ---------------- -
------------ - -
-
------ -----
------ -
-----
-----
-----
----
-
--
-
------ -----
------ -
-----
-----
----
-
--
-
------ -----
------ -
-----
-----
------
-
-
--
-------------- - -
-
----- -------
--------- -----
------------ -
-----
-----
----
--
------------- -
-------
-------
-----
--
------ ----------------------------------
--
-
----- -----
--------- -----
------------ -
-----
-----
----
--
------------- -
------
------
---------
--
------ -------------------------------
--
-
----- -----
--------- -----
------------ -
-----
------
------
--
------------- -
------
-------
-----
-------
--
------ --------------------------------------
-
--
-- ----- ----- -- ------
----- -------------------- ---- ------- --------- ----- ----- ------------- ------ --------------- ------------ ------- ------------------------------------------------------------- ------- ---------------------------------------------------------------- ------- ---------------------- ------- ----- ----------------------------- ------- ------------- --------------- ------------- --------------------------- ------- -------
后续学习建议
ngrecipe 只是 AngularJS 生态系统中的众多插件之一。如果你想更深入地了解 AngularJS，这里有一些建议：
- 观看 AngularJS 的官方教程。
- 阅读 AngularJS 的官方指南。
- 加入 AngularJS 的社区论坛。
- 阅读年度 AngularJS 思想领袖Misko Hevery 的博客。
- 阅读AngularJS 代码并尝试了解其内部运行机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d849a