什么是 ant-ng
ant-ng 是一款基于 AngularJS 的 UI 组件库，它提供了很多常用的 UI 组件，比如按钮、表格、弹窗等，可以方便快捷地构建一个 Web 应用程序的前端。
如何使用 ant-ng
使用 ant-ng 需要先安装它，可以通过 npm 安装：
npm install ant-ng --save
安装成功后，在应用程序中引入 ant-ng：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -----------
----- ---------------- -----------------------------------------------
-------
------
---- ---------------
---------- -----------
------
------- ---------------------------------------------------
------- ------------------------------------------------------
--------
----------------------- ------------
---------
-------
-------接下来就可以在应用程序中使用 ant-ng 提供的组件，比如一个按钮：
<button ant-btn ant-btn-success>Hello, World!</button>
演示效果：https://codepen.io/anon/pen/BgQZXa
ant-ng 提供的组件
ant-ng 提供了很多常用的 UI 组件，可以极大地减少前端开发的时间和难度。这里列举一些常用的组件并提供示例代码。
按钮组件
ant-btn：普通按钮
<button ant-btn>Hello, World!</button>
ant-btn-success：成功按钮
<button ant-btn ant-btn-success>Hello, World!</button>
ant-btn-warning：警告按钮
<button ant-btn ant-btn-warning>Hello, World!</button>
ant-btn-danger：危险按钮
<button ant-btn ant-btn-danger>Hello, World!</button>
表格组件
ant-table：基本表格
-- -------------------- ---- -------
------ ----------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------ant-table-bordered：带边框的表格
-- -------------------- ---- -------
------ --------- -------------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------ant-table-striped：带斑马线的表格
-- -------------------- ---- -------
------ --------- ------------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------表单组件
ant-input：文本框
<input ant-input type="text">
ant-input-number：数字输入框
<input ant-input-number type="number">
ant-checkbox：复选框
<label ant-checkbox><input type="checkbox"> 同意条款</label>
弹窗组件
ant-modal：基本弹窗
-- -------------------- ---- -------
------- ------- --------------- ------------------- - -------------------
---------- ---------------------
-----------
---------
---- ------------------
------- ------- --------------- ------------------- - ------------------
------- ------- --------------- ------------------- - ------------------
------
------------演示效果：https://codepen.io/anon/pen/ZVYRMp
结语
ant-ng 是一个非常棒的 AngularJS UI 组件库，它提供了很多常用的组件以及丰富的样式风格，并且使用也非常方便高效。如果你是一个前端开发者，强烈建议你尝试使用 ant-ng 来提升你的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600569a581e8991b448e4e28