Angular哪一版不再加jS了

为什么外部前端安哥拉框架很少用？一，安哥拉 gs 出来的时候，国内使用量还是非常的多，但是安哥拉二相对安哥拉 gx 就像一个新的框架，早期很多用户好不容易从杰克的时代过渡到安哥拉 gs， 结果安哥拉二用法大变，没有照顾安哥拉 gs 的用户， 导致很大一部分用户转向了当时借鉴安哥拉 g s 的 view， 因为 view 是国人，开发文档更加完善。二，安哥拉二刚出来的时候只支持 type script， 这样又加大了初学者的入门门槛，像 view 和 react 都是支持 g s， 也支持 t s， 所以又一部分初学者被吓跑了。 三，在安哥拉二出来的时候， react 的势头非常强劲，宣传也非常好，并且工资待遇在北京一六年的时候， react 都到二十五 k 到三十 k， 所以当时出现的情况就是入门的都学无用了，为了高工资的都学 react 去了。关注安仔，每天了解一点程序员知识。

答案来喽，退出历史舞台的正是大名鼎鼎的 angular js， 在我的教学 ppt 里，无数次的出现三大前端框架中的红色大 a 的 angular js。 其实在二零一八年的六月初， angulargs 就宣布开始进入了为期三年的 long term support 长期维护模式， 就说还会修复 bug， 但是呢，不再出新版本了。按照这个时间啊，应该是在二零二一年的六月初就正式结束维护了，但是考虑到疫情的问题呢，又延长了半年，所以到了二零二一年的最后一天，安格拉 gs 正式宣布了生命周期的终止状态。 但其实宣布生命终止的是 angular js 的一系列版本， angular 团队建议现有的用户迁移到基于 type script 的 angular 的框架。 angular js angular 差别 很大，官网地址都不一样， angela 后来呢，一直在更新，我上网看了一下啊，竟然都已经更新到了 angela 十三的版本的。我对 angela js 的退出啊，颇有感慨，一是因为这是我们公司成立当初主要拿来干活的框架，当初啊，一起暴干奋战的场景是历历在目。 二是呢，他的寿终正寝也再次验证了我的观点。大家不要只去钻研框架，框架说白了就是一个很牛的人给你了一个模板，你只要按照模板做就行。 你如果只会用模板，那当这个模板过时了之后，你就跟着完蛋了。框架是潮起潮落， u 点 j s react j s 那也会退去的呀。真正需要投资时间学习的是贾拉斯贵的语言本身的基本功，这个基本能力提升了至少十年是不会过时。 是的， es 六 type script 这些都是你值得投资学习的范畴。朱老板在做课程的时候早就考虑了这些， 因为我也希望辛辛苦苦做出来的课程可以卖很长的时间，所以第一门推出的课程就是领悟 es 六精华课。课程我已经放在小黄车里了，赶快点开看看吧！

