AngularJS 是一款典型的前端开发框架，它提供了非常完整的应用架构模式和解决方案。它的最大特点是双向数据绑定，在数据变化时页面自动更新，使得开发人员能够快速、简单地构建单页面应用（SPA）。除此之外，AngularJS 还拥有一个非常重要的机制，那就是依赖注入（Dependency Injection）。
依赖注入机制是指在应用启动时，通过 AngularJS 框架自己的机制，将需要的服务（Service）、工厂（Factory）、控制器（Controller）等对象注入到组件中，使得组件可以直接使用。这种机制的好处是能够使组件之间的依赖和耦合度降低，同时也可以提高组件的可重用性和测试性。
廖雪峰老师讲解的注入机制的基本用法
在 AngularJS 中，强大的依赖注入机制已经成为了其最重要的特征之一。两个常用的方式分别是“构造函数注入”和“$inject 服务注入”。
构造函数注入
这种注入机制需要手动声明服务，并将其注入到控制器、指令等组件的构造函数中。这样在控制器中直接引用声明的服务即可，代码示例如下：
-- -------------------- ---- ------- ----------------------- --- --------------------- ---------- - ---------------- - ---------- - -- -- --------- -- -- --------------------------- ------------------- - -- --- --------- ------------------------ ---展开代码
$inject 服务注入
这种注入机制需要使用 $inject 服务和数组的方式来声明和注入服务。使用这种方式可以在代码混淆时保持服务名称不变，代码示例如下：
-- -------------------- ---- ------- ----------------------- --- --------------------- ---------- - ---------------- - ---------- - -- -- --------- -- -- --------------------------- ---------- ------------ ---------------- ---------- - -- --- --------- ------------------------ ----展开代码
注入机制的高级用法
除了上述基本的注入方式，AngularJS 还提供了非常灵活和高级的注入机制以及花式的注入方式。
注册 Provider
在 AngularJS 中，服务的底层实现是 Provider。如果我们需要定义一个服务，应该使用 provider 方法来创建一个 Provider 对象，并用它注册一个服务。Provider 对象有一个 $get 方法，$get 方法返回一个通过依赖注入机制来创建的服务实例。代码示例如下：
-- -------------------- ---- ------- ----------------------- --- ---------------------- ---------- - --------- - ---------- - ------ - ------------ ---------- - -- -- --------- - - -- ---展开代码
Config 和 Run Phase
在 AngularJS 应用启动时，会先执行 Config Phase，然后执行 Run Phase。可以使用 config 方法来注册 callback 函数，用于在 Config Phase 中配置一些信息或者做一些依赖注入的工作，代码示例如下：
-- -------------------- ---- ------- ----------------------- --- -------------------------------- - -------------- --------------- - ------------ ------------- ----------- ---------------- --- -- ------------------------ - -- -- --------- ---- --------- ---展开代码
Resolve 和模块化
在 SPA（单页面应用）开发中，通常需要使用路由来实现视图间的切换。如果某个视图需要在获取数据后才能正确显示，就需要使用 Resolve 机制来确保数据成功加载。在 AngularJS 中，可以使用 resolve 方法来传递数据给对应的控制器，代码示例如下：
-- -------------------- ---- ------- ----------------------- ------------ -------------------------------- - -------------- --------------- - ------------ ------------- ----------- ----------------- -------- - ------ ------------------- - ------ --------------------- - - --- -- ----------------------------- --------------- - -- --- ----- ---展开代码
以上便是 AngularJS 注入机制的详细介绍，希望能够对大家有所帮助。在日常开发中，熟练使用 AngularJS 的依赖注入机制会为我们提供非常强大的工具和思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2c94b314edc2684c51cd8
