前言
在前端开发中，我们常常需要使用一些数据来辅助我们的业务，比如省市区的数据。但是有时候获取这些数据比较麻烦，而且还需要手动处理数据。如果有一个可以方便获取省市区数据的工具，那么会极大地方便我们的开发工作。
angular-kladr 就是这样一个可以方便获取省市区数据的 npm 包。它通过 API 获取数据，然后将数据以 JSON 格式呈现，简单易用。本篇教程将介绍如何使用 angular-kladr 来获取省市区数据，并在前端页面上进行展示。
安装
首先，我们需要使用 npm 安装 angular-kladr：
npm install angular-kladr --save
然后在代码中引入 angular-kladr：
import angularKladr from 'angular-kladr';
数据获取
angular-kladr 通过 KladrAPI 来获取省市区数据。首先，我们需要在 kladr-api.ru 上注册并获取 API key。然后，在项目中定义一个获取数据的服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
-------------
------ ----- ------------ -
------- ------ - ------------------------------
------- ------ - ---------------
------------
------- ----- ----------
- --
------------- --------------- -
----- ------ - -
---- ------------
------------ ---------
------ ---
--
------ ------------------------------------ - ------ ---
-
--------------------- -------- --------------- -
----- ------ - -
---- ------------
------------ -------
-----------
------ ---
--
------ ------------------------------------ - ------ ---
-
---------------------- -------- --------------- -
----- ------ - -
---- ------------
------------ -----------
---------
------ ---
--
------ ------------------------------------ - ------ ---
-
-使用
在代码中引入 KladrService，并使用它来获取数据：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ ---------- ------ -
-------- ------
--------------- ----
------- ------
------------- ----
---------- ------
------------------- ------------- ------------- --
---------- -
------------------
-
------------ -
--------------------------------------------- -- -
------------ - ------------
---
-
--------------------- ------- -
------------------------------------------------------ -- -
----------- - ------------
---
-
---------------------- ------- -
------------------------------------------------------- -- -
-------------- - ------------
---
-
-在 HTML 中使用相应的数据：
-- -------------------- ---- -------
-----
------ ----------------------------
------- ----------- ---------------------------- ------------------------------------------
------- ----------- ------ -- -------- -------------------------------------------
---------
------
-----
------ ------------------------
------- --------- -------------------------- -------------------------------------------
------- ----------- ---- -- ------- ---------------------------------------
---------
------
-----
------ --------------------------------
------- ------------- -------------------------------
------- ----------- -------- -- ---------- -----------------------------------------------
---------
------结语
angular-kladr 是一个非常方便的工具，可以快速获取省市区数据，并在前端页面上进行展示。本教程介绍了 angular-kladr 的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672563660cf7123b3634b