接下来我要讲解的内容呀，是 r x j s。 什么是 r x j s 呢？它呀就是一个用于处理 e 部编程的 javascript 酷，它的目标呢是使编写 e 部和基于毁掉的代码更容易。 当我们看完这句话以后呀，实际上我们很容易就能够联想到 pro miss， 因为 pro mis 他也是做这个事情的。 pro mis 能够做的事情呢， r x j s 呀，他也可以做到，甚至呢，他可以做的更多，因为 r x j s 他提供了很多 pro mis 啊，都没有提供的功能。 接下来的问题是，我们为什么要学习 r x g s 呢？当前我们的课程不是 angle 了吗？是这样的啊，就像 angle 深度集成了 type scrap 的一样啊，在 angle 的这个框架当中，它也深度集成了 r x g s。 也就是说 rxgs 呢，在安格拉这个框架当中，它的地位是非常重要的，要想学好这个安格拉呢，就必须要去掌握 rxgs。 在安个的这个框架当中，其实我们随处都可以去使用它，比如说在服务当中呀，在表单当中呀，在事件当中，在全局状态管理以及异步请求当中等等啊，我们都可以去使用 rxgs。 好，既然说 r x j s。 这么重要哈，那么接下来呢，我们就来一个快速入门。在写这个代码之前呢，我们要先来了解 r x j s 当中的几个概念。第一个我们要了解的概念呢是 abaserable， 这个 abaserable 呀，就是可观察对象，那么可观察对象是什么呢？你可以把它想象成是那个 promise 对象。 在 promise 对象内部，我们要做什么呀？是不是可以去执行一些 e 不操作，当执行完 e 不操作之后，我们是不是通过调用 reserve 或者 reject 的这两个方法，把这个数据传递到 promise 对象的外部呀？好，那么实际上 absorbe 这个对象他做的事情也是类似的啊，在 absorbe 这个对象的内部，我们也可以去执行 e'd。 当翼步代码执行完成之后呢， aba zerb 的内部，他也提供了一些方法，让我们把这个翼步代码执行的结果传递到可观察对象的外部。 好，这是我们了解的第一个概念， abatherable， 在 abatherable 对象内部可以去执行一部代码，当一部代码有结果了，我们通过调用他内部给我们提供的方法，让我们把这个结果传递到可观察对象外部。 接下来我们去了解第二个概念，第二个概念呢，叫做 abazarer， 就是观察者，这个观察者呢，我们可以把它想象成是 promise 当中邓方法当中的那个回调函数。我们先来回忆一下啊，邓方法当中的那个回调函数用来干什么的？ 是不是用来接收 promise 对象内部他发出来的这个数据啊？好，那么实际上啊，不是，这个观察者他也是做这个事情的，他呢是用来接收可观察对象内部传递到外部的那个数据。好， 这是观察者 observer 用来接收可观察对象内部啊传递出来的数据。第三个我们要了解的这个概念呢，叫做订阅，就是 subscribe， 这个 subscribe 呀，我们可以把它类比成邓方法。 那么在 pro miss 当中，邓方法是干嘛的呀？是不是将 pro miss 对象和这个接收数据的那个方法给他连接起来呀，好，这个 sub scrap 他所做的事情也是这个，我们通过订阅呢，将可观察对象和观察者连接起来，就是说把发数据的那个人和接收数据的那个人连接起来， 当这个可观察对象发出数据时啊，那么这个观察者呢，就可以接收到数据了。好，那么我们来看这样一张图哈，左侧呢是 abatherbo， 是可观察对象，那么在他的内部啊，可以发出一些数据。 接下来是 abazzarva， 这个 abazzara 呢，是接收数据的默认情况下啊，他们两个呢是独立的。接下来呢，我们可以去调用 sopscrap 这个方法，让 abazzarable 和 abazzara 给他连接起来，当这个 abizarb 内部他发出数据的时候，我们可以通过调用这个 next 方法啊，把这个数据传递给 abizarb。 好，那么接下来呢，我们来开一段代码，我们要创建 obe zero 不对象，那首先我们是不是要引入这个 above the robot 对象呀？好，那么这一点跟 promise 不一样哈，我们说 r x g s 呢，它是一个酷，我们要使用它呢，我们必须要引入这个酷，那么 promise 它是一个语言标准，我们在使用的时候是不需要引入的哈，那么接下来呢，我们从 r x g s 当中去引入 ab zero b 这个对象， 然后呀，我们通过 new 关键字来执行 abazzo 这样的一个构造函数，那么在执行这个构造函数之后呢，他会返回一个 abazoo 对象。 在执行 obe zero 这个构造函数的时候呀，我们要传第一个函数，那么其实在 promiss 当中是不是也这么写啊？那么在这个函数内部呢，我们就可以去执行衣服操作了，比如说在这个地方我们开启了一个延时定时器啊，在两秒钟之后我们去模拟有数据回来了， 这个时候我们是不是应该把数据传到外面去啊？那么咱们再传给这个 observer 对象那个函数的时候呀，这个函数有一个参数啊，叫做 observer， 那么在这个参数的下面呢，有一个方法叫做 next， 我们调用 abserver 点 next 方法，那这个时候呢，我们就可以把这个数据传递出去了，这个 next 方法是不是就相当于 promise 里面的那个 reserve 呀？好， 那么这是创建 abazzova 对象，那接下来呢，我们要创建这个观察者，观察者呢，他用来接收这个可观察对象当中发出的这个数据，那么我们在这使用 cos 的关键字啊，去创建一个 abazzo 这样的一个常量，他的值呢是一个对象，在这个对象当中有一个 next 属性，他是一个方法， 那么这个方法呢，就是用来接收这个地方传递出来的数据的啊，当我们在这调用 next 方法的时候，实际上调用的就是这个方法，我们在调用 nixt 方法的时候，是不是传递了个对象，内蒙为张三，那那么在这有一个 y 六，那实际上接收的就是这个数据。好，那么现在我们的这个可观 观察对象，观察者都已经有了，那接下来我们是不是得订阅这个可可查对象呀？谁订阅啊？是不是观察者去订阅啊？好，那么接下来是这样订阅的啊，我们要找到这个 absorb 对象，就用 stop scrap 这样的一个方法去订阅，谁订阅呢？ absorb 订阅，我们把 absorb 传递进去，这样的话当他发出数据的时候，他就可以接受到了。 好，那么接下来呢，我们要去编辑器当中啊，来验证一下这个代码，我们来感受一下，那么在这呢有一点需要说明哈，就是说我们后面会在安个的这个框架当中去使用 rx cs， 但是呢，现在为了让我们能够快速的去掌握这个东西，那么我们要使用一个单独的环境，能够直接去写 rx cs 代码的，这样的话我们的代码会更加的干净，因为没有安个代码， 这样的话我们更容易去理解他。首先呢我们去找到咱们的课程文件夹，在课程文件夹当中呢，里面有一个 note， 在这个里面呢，有一个文件夹，那这个文件夹就是我事先搭建好的运行二 x g s 他的一个 环境，那么我们来复制一下这个文件夹，然后咱们退一步啊，找到这个扣的，我们在扣的当中粘贴它，接下来呢我们把它拽到这个 vs 扣的里面去哈，在 vs 扣的这个编辑器当中呢，首先我们要做一件事，什么事呢？哎，你们拿到这个代码也是一样的啊，我们找到这个命行工具， 在命令航空区当中啊，我们要通过 npm install 这个命令把这个案例他的项目依赖给他安装上哈，所以在这我们输入 npm install 去安装一下这个依赖， 现在这个依赖是不是就已经安装完成了呀？接下来我们就可以通过 ntm star 的这个命令来启动这个案例了，当这个案例启动成功之后呢，这个浏览器啊会被自动打开，那我们坚定的是九千这个端口， 当你在页面当中能够看到 hello r x j s 的时候啊，那就说明呢，这个阿里啊就启动成功了。那么现在我们切换回编辑器当中，在 s r c 这个文件夹当中呢，有一个点带 star j s 这个文件哈，那么我们通过 doctor write 把 hello r x g s 呢打印到 htm 文件当中了，实际上呢就是打印到了这个 htm 文件当中，那么我们把这个代码给他删掉哈，那么首先呢，我们要去创建 obe zero 对象，就是可观察对象，那我们是不是要把这个各自函数给他拿过来啊？所以， 所以呢，我们要通过引炮的关键词去引入它，从 r x j s 当中去引用啊，那么这个 r x j s 呢，我已经提前安装好了，就在这个地方，那么在安格拉当中去使用呢，也是一模一样的啊。好，那么在这个里面呢，我们去引入 absorb， 接下来我们是不是就可以去创建这个可克拉对象了呀？好，我们使用 cos 的关键字啊，去声明一个常亮，这个常亮的名字呢，我们就把它叫做 abazzarable， 他的指压是 new 一个 abazzarabob， 那么执行之后返回的啊，就是可观察对象了，在我们去实力化额不这个购算函数的时候啊，他要求我们去传递一个函数啊，在这个函数当中，我们就可以去执行一波操作了哈，比如说在 这个地方，我们就开启一个延时定时器来模拟去请求数据，那我们在这呢去延迟两秒钟啊，不要太长。 那么假如说啊，在两秒钟之后啊，有一个数据是一个对象哈，它里面有一个内幕值为张三。哎，我们获取到了这样的一个数据，那么接下来我们要把这个数据传递到 abadouble， 就是可观察对象的外部啊，我们要在外部来接收并处理这个数据， 那这个时候呢，我们需要去调用他内部给我们提供的一个方法。好，那么实际上啊，在我们实力化 absorb 这个构造函数的时候，传递了一个函数，那么这个函数呢？有参数啊，我们一般来说把这个参数呢命名为 above therver， 那么他呢，实际上是一个对象哈，那么在这个对象下面呢，有一个方法叫做 next， 那么通过这个方法呢，我们就可以把这个数据传递到外面去了啊，好，那么这个就相当于卓密斯里面的那个 reserve 啊，那么接下来我们是不是要去接收这个数据啊？用谁来接受呀？是不是用观察者来接受呀？所以呢，我们要去创建一个观察 使用 cos 的关键字去声明一个常亮，常亮的名字呢，我们就把他叫做，啊，不，他的纸啊，是一个对象。注意啊，我们说的观察者，他实际上是一个对象，在这个对象当中有一个方法叫做 next， 这个方法的作用呢，就是用来接收他内部传递出来的这个数据的，在这个地方传递了一个对象啊，内幕为张三。那么在这我们就可以去接收这个对象，比如说在这我们添加一个行餐 y 六，接下来呢我们使用 conso del 方法去输出这个 y 六， 那么现在可观察对象和观察者就都已经有了，但是呢他们两者之间呢，还没有任何关系，接下来我们让他产生关系，当产生了这个关系以后呢，当他发出数据的时候啊，他就可以去接收了， 那么如何产生呢？那非常简单哈，咱们找到 abservable 对象，在它的下面呢，有一个方法叫做 sopscrap， 这个 supscrap 就是订阅的意思啊，那么谁来订阅这个可观察对象呢？谁订阅了谁就能够接收到这个数据，实际上呢就是这个 abbazara 要去定位他，那你把这个 就可以了。好，那么现在我们来保存这个文件哈，保存文件以后，我们切换到浏览器当中，点击鼠标键啊，选择检查，我们找到这个高速，我们来刷新一下这个页面啊，一二看数据是不是接收过来了呀，就说明当前我们所写的这个代码呀，是没有问题的， 那么现在呢，这个代码我们就写完了哈。接下来我们切换回 max 文档当中，我们来回顾一下我们讲的内容是什么啊？那么当前呢，我们讲解了什么是 rx g s 啊？他实际上和 promise 一样啊，都是用来处理一步编程的，实际上呢就是去改善基于回调函数的代码，因为扎拉 scrap 的当中呢，一步编程就是基于回调函数的嘛， 那么为什么要学习他？因为安格兰内部深度集成了他。那么接下来呢，在这个 rxgs 当中有一些概念哈，第一个呢叫做可观察对象，那么这个可观察对象内部可以去执行 e 部代码，那么当 e 部代码执行完成之后，我们还是通过他内部给我们提供的方法，通过这个方法呢，我们可以把这个数据传递到外部去， 我们在外部去处理这个结果。接下来呢是观察者，观察者是用来接收 above 这个对象，他发出的数据的啊，就是接收可观察对象发出的数据，他本身呢是一个对象，那对象当中有一个属性叫做 next， next 呢是一个方法，通过这个方法就可以去接收数据了啊， 接下来是萨瓦斯卡，那么我们需要使用观察者去订阅可观察对象啊，这样的话观察者才能够去接受到数据。首先我们从 rx g s 当中去引入 available 这样的一个高层函数，它的作用呢是用来创建可观察对象的。 在实力化的时候呢，我们需要传递一个函数，函数有一个参数啊，那么当义务有结果的时候，那么咱们通过这个参数把这个数据传到外面去，比如说在这个地方稳掉，用 observer 点 next 方法，我们就可以把这个对象传递到外部去了。 接下来我们去定义这个观察者啊，那么在观察者当中呢，有一个奈斯特，那么这个奈斯特函数呢，有一个刑参啊，这个刑参呢就是 abserver 点 next 这个方法传递出来的参数。好，那接下来我们让他俩产生关系啊，就是 absorb 哦， 然后把那个 absorb 给他传递进去，这样的话就是观察者订阅了可观察对象，当可观察对象发出数据时，观察者就能够接收到这个数据了。好，这就是当前我们所讲解的 r、 x、 g、 s 快速入门。

