Angular 6:使用 Angular Material 构建现代 Web 应用程序

阅读时长 8 分钟读完

Angular 在前端开发中已经成为了非常流行的框架。随着应用程序功能的增加,界面的设计变得越来越复杂。如何提高 web 应用程序的开发效率,让我们更好的完成开发任务?这里推荐使用 Angular Material 来构建现代 Web 应用程序。

Angular Material

Angular Material 是一个 UI 组件库,由 Google 公司开发。 它基于 Material Design,提供了很多类似于按钮、表单、对话框、菜单等基本组件,也提供了一些先进的组件,如 SnackBar、Stepper、Chips、Tooltip、Divider 和 Paginator 等等。

Angular Material 使用基于组件和样式的开发方式,样式和颜色已经在库中预定义好,只需要将组件添加到你的应用中就可以了。这种方式非常方便你可以使用高质量的组件。除此之外,Angular Material 还提供了现代化的特性,例如 Angular CDK,允许构建强大的定制化效果。

安装 Angular Material

安装 Angular Material 非常简单。下面的代码可以用于安装 Angular Material:

在应用程序模块中引入需要的模块:

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ----------- - ---- -----------------
------ - ------------------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------
------ - ---------------- - ---- -----------------------

-----------
  ------------- ---------------
  -------- -
    --------------
    ------------------------
    ------------
    --------------------
    -----------------
    -----------------
    -----------------
  --
  ---------- ---
  ---------- ---------------
--
------ ----- --------- - -

这里我们引入了 MyMaterialModule,它包含了所有的组件。

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------------
------ - ------------------ - ---- -------------------------------
------ - -------------- - ---- --------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ----------------- - ---- -----------------------------
------ - ----------------- - ---- ------------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - ---------------- - ---- ----------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- ------------------------------
------ - ------------- - ---- -------------------------

-----------
  ------------- ---
  -------- -
    -------------
    ----------------
    -------------------
    ---------------
    --------------
    --------------
    ------------------
    ------------------
    --------------
    -----------------
    -----------------
    --------------
    --------------
    -----------------
    ---------------
    -------------------
    --------------
  --
  -------- -
    ----------------
    -------------------
    ---------------
    --------------
    --------------
    ------------------
    ------------------
    --------------
    -----------------
    -----------------
    --------------
    --------------
    -----------------
    ---------------
    -------------------
    --------------
  --
--
------ ----- ---------------- --

这样我们就可以在其他组件中使用这些组件了。

示例

下面是一个示例:

-- -------------------- ---- -------
------ - --------- - ---- ----------------

------------
  --------- -----------
  --------- -
    ----------
      ----------------
        ------ -------- ----------------- -------- ---------------------- --
      -----------------
      ----------------
        ------ -------- ---------------- -------- ---------------------- --
      -----------------
      ------- ----------------- --------------- -----------------------------
    -----------
  --
--
------ ----- -------------- -
  -------- - ---
  -------- - ---

  ------- -
    ---------------- ---------------- -------------------
  -
-

这里我们引入了 MatCard、MatFormField 和 MatButton 等组件。这样就可以很容易地创建了一个登录表单,使我们的应用更加现代化。

总结

通过 Angular Material,我们可以使用很多基本的和高级组件,有效提高 Web 应用程序的开发效率。这种方式对于那些想要快速开发、美化应用程序的开发人员来说是非常有用的。通过使用这些指南,你可以更快地熟悉 Angular Material,更好地创建出现代化的 Web 应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6491951748841e9894f9f3fb

纠错
反馈