npm 包 @types/angular-ui-router 使用教程

前言

对于从事前端开发的同学来说，使用 NPM 包已经成为家常便饭。而 @types/angular-ui-router 这个包，则是 Angular UI Router 相关的 TypeScript 类型定义文件。本篇文章将为大家详细介绍如何使用这个包，并给出一些示例代码供大家参考。

安装

在项目目录下，使用以下命令进行安装：

npm install @types/angular-ui-router

安装完成后，我们需要在 tsconfig.json 文件中添加这个包的引用。如果项目中已有 typings 属性，则直接添加即可：

-- -------------------- ---- -------
-
  ---------------- ------
  ------------------ -
    ---------- -----
    --------- -----------------
    ------------ -----
    -------------- ------
    --------- ---------
    ------------------- -------
    ------------------------ -----
    ------------------------- -----
    --------- ------
    ------------ -
      ---------------------
    --
    ------ -
      ---------
      -----
    --
    -------- -
      ----------
      ------------------
      -------------------
      -------------------
      --------------------
      --------------------------
    -
  --
  ---------- -
    --------------
  -
-
展开代码

使用

定义模块

首先，我们需要在模块中引用 ui.router，并将其作为依赖注入：

import * as angular from 'angular';
import 'angular-ui-router';

export const myApp = angular.module('myApp', [
  'ui.router'
]);

定义路由

接下来，我们可以在模块中定义路由。例如，我们定义了两个状态：home 和 about。

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

  -- -- ------ -----
  --------------
    -------------- -
      ---- --------
      --------- ------------ -- --- ---- ----------
    --
    --------------- -
      ---- ---------
      --------- ---------- --------
    ---
-
展开代码

启用路由

在应用的入口文件中，我们需要启用路由。这里以 app.ts 为例：

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

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

-- ----
---------------------- --------------------- ------- -------------------- -- -
  -- --------- ------ - ----------------- --
  ----------------------------------- ------- -------- --------- ---------- ----------- -- -
    ------------------ ------ ---------
  ---
---
展开代码

在模板中使用

在页面模板中，我们可以使用 ui-sref 指令来进行链接。例如：

<ol>
  <li><a ui-sref="home">Home</a></li>
  <li><a ui-sref="about">About Us</a></li>
</ol>

<!-- ui-view 指令将显示当前状态对应之模板 -->
<div ui-view></div>

小结

通过本文的介绍，大家应该能够掌握如何使用 @types/angular-ui-router 包，并在项目中实现基本的路由功能。祝大家前端开发愉快！

参考

• Angular UI-Router

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc15ab5cbfe1ea0611d8c