接下来我们要使用 rx js 去做几个案例，来感受一下实际上他是怎么去使用的。第一个我们要做的案例呢，就是元素拖拽，就是说在页面当中要有一个 div， 我们可以通过鼠标去按住它，然后通过移动鼠标的方式来移动这个 div， 那么我们先来看一下他的 html 结构是怎么样的。首先在页面当中要有一个 div， 我们给这个 div 啊添加一个 id 值呢为 box， 这是为了方便在扎巴 scrap 当中去获取它。 这个 div 呢有一些基本的样式，比如说他有宽度二百，高度二百，背景颜色呢是一个天蓝，他是绝对定位的，那么他的 lock top 呢？分别为零。好， 那么当前这个案例啊，我们打算先使用原声扎巴 scrap 去实现一下，去感受一下这个案例他的实现思路，接下来我们再通过 rxgs 去实现他，这样的话会比较容易接受一些。 我们先把这个 html 结构以及这个样式呢，可乐加 c 复制一下，我们把它放置在 htm 这个文件当中来好，那么现在我们就找到这个 html 文件，可乐加 b 来粘贴这个代码，保存一下这个文件。我们先来看一下他长成什么样子好，那么在页面当中呢，他实际上就是这样的一个 div， 接下来呢我们就去实现他，要实现他，首先我们是不是要去获取这个 div， 然后给他添加 on moss 这样的一个事件呢？因为我们要先通过鼠标去按住他，然后才是移动他。 我们回到 js 文件当中来使用 gas 的关键字去声明一个常亮常亮的名字呢，我们就把它叫做 box， 它的值啊就是 document 第二双 get element by id， id 值呢就是 box。 好， 那么接下来呢，我们要给这个 boss 呀，去添加 on must on 这样的一个事件，当这个事件被出发的时候，我们要干什么呢？那么实际上我们要获取一个距离， 比如说当前我的鼠标点击的是这个位置，那么我要获取这一段距离和这一段距离，为什么要去获取这两段距离呢？因为当鼠标去移动的时候，我们要用移动的那个点的位置去解决这个距离。好，那么这个时候得到的这个距离就是这个 div 实际的 lap 和套吧。好，那么现在我们切换回编辑器当中来实现它， 那么首先呢，我们要这样干哈，使用 let 关键字去声明一个变量，变量的名字呢，我们就把它叫做 distance x， 它的指是什么呢？那么我们在这儿先来一个 event， 那么实际上它的指呀，就是意外的点儿 clanta x， 再减去 event 点儿 target， 点儿上 offset left。 好，那么实际上就是哪儿呢？我们来看一下啊， 可烂的 x 指的就是这个地方到这个地方的距离，然后呢，我们再减去这个元素这个地方的距离，得到的是不是就是这个的距离啊？那么我们切换回编辑器当中哈，接下来我们再去声明一个边量，这个边 它的名字呢，我们就把它叫做 distance y， 就是上面的那段距离，它的值呢，就是 event 点儿 client 无外简缺。 event 点儿 target， 就是那个元素啊，它的 of a set top， 那么现在这两段距离我们就已经获取到了，接下来呢，我们要去移动，那么这个移动的事件呢？我们要给他添加到刀客们的， 所以在这个地方我们找到 document， 然后去给他添加 on mouse moon 这样的一个事件。当这个 mouse moon 事件被出发的时候呢，我们要这样去做哈，我们要找到一万的点上可烂他 x， 这个是不是移动的时候的那个 x 呀？然后我们让他去减去这个 distance x。 那么接下来呢，我们用一个变量啊来存住它， 那么在这我们使用 lit 关键字声明一个变量为 lt。 接下来呢，我们使用 lit 关键字声明一个变量叫做 top， 它的值呢？就是一万的点上 climbed y， 减去 distance y。 好，那么接下来我们是不是就可以给元素去设置 和 top 呀？好，那么在这我们是通过 box there style 点 left 等于 left， 我们再加上一个像素 p x。 接下来我们再使用 box d r style 点儿 top 等于 top， 我们再加上一个 p x。 那么当我们松开鼠标的时候，那么这个元素呢？要停止移动，所以我们还需要给这个 boss 呀去添加一个事件，这个事件呢，就叫做 on mouth up， 当这个事件被出发的时候呀，我们要让这个元素停止移动，那实际上就是把这个 docu 门的啊 mose 这个事件给他取消就可以了，我们让他的纸呢等于难 保存这个文件哈，我们切换到浏览器当中，看一下这个效果，刷新一下这个页面哈。接下来呢，我们去按住鼠标，然后去拖动这个元素，看现在这个元素是不是就可以拖动了呀？那么这是我们当下啊，使用原生扎巴斯 craft 去实现的这样的一个效果，同样的一个效果，我们怎么样使用 rx js 去实现呢？那么现在我们先把这一段代码注视掉， 接下来呢，我们在上面啊，先引入相关的一个方法。第一个我们要引入的方法是什么呢？是不是 from 以万的呀？因为我们要通过 from 以万的这样的一个辅助方法去给这个 boss 去添加事件，并且把这个事件转换成 absorbable 对象。那么现在我们找到顶部通过音炮的关键词，从 rx js 当中去引入 formal event。 好， 那么接下来呢，我们就按照这个代码去更改它。首先我们去调用 frame invent 给 box 去添加事件，添加什么事件呢？是不是添加 monster 这样的一个事件呢？好， 那么接下来呢，我们是不是要获取到这个 distance x 和 distance y 啊？而这两个值呢？我们是通过事件对象去获取的，那么当这个事件被出发的时候，他会发出一个数据流，而这个数据流呢，就是事件对象。所以在这个地方呀，我们先这样看啊，我们先写上一个 subscar 去定位他，那接下来呢，我们要去使用 console 的耳朵方法， 把这个数据啊输出到控制台当中。好，那么接下来我们这样去干哈，在这我们去点上一个 pap， 然后我们通过 map 方法去转换这个数据流，我们要把这个事件对象最终转换成这两个指，那么接下来我们先去引入 map 这样的一个方法，那么从哪去引入他呢？我们从二 x g s 下面的 operators 当中去引入他， 那么接下来我们就可以去 do 用这个麦普方法了，在麦普方法当中，我们要去传递一个回调函数，这个回调函数呢，有一个参数就是这个时间对象， 在这个回调函数当中呢，我们要返回处理之后的那个数据流，那这个数据流呢？我们要让他变成对象形式，因为在这个地方我们是不是要存出两个值啊？原来呢，我们是声明电量，但是现在呢，我们要把它呀保存在对象当中哈。第一个值呢就是 distance x， 他的指压就是一万的点儿 clan 的 x 减去一万的点儿 target 点儿 of 赛克 left。 好，那我们把它放在这儿，接下来呢，我们再在这个对象当中去添 加第二个属性，这个属性啊，就是 distance y。 好，那么在这我们去添加 distance y， 那么它的值呢？就是一万的点儿克兰的 y 减去一万的点儿 target 点儿 offset top。 好，那么在这我们把这个值粘贴过来，接下来呢，我们保存文件啊，去更改一下这个格式， 那么现在当我按下鼠标的时候，我们是不是就可以得到 distance x 和 distance y 了呀？好，我们来测试一下，切换到浏览器当中啊，我们点击鼠标键，选择检查，找到康总，现在呢，我按下鼠标，注意看，现在我们是不是能够得到这样的一个对象呀？ 那么接下来呢，我们继续向后写，接下来我们要干什么呀？我们是不是要去移动这个鼠标呀？那么移动鼠标呢？它又是一个可观察对象了，所以接下来我们要做的事情呢，就是切换数据流，我们要从 most done 这个时间流切换到这个 mousemoon 这个时间流，所以接下来呢，我们要先去引入这个操作符，这个操作符呢就叫做 switch map。 好，那么在这我们去引入他在脉搏这个方法的后面呢，我们去切换这个事件流，那么在调用 switch 脉搏的时候呢，他也需要去传递一个回调函数，那么这个回调函数呢，他也是有一个参数，那么这个参数呢，就是上一步传递过来的这个数据流，实际上就是那个对象哈，好， 那么在这我们先写上一个毁掉函数，那么在参数这个地方呢，我们可以去通过结构的方式来拿到 distance x 和这个 distance y， 好，那么这是对象结构。 既然说当前我们要去切换数据流的话，那么在这个地方我们是不是要返回一个可观察对象呀？那实际上就是这一波哈，我们要给 document 呢去添加啊，貌似木这样的一个事件，所以在这呢，我们继续调用 farramaevent 这样的一个方法，在方法的第一个参数当中呢，我们去添加 document， 然后我们去写成什么呀？是不是 mouse moon 呢？我们要给 document 去添加昂 mouse moon 这样的一个事件，那么当这个事件被出发的时候，我们要干什么呀？我们是不是要得到 这样的一个 let 套表，那么接下来呢，我们在 form 一万的这个后面呢，去添加派法，去处理当前的这个数据流。那么在派的方法当中呢，我们要去调用 map， 在迈步方法当中呀，我们是不是能够得到一个事件对象呀？好，我们保存一下这个文件啊，调整一下这个格式，接下来呢，我们要做什么呀？我们是不是还是要返回一个对象呀？好，那么在这我们去返回一个对象，在这个对象当中要有 left， 而这个 let 是什么呀？是不是就是一万的点儿可爱的 x 减去上一步的这个 distance x 呀，好，那么在这我们把这个代码呢，跟着加 c 复制一下，然后我们再去添加一个 top， 那么这个 top 的值是什么呀？是不是就是一万的点儿可蓝的 y 减去 distance 吧。接下来呢，这个订阅者是不是就能够拿到这个 leptop 呀？最终我们要在订阅者的这个地方做盗墓操作，因为刚刚我们在上面的这个过程呢，他是做什么呀？他是不是做这个数据的一个转换呐？那么在做数据转换的过程当中呢，不要去 去做副作用相关的内容，那么副作用相关的内容呢？留给订阅者去做，所以在这个地方啊，我们去传递一个函数，那么当前这个函数呢，他会接收一个对象哈，那么这个对象当中呢，会有这个赖特套法， 所以在这个地方呢，我们通过对象结构的方式去拿到这个 lept 以及 pop， 那么接下来呢，我们就可以给这个 box 去添加 left 了啊，那么它的 lept 就是一个 lept， 加上像素。好，那么接下来我们再去给它添加 top， 那么它的值呢？就这个 top， 然后咱们再加上这个像素， 那么在这个地方呀，我们把这个方式关键字呢给它去掉，我们把它改成线头函数，这样看起来就比较舒服了啊，保存这个文件哈，我们接下来呢，切换到浏览器当中， 刷新一下这个页面哈，然后我们按住鼠标拖动这个元素，注意看这个元素是不是依然能够进行拖动呀，就说明当前我们所写的这个代码是没有问题的，但是呢，当我松开鼠标的时候，这个元素是不是 还跟着我去移动呀？所以呢，在这个案例当中，我们还少了一个步骤哈，少了一个什么步骤呢？我们是不是少了一个 box 点儿 on moss up 呀？ 那这个呢，也很简单，实际上我们要怎么去做呢？就是说当这个 box 发生 on mouse up 这样的一个事件的时候，我们是不是要去停止这个数据流的一个发送呀？ 所以呢，我们要去调用，谁去干这个事啊？我们是不是要调用 taken to 呀？那么在这个地方我们再去调用 taken to 这样的一个操作符，那在这个地方呢，我们要去调用 taken to 这个操作符啊，我们看一下 taken to 已经被引入进来了， 那么在这个地方呢，我们还是要传入一个 absorb 对象，就是可观察对象哈，所以在这我们传上一个 form event， 也就是说当 box 发生 on mouse up 这样的一个事件的时候，那这个时候我们就停止这样的一个数据流，在这个地方呢，我们写上 mouse up， 好保存这个文件啊，我们再一次切换到浏览器当中来 查看一下这个效果，按下鼠标，移动鼠标，然后呢，我们去松开鼠标，注意看现在这个元素是不是就定在这不动了呀，就说明当前我们所写的这个代码呀，是没有问题的， 那么接下来呢，我们切换到吗？当文档当中啊，来回顾一下。当前呢，我们是通过一个案例来感受一下二 x g s 他在实际当中是怎么去用的，那这个案例呢，就是元素拖拽啊，就是按下鼠标移动鼠标，让元素跟着这个鼠标进行移动，那当我松开鼠标的时候呢，让元素停止移动啊。 那么首先呢，我们要去引入 from 以万特，通过 from 以万特给 box 去添加 on must on 这样的一个事件，当这个事件被出发的时候呢，我们可以拿到这个事件对象，因为它是一个数据流，那么在这个环节当中呢，我们就可以去找到这个 distance x 和 distance y， 那么当我们把这两个值计算出来以后呢，我们去切换数据流，我们把这个数据流切换成老 q 本的昂猫斯木，那么当这个事件被出发的时候，他是不是又会发出数据？ 那么在这一步呢，我们用一万的点可蓝的 x 减去上一步，拿过来这个 distancex， 最终来得到元素的 lap 套吧，那么给到定位者，那么定位者呢，会给元素去设置这个 lap 套吧，这样的话，这个元素是不是就能跟着这个鼠标进行移动呀？ 但是呢，当我去松开鼠标的时候，这个元素他还要去停止移动，所以呢，我们要去给他传递一个条件，那么当这个条件被出发的时候呢，我们就要去停止这个数据流的发送了，那么这个条件呢，通过 taken to 去指定哈。那么当 document 点儿 on mash up 或者 box 点儿 on mash up 这个事件被出发的时候呀，那么我们就可以去停止它了，这样的话这个元素就可以去停止移动了。好，这就是当讲我们通过二 x g s 所实现的第一个案例，就是元素拖拽。

