前言
在 Angular.js 开发中，我们通常会遇到一些通用的场景或需求，比如 HTTP 请求拦截、路由跳转前拦截、权限控制等等。这些场景往往需要我们重复的写一些代码，导致不仅开发效率低下，而且代码冗余度高。为了解决这个问题，社区推出了一些优秀的开源库，其中之一就是 angularjs-decorators。
angularjs-decorators 是一个为 Angular.js 应用提供优雅的装饰器语法的 npm 包。通过使用装饰器语法，我们可以更加优雅地实现一些通用的功能，同时也可以提高代码的复用性和可读性，在高质量的代码和高开发效率之间取得平衡。
安装和配置
首先，在项目中安装 angularjs-decorators：
--- ------- -------------------- ------
安装完成后，在应用程序的入口文件中注册 angularjs-decorators：
------ ------- ---- ----------
------ -----------------------
--------------------- ---
------------------ ------------------- --------------- -- -
-- ----
---现在，我们可以在组件的注入（controller、service、directive）上使用 @Inject 装饰器：
------ - ------ - ---- -----------------------
---------------- -------------- -- ----- - ---------- ------------------ ------
----- --------------- -
------------------ ------------ -
--------- - ------
---------------- - ------------
-
---------- -
-- ----
-
-@Inject 装饰器表示该类或方法的注入。在该装饰器中传入注入的服务名称，可以按需注入多个服务。这样做的好处在于，当我们修改依赖关系时，只需要改一处，在每个组件中修改依赖关系的代码量将大大减少。
其他常用的装饰器还有：
@Config：配置类装饰器@Run：启动类装饰器@Component：组件类装饰器@Directive：指令类装饰器@Service：服务类装饰器@Filter：过滤器类装饰器
它们的使用方法类似，只需要将对应的装饰器放在对应的类或方法上即可。
实战示例
下面通过实例来演示如何使用 angularjs-decorators。
处理 HTTP 请求拦截
在 Angular.js 的应用中，我们通常需要在发送 HTTP 请求前进行一些操作（如：添加 token，添加语言参数等）。
下面是一个添加 token 的示例：
------ - -------- ------ - ---- -----------------------
----------------------
---------------- --------------
----- ---------- -
------------------ ------------ -
--------- - ------
--------- - ------------
----------- - -
-------- --
--
-
---------- -
--------------------------------- - ------- -------------------------
-
-------- -
----------------
------ ------------------ -------------
-
--------- ----- -
----------------
------ ------------------- ----- -------------
-
-路由跳转前拦截
在 Angular.js 应用中，我们有时需要在用户跳转到另一个页面前进行一些处理，如：判断用户是否登录，记录用户访问的历史记录等等。下面是一个简单的跳转前拦截的示例：
------ - ------- - ---- -----------------------
-------------------------
----- ------------- -
----------------------- ------- ------------ -
-------------- - -----------
---------- - -------
---------------- - ------------
----------------------------------- ------- -------- --------- ---------- ----------- -- -
------------------------------- ---------
-- ------
---
-
-------------------------- -------- -
-- --------------------- -- ------------------------------------ -
-----------------------
---------------------- - ---------- ----------- ---
-
-
-在 checkAuthentication 方法中，我们做了以下事情：
- 判断用户是否需要登录访问该页面。
- 判断用户是否已登录。
- 如果用户未登录，则阻止页面跳转并跳转到登录页面。此处可以将跳转前记录的 URL 传给登录页面，以便登录后跳转回原始页面。
这样，我们的应用程序就具备了一个简单的权限控制。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c3481e8991b448d9d3a