-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy path1040-js-6.html
381 lines (314 loc) · 18.3 KB
/
1040-js-6.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style>
.reveal pre code {
background-color: #120;
}
</style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
</map>
<div class="reveal">
<div class="slides">
<section class="past" style="top: 178.5px; display: none;" hidden="" aria-hidden="true">
<h2>【JS-6】</h2>
<h3>如何使用ui-router？</h3>
<p>分享人：吴昊杰</p>
</section>
<section class="past" style="top: 3px; display: none;" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>一.背景介绍</h3>
</section>
<section class="past" style="top: 43px; display: none;" hidden="" aria-hidden="true">
<p>angular路由</p>
<p style="text-align:left">路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。</p>
<p style="text-align:left">那么，对于angular而言，它自然也有内置的路由模块：叫做ngRoute。</p>
<p style="text-align:left">不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！</p>
<p style="text-align:left">于是，一个基于ngRoute开发的第三方路由模块，叫做ui.router，受到了大家的“追捧”。 ngRoute vs ui.router</p>
</section>
<section class="past" style="top: 0px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以模块依赖的形式被引入，简而言之就是：在引入路由源文件之后，你的代码应该这样写(以ui.router为例)：</p>
<pre> <code class="hljs elixir">
angular.<span class="hljs-keyword">module</span>(<span class="hljs-string">"myApp"</span>, [<span class="hljs-string">"ui.router"</span>]); <span class="hljs-regexp">//</span> myApp为自定义模块，依赖第三方路由模块ui.router
</code>
</pre>
<p style="text-align:left">这样做的目的是：在程序启动(Angular)的时候，加载依赖模块(如：ui.router)，将所有挂载在该模块的服务(provider)，指令(directive)，过滤器(filter)等都进行注册，那么在后面的程序中便可以调用了。</p>
<p style="text-align:left">说到这里，就得看看ngRoute模块和ui.router模块各自都提供了哪些服务，哪些指令？
</p>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>二.知识剖析</h3>
</section>
<section class="past" style="top: 33.5px; display: none;" hidden="" aria-hidden="true">
<pre> <code class="hljs xquery">
ngRoute
$routeProvider(服务提供者) ——— 对应于下面的urlRouterProvider和stateProvider
$route(服务) ——— 对应于下面的urlRouter和state
$routeParams(服务) ——— 对应于下面的stateParams
ng-view(指令) ——— 对应于下面的ui-view
ui.router
$urlRouterProvider(服务提供者) ——— 用来配置路由重定向
$urlRouter(服务)
$stateProvider(服务提供者) ——— 用来配置路由
$state(服务) ——— 用来显示当前路由状态信息，以及一些路由方法（如：跳转）
$stateParams(服务) ——— 用来存储路由匹配时的参数
ui-view(指令) ——— 路由模板渲染，对应的dom相关联
ui-sref(指令)
</code>
</pre>
<p style="text-align:left">(注：服务提供者：用来提供服务实例和配置服务。)</p>
</section>
<section class="past" style="top: 66px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">这样一看，其实ui.router和ngRoute大体的设计思路，对应的模块划分都是一致的(毕竟是同一个团队开发)，不同的地方在于功能点的实现和增强。</p>
<p style="text-align:left">那么问题来了：ngRoute弱在哪些方面，ui.router怎么弥补了这些方面?
</p>
<p style="text-align:left">这里，列举两个最重要的方面来说(其他细节，后面再说)：</p>
<p style="text-align:left">多视图</p>
<p style="text-align:left">嵌套视图</p>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>三.常见问题</h3>
</section>
<section class="past" style="top: 122px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">多视图</p>
<p style="text-align:left">多视图：页面可以显示多个动态变化的不同区块。</p>
<p style="text-align:left">这样的业务场景是有的：</p>
<p style="text-align:left">比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。</p>
</section>
<section class="past" style="top: 79.5px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">首先，我们尝试着用ngRoute来做：</p>
<pre> <code class="hljs xquery">
html
<div ng-view=<span class="hljs-string">""</span>>区块<span class="hljs-number">1</span></div>
<div ng-view=<span class="hljs-string">""</span>>区块<span class="hljs-number">2</span></div>
js
$routeProvider
.<span class="hljs-keyword">when</span>(<span class="hljs-string">'/'</span>, {
template: <span class="hljs-string">'hello world'</span>
});
</code>
</pre>
</section>
<section class="past" style="top: 155px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">我们在html中利用ng-view指令定义了两个区块，于是两个div中显示了相同的内容，这很合乎情理，但却不是我们想要的，但是又不能为力，因为，在ngRoute中：</p>
<p style="text-align:left">视图没有名字进行唯一标志，所以它们被同等的处理。</p>
<p style="text-align:left">路由配置只有一个模板，无法配置多个。</p>
</section>
<section class="past" style="top: 29px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">ok，针对上述两个问题，我们尝试用ui.router来做：</p>
<pre> <code class="hljs xquery">
html
<div ui-view=<span class="hljs-string">""</span>></div>
<div ui-view=<span class="hljs-string">"status"</span>></div>
js
$stateProvider
.state(<span class="hljs-string">'home'</span>, {
url: <span class="hljs-string">'/'</span>,
views: {
<span class="hljs-string">''</span>: {
template: <span class="hljs-string">'hello world'</span>
},
<span class="hljs-string">'status'</span>: {
template: <span class="hljs-string">'home page'</span>
}
}
});
</code>
</pre>
</section>
<section class="past" style="top: 155px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">这次，结果是我们想要的，两个区块，分别显示了不同的内容，原因在于，在ui.router中：</p>
<p style="text-align:left">可以给视图命名，如：ui-view=”status”。</p>
<p style="text-align:left">可以在路由配置中根据视图名字(如：status)，配置不同的模板（其实还有controller等）。</p>
</section>
<section class="past" style="top: 99px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">嵌套视图</p>
<p style="text-align:left">嵌套视图：页面某个动态变化区块中，嵌套着另一个可以动态变化的区块。</p>
<p style="text-align:left">这样的业务场景也是有的：</p>
<p style="text-align:left">比如：页面一个主区块显示主内容，主内容中的部分内容要求根据路由变化而变化，这时就需要另一个动态变化的区块嵌套在主区块中。</p>
</section>
<section class="past" style="top: 68px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">其实，嵌套视图，在html中的最终表现就像这样：</p>
<pre> <code class="hljs xquery">
<div ng-view=<span class="hljs-string">""</span>>
I am parent
<div ng-view=<span class="hljs-string">""</span>>I am child</div>
</div>
转成javascript，我们会在程序里这样写：
$routeProvider
.<span class="hljs-keyword">when</span>(<span class="hljs-string">'/'</span>, {
template: <span class="hljs-string">'I am parent <div ng-view="">I am child</div>'</span>
});
</code>
</pre>
</section>
<section class="past" style="top: 155px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left">倘若，你真的用ngRoute这样写，你会发现浏览器崩溃了，因为在ng-view指令link的过程中，代码会无限递归下去。</p>
<p style="text-align:left">那么造成这种现象的最根本原因：路由没有明确的父子层级关系！</p>
<p style="text-align:left">看看ui.router是如何解决这一问题的？</p>
<!--<pre>-->
<!--<code>-->
<!--$stateProvider-->
<!--.state('parent', {-->
<!--abstract: true,-->
<!--url: '/',-->
<!--template: 'I am parent <div ui-view></div>'-->
<!--})-->
<!--.state('parent.child', {-->
<!--url: '',-->
<!--template: 'I am child'-->
<!--}); -->
<!--</code>-->
<!--</pre>-->
</section>
<section class="past" style="top: 188px; display: none;" hidden="" aria-hidden="true">
<p style="text-align:left"> 巧妙地，通过parent与parent.child来确定路由的父子关系，从而解决无限递归问题。</p>
<p style="text-align:left">另外子路由的模板最终也将被插入到父路由模板的div[ui-view]中去，从而达到视图嵌套的效果。</p>
<!--<p style="text-align:left">记住下面是ui.router用到的所有指令</p>-->
<!--<pre>-->
<!--<code>-->
<!--ui.router-->
<!--$urlRouterProvider(服务提供者) ——— 用来配置路由重定向-->
<!--$urlRouter(服务)-->
<!--$stateProvider(服务提供者) ——— 用来配置路由-->
<!--$state(服务) ——— 用来显示当前路由状态信息，以及一些路由方法（如：跳转）-->
<!--$stateParams(服务) ——— 用来存储路由匹配时的参数-->
<!--ui-view(指令) ——— 路由模板渲染，对应的dom相关联-->
<!--ui-sref(指令) -->
<!--</code>-->
<!--</pre>-->
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>四.解决方案</h3>
</section>
<section class="past" style="top: 62px; display: none;" hidden="" aria-hidden="true">
<pre> <code class="hljs livecodeserver">
参数：
name：状态的名称。
stateConfig：状态配置对象。配置具有以下各项属性（全部属性，看一下好了）：
template： <span class="hljs-keyword">string</span>/<span class="hljs-function"><span class="hljs-keyword">function</span>，<span class="hljs-title">html</span>模板字符串，或者一个返回<span class="hljs-title">html</span>模板字符串的函数。</span>
templateUrl：<span class="hljs-keyword">string</span>/<span class="hljs-function"><span class="hljs-keyword">function</span>，模板路径的字符串，或者返回模板路径字符串的函数。</span>
templateProvider：<span class="hljs-function"><span class="hljs-keyword">function</span>，返回<span class="hljs-title">html</span>模板字符串或模板路径的服务。</span>
controller：<span class="hljs-keyword">string</span>/<span class="hljs-function"><span class="hljs-keyword">function</span>，新注册一个控制器函数或者一个已注册的控制器的名称字符串。</span>
controllerProvider：<span class="hljs-function"><span class="hljs-keyword">function</span>，返回控制器或者控制器名称的服务</span>
controllerAs：<span class="hljs-keyword">string</span>，控制器别名。
parent：<span class="hljs-keyword">string</span>/object，手动指定该状态的父级。
<span class="hljs-built_in">resolve</span>：object，将会被注入controller去执行的函数，<span class="hljs-keyword">string</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>>形式。</span>
url：<span class="hljs-keyword">string</span>，当前状态的对应url。
views：object，视图展示的配置。<span class="hljs-keyword">string</span>,object>形式。
abstract：boolean，一个永远不会被激活的抽象的状态，但可以给其子级提供特性的继承。默认是<span class="hljs-literal">true</span>。
onEnter：<span class="hljs-function"><span class="hljs-keyword">function</span>，当进入一个状态后的回调函数。</span>
onExit：<span class="hljs-function"><span class="hljs-keyword">function</span>，当退出一个状态后的回调函数。</span>
reloadOnSearch：boolean，如果为<span class="hljs-literal">false</span>，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为<span class="hljs-literal">true</span>。
data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
<span class="hljs-built_in">params</span>：url里的参数值，通过它可以实现页面间的参数传递。
</code>
</pre>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>五.代码实战</h3>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>六.拓展思考</h3>
</section>
<section class="past" style="top: 267px; display: none;" hidden="" aria-hidden="true">
<h3>七.参考文献</h3>
</section>
<section class="past" style="top: 168px; display: none;" hidden="" aria-hidden="true">
<p>
<a href="http://www.html-js.com/article/Front-end-source-code-analysis-original-uirouter-source-code-analysis">
ui.router源码解析</a>
</p>
<p>
<a href="http://www.open-open.com/lib/view/open1416878937309.html">AngularJS ui-router (嵌套路由)</a>
</p>
<p>
<a href="http://www.cnblogs.com/liulangmao/p/4155015.html">angular的uiRouter服务学习</a>
</p>
<p>
<a href="http://blog.csdn.net/qian_xiaona/article/details/50888212"> $stateParams服务 </a>
</p>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>八.更多讨论</h3>
</section>
<section class="past" style="top: 234px; display: block;" hidden="" aria-hidden="true">
<h3>关于ui-router的使用大家还要什么技巧可以分享下</h3>
</section>
<section class="present" style="top: 212.5px; display: block;">
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>鸣谢 : 王栋</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: false,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{
src: './plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>