大家好，我是接会的电子产品，那么今天呢，我给大家带来一门基于最新的 angler 版本，八点零的从基础到实战的高仿拼多多的这样一课程。 在这门课程当中呢，我们会覆盖 angle 当中绝大多数的知识点，而且我们提供了一个具有现实意义的一个高仿拼多多的这样一个实战项目。在这个项目当中，我们会不断的去熟悉前面学过的知识点，不断的去把实战的一些技巧加进去。 通过这样一个课程的学习，我相信无论你是一个零基础的 angler 初学者，还是一个对 angler 已经有一定了解的同学，你都能从这个课程当中学到很多的知识。那么既然我们要学习 angler， 我们来看一下 angler 到底对比其他框架来讲，它有哪些优势。 和 view， react 比较起来， anger 其实更称得上是一个框架，因为后两者呢，他更多意义上是倾向于试图倾向于 view 这样一个层面的比较轻量级的内裤。但是 anger 他是一个一站式的频道开发框架，那么理解他 从模块服务组建，路由表单强势开发这东西完全都给你提供好了，是一个开箱即用的这么一个框架，也就是说他并不需要依赖很多的第三方的开源内裤，你不需要去比较这些开源内裤当中的优缺点，因为官方内置就给你提供了详细功能，所以这是有选择恐惧症的同学的福音。第二点，从语言层面来讲， 所有的 view， react 这些形状框架都在拥抱 type script， angler 是所有主流开发框架当中最早拥抱 type script， 它采用了 typescreen 作为开发语言，提供了大型项目所必需的这种类型约束。从目前来看，虽然 react 和 view 也支持了 typescreen， 但是从提成程度来看， angler 是所有这些框架当中对 typescreen 最友好的，也是最方便的。 可以这么说， tab script 已经成为了未来前端框架的一个标配。二、最早拥抱 tab script， angler 在这个上面有非常大的一个优势。 从项目层面上来说，大型项目需要处理非常复杂的逻辑，而这些逻辑当中呢，大部分情况下是一些异部操作。那么 anger 深度的集成了 r x z s， 用 r x z s 来去支持对于逻辑和异部的一种响应式编程， 这种小样式编程使得逻辑的处理和义务的处理非常自然简单。另外，对于大型项目当中所需要的复杂的表单处理，那么对于这些表单当中的字段的约束验证，通常意义上来讲是非常复杂的，但是 angler 提供了非常好的一种机制来去让你处理复杂的表单。 另外，从大型项目来说，需要一个很好的文件结构和编码规范，这些东西呢， anger 从框架层面上全部给你提供好了。再一个我们来看生态层面，生态层面上 google 和微软是都站在 anger 背后的，用力支撑这个 anger 框架，那 google 大家可以理解，因为 anger 就是 google 开发的， 和微软和他有什么关系呢？因为 anger 框架所依赖的这种底层建筑有两大建筑是这个微软提供的，一个是 typescript， 一个是 rx， 那么有这两大巨头站在他背后，他的这个生态基础是非常稳固的。 另外一个大家可以看一个趋势，就是在 link in， link in 是全球最大的职场社交的一个平台，其实也是最大的一个招聘的网站来源，那么 anger 其实就是 link 的 ins 上边前端框架当中招聘需求最多的，那么有这样一些优势之后，大家觉得是不是学习 anger 动力很强？ 接下来呢，我们来看一下我们这个课程的内容，我们的内容呢分为两部分，一部分呢是基础知识，他偏于理论方面。另外一部分呢是实战内容，我们看一下从基础知识来讲，我们会讲组建指令模块，路由，还有依赖出入加起重要的概念，还有就是 rgs 和 http。 那么在每一个基础知识内容之后呢，我们都会有对应的一些实战，这些实战呢包括环境的搭建，每张呢会有对应的一个例子，然后呢还会有我们最后拼多多那个组建的一个实战， 最后呢我们会一起把这个程序打包，然后发布到真正的外部服务器上去。通过这样一些实战呢，大家会对真正的开发流程有一个非常清晰的一个了解。那么对于每张有实战内容的，我们都会有单独的 get 分支， 在 ide 当中呢，我们可以非常方便的去切换到对应章节的代码。那么大家可以看到在这个课程的设计当中呢，我们是非常用心的，相信大家在学习的课程当中也会体会到它的便利之处。 接下来呢，我们一起来看看我们要做的项目，我们要做的这个项目呢是一个高仿拼多多的一个拜拜，从结构上来看呢，他分为几块，一块呢是一个固定在底部的 type， 这个 type 呢每切换 一个 tab， 他其实都会走到另一个模块当中去，也就是说我们会分成多个模块去处理，除了首页这个模块之外呢，其他的模块我们会采用懒加载的几个形式，也就说在一开始首页加载的时候，其他几个模块是不加载的，等到你点击的时候，他会把这个对应的内容加载进去。 在这个里边呢我们会实现三个 pair 推荐和个人中心。最复杂的就是这个首页， 首页这个模块当中呢，大家可以看到它分成几个区域，最上面呢是一个可滚动的 type， 也就是说除了底下这个 type 之外，在首页上还有一个上部可滚动的 type， 点击它之后呢它会切换内容，但是呢不会影响到底部。 此外呢在这个区域呢会有一个轮波图，这个轮波图呢也是我们自己实现的，不依赖任何第三方的内裤。底部呢这块呢是一个可滚动的一个 网格主线，这块就是一个频道的一个列表，那么再往下呢是一个垂直可滚动的一个列表页面，这个列表页面当中你如果选中了一个商品，就会进入到一个商品详情页面，商品详情页面当中呢会有一个拼单主线和发起拼单， 那么这个发起拼单之后呢，他会弹出一个对话框，这个对话框呢是浮在原来这个页面之上，这边有个遮罩，比如说我们会自己实现一个对话框，那么在这边选择完款式和数量之后呢，会进入到一个确认订单界面，确认订单界面当中也包含一系列的小组件， 那么这些东西呢，就是我们要做的一个内容，接下来呢，我们来看一下课程的原版。在第一章当中，我们会讲一下如何去搭建一个 anger 所需要的环境，然后呢会讲一下开发工具。接下来第二章呢，我们看一 典型的 angle 工程的结构，它里面的文件构成以及文件都是做什么用的。接下来我们就会先写一个组件，一个顶部那个可滚动的 table， 通过这个小实战呢，大家可以熟悉一下组件的一个写法样式，绑定事件，绑定组件的输入，输出属性。那么这样写完一个小实战之后呢，大家会觉得，哎， angle 是非常非常简单的一个事情， 那么接下来呢，我们就会进入到一个比较系统的基础知识学习，我们学习组建的生命周期，如何在组建当中引用模板，然后模块的概念如何划分一个比较好的模块结构，如何进行双向绑定。 然后在这一章当中呢，我们会完成一个轮播图组件，在这个组件当中，我们会把所需要的知识呢应用到这个组件当中去，接下来呢，我们会学习进阶的一些 angle 知识，我们会学习注节指令组件嵌套路由组件投影依赖注入脏纸检测。然后同样呢在这 当中呢，我们会完成一个网课组建，利用已有的这些知识呢完成这样一个组建。第五章呢，我们会讲 http 通讯，我们会介绍 http 的概念以及他的消息，请求消息和响应消息，他们的数据结构是一个什么样子？然后使用 postman 和 rest client 去调试 api。 接下来呢，我们会讲一下 rest api 的一个概念， 然后我们会使用 anger 当中提供的 http client 去尝试请求我们的 api。 那么在请求 api 的过程当中呢，通常情况下，我们需要对请求消息的 hider 进行一些处理，如果这个处理是比较通用性的，对每个 api 都需要做的，那么我们会使用一个拦截企业来去实现它。 后面呢，我们给大家讲一下 x， 讲一些简单的概念和基础。然后呢，第六章，第七章我们就进入到一个真正的项目实战，我们会把我们的商品列表页面，商品详情页面，拼单组件，确认订单组件，对话框和个人信息组件都实现了。 最后一章呢，我们进行一个上线部署，在这个里边呢，我们首先会把除了首页之外的其他模块变成一个揽加载的模块，然后呢会使用环境变量把生产环境和测试环境分开，然后会进行编译的一个打包部署。最后呢，我们会进行整个课程的一个总结，这就是我们课程的一个安排。 那么学习完这个课程之后，我们究竟能掌握什么东西？第一个就是编程思维，模块化和组建化的编程思维，这个呢我觉得是对大家受益终生的，无论你学习任何一个框架，任何一个平台的语言，他们的思路呢，都是一样的。 那么从技术能力上来讲，大家会熟悉 anger 的大部分主要概念，而且可以独立完成一个中等难度的项目，从调试能力上来讲，大家通过这个课程可以学会多种方式定位问题。 再一个呢是大家可以知道如何使用一些工具，包括 chrome 的开发器工具，包括 postman， 包括 rest client 去调试前后端的 h i。 那么学习这个 课程需要什么样的知识呢？第一个需要大家熟悉 c s， s， a， t， m l 和 javascrip， 因为毕竟我们做的是一个前端项目，如果这些知识都没有，那么希望大家去补充一下基础知识。第二个是要有面向对象编程的一个概念，因为 type script 毕竟是一种强类型的面向对象的一种编程语案。 第三个是希望大家有函数式编程的一个基础，但是如果没有的话呢，这个相对来说比较简单，只需要看一些网上的资料就可以了。那么适合学习这个课程的人群是什么呢？第一个就是对 anger 有兴趣的初学者，第二个是初中级的潜能工作室。那么我们的课程介绍就到这里了，大家一起跟我进入 anger 探险之旅吧！

