-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathangularjszhong-de-dong-tai-qie-huan-fu-wu.html
174 lines (158 loc) · 10.3 KB
/
angularjszhong-de-dong-tai-qie-huan-fu-wu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="./angularjszhong-de-dong-tai-qie-huan-fu-wu.html" />
<title> 愚钝的故事 — Angularjs中的动态切换服务
</title>
<link rel="stylesheet" href="./theme/css/style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name="author" content="Jet Geng">
<meta name="description" content="需求 近期在用Angularjs做点小东西。在使用的过程中遇到如下的需求。 我想把运行环境分成开发（dev），测试(test), 线上(prod)这三个环境。在这三个不同的环境中有一些配置行为是不一样的。比如获取数据的地址了，登陆的方法等等。 解题思路 由于有点Spring的使用经验，第一反应就是想动态替换Service。 一般情况下在controller中注入服务，采用如下形式。 angular.moule('someMoule',[]) .controller('someController',function (someService){ someService.doSomething(); } 如何动态的换掉someService呢？经过一番折腾以后，没有找到了合适的方法。 所以穷极生变以后想到采用代理的方式解决这个问题。 于是有了下面的解决方法。 解法 最终的解法是采用代理的方式。具体的结构如下： angular.moule('serviceMoule',[]) .factory('someService',function (devSomeService,betaSomeService, prodSomeService){ if(env === "dev"){ return devSomeService; } if ...">
<meta name="tags" contents="AngularJs, ">
</head>
<body>
<header class="header">
<div class="container">
<div class="header-inner">
<h1 class="header-name">
<a class="nodec" href="/">愚钝的故事</a>
</h1>
<h3 class="header-text">Jet Geng的工作和生活</h3>
<ul class="header-menu list-inline">
<li><a class="nodec icon-github" href="https://github.com/jetgeng"></a></li>
</ul>
</div>
</div>
</header> <!-- /.header --> <div class="container">
<div class="post full-post">
<h1 class="post-title">
<a href="/angularjszhong-de-dong-tai-qie-huan-fu-wu.html" title="Permalink to Angularjs中的动态切换服务">Angularjs中的动态切换服务</a>
</h1>
<ul class="list-inline">
<li class="post-date">
<a class="text-muted" href="/angularjszhong-de-dong-tai-qie-huan-fu-wu.html" title="2015-03-28T17:39:00+08:00">Sat 28 March 2015</a>
</li>
<li class="muted">·</li>
<li class="post-category">
<a href="./category/qian-duan.html">前端</a>
</li>
<li class="muted">·</li>
<li>
<a href="/tag/AngularJs.html">AngularJs</a> </li>
<li class="muted">·</li>
<li>
<address class="post-author">
By <a href="./author/jet-geng.html">Jet Geng</a>
</address>
</li>
</ul>
<div class="post-content">
<div class="section" id="id1">
<h2>需求</h2>
<p>近期在用Angularjs做点小东西。在使用的过程中遇到如下的需求。
我想把运行环境分成开发（dev），测试(test), 线上(prod)这三个环境。在这三个不同的环境中有一些配置行为是不一样的。比如获取数据的地址了，登陆的方法等等。</p>
</div>
<div class="section" id="id2">
<h2>解题思路</h2>
<p>由于有点Spring的使用经验，第一反应就是想动态替换Service。</p>
<p>一般情况下在controller中注入服务，采用如下形式。</p>
<div class="highlight"><pre><span></span><span class="nx">angular</span><span class="p">.</span><span class="nx">moule</span><span class="p">(</span><span class="s1">'someMoule'</span><span class="p">,[])</span>
<span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s1">'someController'</span><span class="p">,</span><span class="kd">function</span> <span class="p">(</span><span class="nx">someService</span><span class="p">){</span>
<span class="nx">someService</span><span class="p">.</span><span class="nx">doSomething</span><span class="p">();</span>
<span class="p">}</span>
</pre></div>
<p>如何动态的换掉someService呢？经过一番折腾以后，没有找到了合适的方法。</p>
<p>所以穷极生变以后想到采用代理的方式解决这个问题。
于是有了下面的解决方法。</p>
</div>
<div class="section" id="id3">
<h2>解法</h2>
<p>最终的解法是采用代理的方式。具体的结构如下：</p>
<div class="highlight"><pre><span></span><span class="nx">angular</span><span class="p">.</span><span class="nx">moule</span><span class="p">(</span><span class="s1">'serviceMoule'</span><span class="p">,[])</span>
<span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'someService'</span><span class="p">,</span><span class="kd">function</span> <span class="p">(</span><span class="nx">devSomeService</span><span class="p">,</span><span class="nx">betaSomeService</span><span class="p">,</span> <span class="nx">prodSomeService</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">env</span> <span class="o">===</span> <span class="s2">"dev"</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">devSomeService</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">env</span> <span class="o">===</span> <span class="s2">"beta"</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">betaSomeService</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">env</span> <span class="o">===</span> <span class="s2">"prod"</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">prodSomeService</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'devSomeService'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">" i am in dev env"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">doSomething</span><span class="o">:</span> <span class="nx">doSomething</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'betaSomeService'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">" i am in dev env"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">doSomething</span><span class="o">:</span> <span class="nx">doSomething</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">factory</span><span class="p">(</span><span class="s1">'prodSomeService'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">" i am in dev env"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">doSomething</span><span class="o">:</span> <span class="nx">doSomething</span>
<span class="p">}</span>
<span class="p">})</span>
</pre></div>
<p>这样使用的时候直接注入someService 这个服务。最终这个服务将会根据不同的开关来代理devSomeService, betaSomeService, prodSomeService 其中的一个。</p>
<p>这个方法有点土，不过可以工作。如果你有什么更好的办法，欢迎指教！ 谢谢！</p>
</div>
</div>
</div>
<hr class="separator">
<div class="col-md-8 col-md-offset-2">
<div id="disqus_thread">
<script>
var disqus_shortname = 'techfoolishstory';
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view the
<a href="https://disqus.com/?ref_noscript=techfoolishstory">
comments powered by Disqus.
</a>
</noscript>
<a href="https://disqus.com" class="dsq-brlink">
blog comments powered by <span class="logo-disqus">Disqus</span>
</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-center">
Jet Geng, <a href="" target="_blank">版权归Jet Geng所有，转载请注明！</a> unless otherwise noted.
</p>
<div class="text-center">
Generated by <a href="http://getpelican.com" target="_blank">Pelican</a> with the <a href="http://github.com/nairobilug/pelican-alchemy">alchemy</a> theme.
</div>
</div>
</footer> <!-- /.footer -->
<script src="./theme/js/jquery.min.js"></script>
<script src="./theme/js/bootstrap.min.js"></script>
</body> <!-- 42 -->
</html>