简介
ng-revealjs 是一个基于 AngularJS 和 Reveal.js 的 npm 包，它为 AngularJS 程序员提供了创建漂亮幻灯片的快捷方式。ng-revealjs 使用简便，只需要在项目中引入它，然后像普通 AngularJS 指令一样来使用，即可快速制作出漂亮的幻灯片展示。
使用 ng-revealjs 可以为你的项目添加漂亮、互动和响应式的幻灯片展示，其同时也支持简单的动画和音频，能够使你的演示更为生动有趣。
安装
在使用 ng-revealjs 之前，你需要先添加它到你的项目中。你可以使用 npm 安装 ng-revealjs：
npm install --save ng-revealjs
然后在你的 AngularJS 应用中添加以下代码，来引入 ng-revealjs：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------------------------------------------------------------- --
----- ---------------- ------------------------------------------------------------------------------------- --
------- ---------------------------------------------------------------------------------------
------- ------------------------------------------------------------------
-------
----- ---------------
---- ------ ---
------- ---------------------------
-------
-------使用
ng-revealjs 属性
ng-revealjs 定义了一个指令，你只需要在你的 HTML 中添加该指令即可生成漂亮的幻灯片。你可以在该指令中添加以下属性：
active-slide：定义当前激活的幻灯片。auto-slide：定义是否自动播放幻灯片。auto-slide-time：定义幻灯片自动播放的时间间隔。slide-change：定义幻灯片发生变化时的回调函数。
ng-revealjs 指令
使用 ng-revealjs 指令非常简单，只需要在你的项目模板中添加如下代码即可：
-- -------------------- ---- -------
-------------
---------
--------- ------
--------- ----------
----------
---------
--------- ------
------------------
----------
--------------在生成的 HTML 中，每个 <section> 标签都代表一个幻灯片。在这两个 <section> 标签中，我们定义了两个幻灯片，然后将它们嵌套在 <ng-revealjs> 标签内即可。
示例代码
以下是一个简单的演示，其中包含了一个包含三个幻灯片的 slide：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ---------------- --
------------------ ----------
----- ---------------- ---------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------------------------
------- ------------------------------------------------------------------
------- ---------------------------
-------
----- -----------------------
-------------
---------
--------- ------
--------- ----------
----------
---------
--------- ------
------- ----- --- -- ----------
---- ------------------ --
----------
-------- --------------- -- -------
-----------------------
---------------------------
----------
--------------
-------
-------你也可以在 ng-repeat 中使用 ng-revealjs 指令，生成多个幻灯片。
总结
ng-revealjs 能够为你的项目添加漂亮、互动和响应式的幻灯片展示，同时支持简单的动画和音频，可以使你的演示更为生动有趣。使用 ng-revealjs 相对简单，只需要在你的项目中引入它，然后在模板中使用即可。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557e381e8991b448d4f1e