下一个我们要了解的概念叫做服务，服务用来放置和特定组件无关的，并希望在多个组件当中共享的数据或者逻辑。就是说安格勒不希望我们将组件与组件之间可以共享的内容在每一个组件当中都写一次， 只要是组建之间可以共享的数据或者逻辑啊，都可以被放置在服务当中。服务出现的目的呢，在于结偶组建类当中的代码，单个的希望组建类当中的代码呢，是简洁的，是干净的。 在代码当中，服务表现为使用 inject apple 装饰些装饰的类，比如当前代码当中的 app service 就是一个服务类，因为他被 inject able 装饰些函数装饰。 在大多数情况下呀，服务类当中的属性或者方法呢，都是被组建类调用的。接下来我想说明的点是，在组建类当中如何调用服务类中的属性或者 方法。我们先来看下面这样一段代码，在 app 组建类当中，我想使用 app 服务类中的属性或者方法，所以在 app 组建类当中，通过 new 关键字实力化了 app 服务类，得到了 app 服务类的实际对象， 通过这个时，对象呀，我们就可以调用他下面的属性或者方法了，虽然这个代码是可以运行的，但是呢，一定要切记，安个并不希望我们这样去写代码，因为这样的代码呢哦，额度太高。 如果 app 服务类在后续的应用开发当中，调用方式被更改了，比如说增加或者减少了需要传递的参数，那么在所有使用到 app 服务类的组前列当中都需要进行更改，这不是我们要看到的结果， 在安格拉框架当中内置了依赖注入系统，他可以帮助我们改善这个局面。关于什么是依赖注入，我们在后面的课程当中会讲解。现在你需要知道的是，在组建类 当中，不要手动实力化服务类，服务类的实力化，安个的框架会帮助我们实力化，并且安个内部在实力化组建类的时候，会通过参数的方式将服务类的实力化给我们传递进组建类。所以在组建类当中，代码应该写成下面这个样子， 在组建类的 constructor 构造函数当中添加刑翻来接收福利的实力对象。但是在这个地方呀，还存在一个问题，就是在一个安格勒应当中，服务类是有很多的安格勒怎样才能知道我们想要的是哪一个福利的实力对象呢？ 这个时候有同学可能会想到，既然是行餐，那么只需要通过参数的顺序一一对应就可以了，其实这样做呀，是不科学的， 比如现在我有十个福利的十对象，我想使用第九个，这个时候你还必须将前八个行餐对应上，这样呀就不太好了。实际上呢，单个的并不 是通过行餐的顺序对应的福类十对象，而是通过类型标注来让安哥的知道我们想要的是哪一个福类的十对象。比如在当前代码当中，我们通过 app service 类型标注来告诉安哥，我们想要得到的是 app 福类。 接下来我们看下一个问题，为什么在行餐的前面加上了 private 全线修饰服呢？ private 写在这个地方呀，有两层含义， 第一层含义啊，是 app service 在使用时并不作为参数使用，而是作为当前类的属性使用。也就是说啊，在其他的类方法当中，我们可以通过 this 点 app service 来访问他，当然这是 tap scrap 当中的知识点。 第二层含义呢，是 app service 只能在祖先类当中使用，不能够在祖先模板当中使用，如果这个地方换成了 public， 就可以在祖先模板当中使用这个福利的省对象了。关于服务呀，还有一点 说明，服务类的十对象呢，是单例模式，这也是为什么服务可以在多个组建之间共享数据的原因。也就是说，如果某一个组建将服务类当中的数据更改了，那么其他使用到该服务的组建当中的数据啊，也会一起更改 好，这是我们要了解的第三个概念，服务。服务呢，是用来放置组件之间的共享数据和逻辑的，他可以节约组件类当中的代码。 服务类的十对象呢，由安格拉帮助我们去创建，在组建类当中，可以通过构造函数行餐的方式来接触他。服务呢，是单立模式，这也是实现组建之间共享数据的基础。

接下来我要讲解的内容叫做自定义指令，我们要看一下在安格勒这个框架当中，如何通过自定义指令来操作盗墓。 我们先来看一个需求，这个需求呢，我们要通过自定义指令来实现，在页面当中呀，有一个元素，我们想使用自定义指令呢，为这个元素去设置一个默认的背景颜色，当鼠标移入到这个元素身上的时候呀，我们再给他设置一个其他的背景颜色。当鼠标从这个元素身上移出的时候呢，我们再去给他设置一个背景颜色。 这样的一个需求通过自定义指令要如何去实现呢？我们先切换到编辑器当中，第一个我们要看的呀，就是如何去创建自定义指令， 创建自定义指令呢，我们要使用安哥的 c 喇叭这个工具给我们提供的命令，所以呢，我们先找到这个命令行工具。在命令行工具当中呢，我们要通过 ng， g， d 这样的一个命令去 创建 sting 指令， g 呢就是 january 表示，创建， d 呢就是 deractive 表示指令，合起来就是我们要使用 ng 这个命令来创建指令。 在 d 的后面呢，要加上这个指令的路径以及指令的名字。我们当前呢是想把这个指令啊，放置在 app 这个文件夹下面的 directives 这个文件夹当中，所以在后面呢，我们先指定这个 directives 这个文件夹的名字。接下来呢，我们去指定这个指令的名字，指令的名字啊，我们就把它叫做 hover。 接下来呢，我们敲击回声去创建这个指令。 在命令行工具当中，他给了我们两个提示，他告诉我们创建了一个文件，更新了一个文件，这个创建的文件呢，就是 hour 点 directive， 点 t s 这个文件，这个文件呢被放置在了 directives 这个文件夹当中，那么 我们在这个地方来看一下，他是不是被放置在了这个文件夹当中呀？然后他还告诉我更新了一个文件，那么更新的是谁呢？更新的是 app， 点猫都点 ts， 也就说他更 更新的是跟模块，那么我们找到跟模块这个文件，我们看一下啊，在 app 这个模块下面呢，他实际上把我们刚刚创建的那个指令引入了进来，然后把它放置在了 declare since 这个速度当中，这说明什么呀？这是不是说明指令这个东西也应该属于某一个模块，他才可以去运行呀？好， 那么也就是说刚刚我们创建的这个指令呢，它是属于根毛块的啊，那么接下来啊，我们就看一下这个指令要如何去使用，我们找到指令文件就是， 那么在这个文件当中，我们发现哈，其实指令呢，他也是一个类，这个类呢被 directive 这样的一个装饰器装饰了，那么当一个类被 directive 装饰器装饰以后呀，那么他呢就是一个指令了啊， 那么在这个装饰器的原数据当中呢，有一个 selector 啊，指定的就是这个指令要如何去使用，那么他在外面呢，加上一个中号啊，就表示当前这个指令要通过属性的方式去使用，那么我们怎么 使用呢？好，那么我们先复制一下这个指令的名字，然后我们找到跟组件哈，在跟组件当中，我们来添加一个 div， 那么我想操作这个 div， 我只需要把这个指令的名字放在这个 div 的身上就可以了。注意啊，现在在这个指令的名字外面，我有添加中国号吗？没有， 什么时候添加中号呢？就是说当你想绑定动态数据的时候才需要去加，那么如果不绑定就不需要去加了啊。好，那么我们保存这个文件，接下来呢，我们切换到这个指令文件当中哈，当前我们是想操作指令所在的那个元素，那么我们如何才能获取到这个元素呢？在当前这个代码当中，实际上就是个 div 吗？好， 那么实际上这个事啊，我们要通过服务来做，也就是说我们要告诉安哥了，我们想获取指令所在的那个元素，我需要把这个服务给他注入起来啊，所以呢，我们要找到 constructor， 接下来我们写上一个 private， 然后我们写上一个 amont rf， 主要 啊，这是一个行餐，那么接下来啊，注入谁？哎，我得告诉安哥了，那么我要去注入 alement ryf， 这样的话，这个参数啊，就是指令所在的那个元素所定的十六项了啊， 那么接下来呢，我们使用 ctrl 的方法去输出 ioment r e， f 保存这个文件哈，我们切换到浏览器当中来看一下，点击鼠标键啊，选择检查，我们找到 ctrl， 注意看啊，在控制台当中说出了一个 alimantaria 对象哈，那么在这个对象当中有一个属性哈，这个属性的名字呢，叫做 native alimant， 这个属性当中存在的就是指令所在的那个元素啊，那个 div。 好，那么接下来呢，我们就可以去操作这个 div 了。 那么在这个地方呀，你一定要注意哈，我们操作 div 呢，是不能够在这个里面去操作的啊，那么实际上在这个里面，我们还获取不到 div。 那么刚刚你在控制台当中为什么看到了 div 呢？因为在组建试图出示完完成之后啊，他又缺过去了。 接下来啊，我们要看一下在哪操作这个 div 呢？哎，我们要在组建试图初始化完成以后啊，所以呢，我们要去使用生命周期哈，那么要使用生命周期呢，我们需要去实现其对应的接口哈， 组建试图初始完成呢，是 after will in need， 那么我们在这去继承 after will in need。 接下来在这个组建当中，我们就可以通过单机 after will in need 来去实现了啊， 他呢就是一个生命周期函数了。在这个地方呢，我们可以这样去做啊， console 点儿 log this 点儿 element， r e f 点儿 native element， 这样的话，我们就可以获取到这个 div 了哈，那么我们保存这个文件，我们切换到浏览器当中哈，注意看这个 div 存不存在啊？是存在的啊，是获取到了的。 那么接下来我们为了方便去操作它啊，那么这个写的太长了，我们把它变得短一点，我们在上面啊，新建一个艾特曼特变量，那么它的类型呢？就是艾特曼特，然后在这 这个地方，我们这样去写哈，我们找到 dys 点儿 element， 然后给他复制他的值呢，就是 dates 点儿 element， r e f 点儿 native element。 好，那么接下来我们在下面是不是就可以通过 diss 点儿 element 来获取这个元素俩？好，我们看一下能不能获取到哈，注意看，还是能够获取到的啊。接下来呢，我们这样去干哈， 我们给他去设置一个背景颜色，那直接写上 style， 点 background color 就可以了啊，我们默认让他是 sky blue。 好，那么在这个地方呢，他给我们了一个错误提示啊，他说艾伦的伤不存在 style， 是因为什么呢？是因为这个地方的类型标注错误啊，那么他呢？应该是 ht m 艾伦的，这样的话，这个提示是不是就不存在了呀？好，那么我们保存这个文件，切换到浏览器当中， 然后我们去刷新一下这个页面哈，那么注意看哈，现在这个 div 呢，我们展开他啊，找一下他在他的身上有没有 bat ground 呀？是有的，只不过这个 div 身上 没有任何内容，我们在这个里面啊，去写一些内容，我们就可以看到效果了，比如说我们就写上一个很乐安个了啊，切换到浏览器当中，我们来看一下，看这个背景颜色是不是就有了呀？好， 那么接下来我们还有一个需求啊，这个背景颜色呢，我不希望写死哈，我希望你在调用这个指令的时候呢，你给我传一个，那么我应用你传的这个，如果你不传呢，再应用默认的这个。 好，那么这是我现在的需求。好，那么接下来呢，我们在调用这个指令的时候，要给他绑定动态纸，那这个时候我们是不是就可以去加中国号了呀？然后呢，我们去给他绑定一个对象啊，因为我们除了可以去传背景颜色以外，我们是不是还可以去传其他的内容呀？好，那么在这我们就写上一个 b g 卡了，让这个 b 器卡了是什么呢？我们就让他是 red。 好，那么接下来呢，我们要去这个指令内部啊，去接收一下他，当接收完这个纸以后呢，就不会存在这样的一个错误提示了哈。好，那么 我们回到这个指令内部，在指令内部如何去接收呢？哎，我们要用到输入属性哈，就是 f input， 我们要调用 input 这样的一个装饰器，那么接收谁呢？我们要去接收 app hover， 当接收到这个值以后呀，你把这个值给我复制到 app hover 这样的一个变量当中啊， 那么接下来呢，我们去指定他的类型啊，因为他提示我们说这个 app hover 他是爱你的啊，那么接下来呢，我，我们在上面啊，通过 interface 去定一个接口，这个接口的名字呢就叫做 options， 那么接下来呢，我们在这里去指定哈，这个里面呢，可以有一个 b 级卡了，然后他是字母串类型，然后我们把这个 options 复制给车变量就可以了。接下来呢，我们再去指定一个默认值， 那么这个 b 几号了呀？他是可选的对不对呀？我们还要去加上一个问号啊，保存这个文件哈，那么接下来呢，我们在这个地方去更改一下，我们让这个元素的背景颜色 呢，是 app 哈，位点上比起卡了，如果有就用这个啊，如果没有，那么咱们就用后面的这个 sky 不录，这样的话就可以了啊，保存啊，现在我是传了背景颜色的，那么我们切换到浏览器当中，注意看是不是变成红色了呀，那么如果说我在这个地方不传呢？如果不传的话，那么实际上他就是什么呀？他就是 sky 不录， 那么接下来我们继续看，当鼠标引入到这个元素身上的时候，我们是不是还要去更改这个背景颜色呀？所以说接下来我们要看一下如何为这个元素去绑定事件。为这个元素去绑定事件呢，我们需要用到一个装饰器啊， 那么这个装饰器的名字呢？叫做 host listener， 好，那么在这我们直接去调用它，在这啊，我们去调用 host listener， 就是它。好，那么在这个里面呢，你需要去填入你绑定的那个事件的名字，当前我们去绑定 mose ant 这样的一个事件，所以在这我们写上 mose ant。 在装饰器的 后面呢，你要去指定一个事件处理函数，事件处理函数的名字呢？是自定义的啊，我们就写上一个 ant。 好，那么当触发这个事件的时候呢，我们找到这个元素，就是 diss 点 imat， 然后我们让他的背景颜色去做一个更改，那么当前这个背景颜色呢，我们就随意去写哈，比如说我们就写上一个 pink 啊，那么这是一入时间哈，那么我们保存这个文件，接下来呢，我们切换到浏览器当中，鼠标一入，看这个背景颜色是不是发生变化了呀？好，那么接下来呢，我们再去添加一个鼠标，移出事件，继续到用 host lacener 这样的一个装置器，然后呢我们写上 mouse leave 事件处理函数的名字呢，我们就把它命名为 live， 然后我们去更改它的背景颜色哈，那么这个颜色呢？我们让它是 red 保存切换到浏览器当中，我们再来看一下，鼠标一入变成 pink， 一出变成红色，看这样的一个效果，我们是 是不是就已经实现了呀？啊，这就是当前我们所讲解的这个自定义指令它的一个创建方式哈，那么我们切换回这个编辑器当中，我们来看一下 如何去创建指令呢？我们使用的是 nggd 去创建的这个自定义指令，那么自定义指令呢？它实际上就是一个被 directive 装了些装饰的一个类啊， 那么在这个类当中呢，我们可以通过 alement， r， e， f 去拿到这个指令所在的那个元素，我们可以通过 host listener 为这个元素去绑定事件。那么在页面初始化操作这个道目呢，一定要在 n g， after will in need 这个里面去做哈， 那么这个函数什么时候执行啊？是不是组建模板出传完成以后啊？那么在组建模板出传完成以后呢，你才能够获取到这个元素并且操作这个元素。

啊啊啊人潮人海中是你是我装作正派面带笑容 哦。慢慢的放松，慢慢的抛弃，同样装作并不在意你不必过分多说，自己清楚你我到底想要做些什么， 不必在乎许多，更不必难过，终究有一天你会离开我不再伤心。想起什么道理，人类是如此冷漠，曾感到过寂寞，也曾被别人 啊这个抬头上一上一二。

接下来我要讲解的内容叫做路由模块，路由模块是指专门用于放置路由规则的模块， 刚刚我们在配置路由规则的时候呢，我们是把所有的规则都放置在了跟模块当中，这其实不是一个推荐的做法，因为如果这样做的话，跟模块他所做的事情啊就太多了。 正确的做法应该是我们要单独创建一个模块，这个模块呢用于专门放置路由规则，那其实就是刚刚我所说的这个路由模块，接下来我们再让这个跟模块去依赖路由模块，这样的话才是一个推荐的做法。具体要怎么做呢？我们就切换到编辑器当中来演示一下。 首先呢，我们是不是要去创建一个路由模块啊？所以呢我们要去找到命令行工具，在命令行工具当中呢，我们要使用 nggm 这个命令去创建一个模块，这个模块的名字呢，我们就把它叫做 app rooting。 接下来呀，我们要再去添加一个选项，默认情况下，如果说我直接使用这个命令区创建模块的话，那么这个模块呢会被放置在一个单独的文件夹当中， 但是现在我不想把这个模块放置在一个单独的文件夹当中，因为我们认为 app rooting 这个模块和 app 模块啊，他应该是一对啊，他俩是互相配合去使用的，我想把他们放在平级文件夹当中，所以呢我们要加一个选项叫做杠杠 flat， 我们要让他的值呢为处。那这样的话，我们在创建这个模块的时候呀，这个模块就会被直接放置在 app 这个文件夹下面了啊，不会把它放在一个单独的文件夹当中。好，现在我们敲击回车去创建这个模块，注意看在 app 这个文件夹当中是不是多出了一个文件，叫做 app 杠 rot 点猫头点 ts 啊， 这就说明啊，现在这个模块我们就已经创建好了，我们先打开跟模块哈，在跟模块当中呢，我们把这个路由规则扛着夹子 复制一下，然后我们回到这个路由模块当中。在路由模块当中呢，我们直接使用卡特加菲亚把这个路由规则给他粘过来，那么我们向上滑动哈，在配置路由规则的时候呢，我们需要使用到 rose 这样的一个接口，我们把它拿过来， 在这我们点击快速修复。然后呢我们把每一个模块啊给他引入进来，比如在这我们需要引入 home competent， about competent news competent compete competent， 还有这个 industry competent。 好，那么在最后呢，还有一个 not fun competent。 好，那么现在路由规则所需的这个文件呢，我们都已经给他引入过来了，接下来呢，我们是不是要在当前这个模块当中去启动路由呀？所以在下面呢，我们还要去写这样一个代码，这个代码呢就是 root model。 好，我们先把 root model 引入进来，接下来我们去调用 fo root 这样的一个方法，然后呀，我们把这个路由规则呢给它 填入进来。如果说你想使用哈斯 root 的话，你再去配置这样的一个对象，在这个对象当中写 youzhouse 为处。好，那么现在呢，我们就不写了，我们先来保存这个文件， 接下来呀，还有一点需要注意，就是说在这个磨合当中，我们要去导出如特毛豆，注意我说的是导出， 为什么要导出 root model 呢？因为一会我们是不是要让跟模块去依赖这个 app rooting 模块啊，那么在跟模块当中，它会使用到 root model 里面的这个组建，这个组建呢就是 root 干奥特赖特这个组建，如果你不导出的话，那么根模块就无法用 root model， 就无法使用 root gun out light 这个组建，因为这个组建呢就是这个模块提供的啊， 所以在这我们通过 xpos 速度哈导出这个 rot model， 保存这个文件，现在我们回到这个根本画当中哈，在根本画当中是不是就不需要这个路由规则了呀？所以呢，我们就把这个路由规则呢给它去掉了，接下来呢，我们再 靠此这个素素当中呀，就不再需要去启动路由了，在这个地方我们要做什么呢？我们要去引说 app rooting 毛豆，好，那么再说我们去引入它， 那么接下来我们向上滑动哈，那么在当前这个魔法当中啊，他又不需要引入如特猫都以及入册，所以在这我们就把它去掉了。保存这个文件哈，那么接下来呢，我们切换到浏览器当中来查看一下这个效果， 注意现在是首页，我们点击关于我们点击新闻，现在这个路由是不是仍然没有问题啊，就说明啊，当前我们所做的这个代码是没有问题的。好，那么现在我们切换回这个编辑器当中哈，我们来回顾一下， 首先呢，我们在命令行工具当中使用 nggm 去创建了一个模块，这个模块呢叫做 app rooting， 这个模块的作用呀是用来放置路由规则的，但是默认情况下，如果说我们使用这样的一个命令去创建模块的话，那么这个模块呢，会被放置在一个单独的文件夹当中，而现在我们 们不想让他放在一个单独的文件夹当中，我们直接就想把它放在 app 里面，那这个时候我们需要加上一个选项哈，那么这个选项呢叫做杠杠 flight， 他的值呢为处啊，那么就是说把它直接放在 app 这个文件夹当中，不要再单独创建文件夹了。好，那么当这个模块创建完成之后呢，我们是不是把这个路由规则直接给他剪切过来了呀？ 剪切过来以后呢，我们又把它所需的这个文件呢给它引入进来了，然后我们在这个路由模块当中启动路由，然后我们又导出了 rut mode。 为什么导出如特猫头呢？因为在跟模块当中，我们不再去引入如特猫头了，但是在跟模块当中，他还要去使用如特刚奥特赖的这个组件，那这个组件呢是由如特猫头提供的， 所以在当前这个磨合当中，我们导出如他猫斗，那么根本会依赖这个什么呀？ app 如听猫斗，所以呢他也就能够去使用那个如他刚奥特赖的组建了。接下来我们回到跟组建当中哈， 在根组间当中呢，我们把这个路由规则以及启动路由的代码呀给他删掉了，然后我们仅仅是在根本化当中迎来了 app 肉体毛豆，好，这就是咱们当下所讲解的如何去创建一个路由模块的方式？