00:00
好,咱们今天一天的任务呢,就是要学习这个框架叫安拉GS。刚刚给大家发的东西呢,大家收到了以后是一个压缩包,那么解压了以后呢,大家会看到就是我桌面放置的这个,哎,大家进来就是这几部分。先来介绍一下这里面都有什么东西,第一部分错的,那么这个里边它是我们要敲的这个代码,哎,课堂上要去学习的代码。然后这有个files,这个里边呢,呃,待会儿需要大家去装一个Chrome插件,诶come插件大家装过没有。应该是装过进来以后,我估计你们是不是装过这个。Infinity。哎,装货进去以后。大家装过这个以后呢,你打开Chrome的话,应该能看到这种界面,就是用来管理你这个书签的,这没问题吧,好,然后需要大家一会去装一个这个NG inspector,那么这个插件呢,专门是针对我们安拉GS去用啊,比如说我们在开发安格拉的时候用安格拉开发的时候用这个插件,哎,我们得配合着他去使用。
01:12
那再下来web storm这个设置,那待会儿呢,我和大家讲这个啊,待会儿和大家讲,那我先放在这儿,其实这个现在你们不装也没关系,那下边这呢有几个库啊,这些库呢是下载好的,不过我已经在项目里面放进去了,也是我们上课直接能用。然后这有一个文档。这是安拉GS的文档,哎,我呢可以把这个先打开。上来看到阿兰GS的API解剖的文档,大家是不是都看过,嗯。再往下看,这有一个思维导图。我们先来看一下这个思维导图啊。好。来。我们先从安格拉GS入门开始啊,入门开始首先我们要知道安格拉GS是什么啊,第一个大家看这句话。
02:08
最起码你要知道它是谷歌开源的一个前端GS,这叫结构化框架,到现在为止大家应该是只学过一个结块,对吧。问下来解瑞是一个什么样的库?哎,我听到有的同学说了,它是一个GF的什么括。不知道是吧。这个函数我知道不。你想大家在学原生GS的时候,你们之前应该是去用原生的GS写过一些东西,但是那个时候你老发现,你比如说我获取一个道元素,那个时候我们用原生的怎么办?通常来说,咱们会给这个元素是不是定一个ID,或者说是class,那这个时候应该是document.get element by ID这些对不对?好,那这样的话你写吧,回头再用jary来写的话,你会突然发现会特别方便。
03:09
因为什么用解块瑞,它是不给我们分装好的,一旦说引入解块瑞这个库。全局是不是自动多了一个叫Dollar福的对象?然后我们要获取一个倒元素在它里面,通常来说传一个选择器是不是就好了,哎,那为什么这样拿过来就可以用呢?首先你要知道,你比如说我获取W元素,这相当于也是一个函数调用吧。而在解块二里面,所有的东西都先是你比如操作到嘛,先获取这个到元素,接下来我点你比如说这些and呀,End那些方法大家应该是都用过。那么那些方法,它们对应的都叫函数调用。杰瑞最明显的一个特点是,它对所有的呃操作到这些交互的方法进行了分装,最终给你暴露出来的,这叫API。
04:11
说白了就是方法,而我们用户在使用的时候只负责直接去干嘛调用啊,所以这块是一个良好的叫GS函数库,这个大家要知道。函数库。那再往下看看我们安GS,他在这说的是一个结构化的框架,现在只需要你们去记住它。哎,待会儿随着咱们学习的深入呢,慢慢是能体会到为什么叫结构化的框架的。把后边这个打开。这个是安GS的一个官网,但是这个官网现在不太行。来吧,咱们看一下吧。哎,咱们这边的网是不是还挺好的。啊。看这个挺好的。
05:01
前两天开19大,对深圳这边有影响吗?上网?哎哟。翻墙最起码翻不了。都不知道在北京有多痛苦。哎,看来也不行。咱们往下看吧。这官网倒是没什么东西啊,我这不过给大家贴出来,你们想看的话,接下来也可以去访问它。往下面咱们来看一看安格拉GS的特性和优点,来,我们打开这个大家看一下。这呢,罗列出来的就是安格拉GS的一些比较显著的特性,首先第一个双向数据绑定,声明是依赖之路,这两个大家应该到现在理解不了。但是这个应该懂啊,结尾一个逻辑。解耦听过没有?我们通常要说一个解耦性。哎,解耦性针对的是谁啊?针对的是它的耦合度吧,那什么叫耦合度呢?
06:03
这个就耦合度吗。什么叫偶幅度啊?知道同学可以说一下什么叫耦合度。或者这样,我问他耦合度高,高了好还是低了好?低的好是吧,那是耦合度是什么。其实耦耦合度你比较简单的去描述它就是。个体与个体之间的关系。是否密切?他关系越密切,证明他俩的耦合度什么越高?而我们现在互联网的开发过程中一直在追求着什么?降低饱和度。因为你降低了耦合度以后,就会避免一些牵一发而动全身的这种事情发生。
07:00
耦合度越高的话,哎,你比如说大家以后去上班。我写了一大串GS的逻辑,他们里边有很多的逻辑是相互之间耦合度,哎,特别高,如果说你去上班不知道他定义个变量,导致你们项目瘫痪了,那那其实也不能怪你,只能说他们项目。之前写的太烂,哎,就是耦合度太高了啊,下面这些完善的页面指令啊,表达验证啊,这些咱们后续都会去学啊,都会去学,先给大家有个印象。来,既然大家学过这个解剖,咱们在这儿来比较一下。哎,首先我们刚才说了解query,它是一个什么呢?GS的函数库。而几块的作用就是下面这句话。分钟解化我们的道路操作,哎,这句话相信大家能理解。能理解。因为你从原生的跨入到杰query这一块,你明显的发现你在啊开发的时候写的快了,或者说写的方便,就是杰query的作用。
08:07
那我们来看一下阿拉GS。要对比着卡卡,它呢是一个GS的结构化框架。哎,到这儿先给大家说一下吧。解宽瑞,是分装解化我的do,操作也是我上来直接操作的,是do,大家看一下这个安杰S,下面这句话主体不再是do。说白了,他关注的重点不再是道路,那是什么东西呢?页面中动态的数据。动态的数据。我们页面是不是要显示数据啊?那这些数据通常从哪来啊?这些数据是上来写死在页面的吗?不是吧,他很有可能是去发起,去问谁要发给服务器,服务器甚至会从数据库往出调这些数据。你比如说这一板块表示是我的内存。
09:03
而这个板块是页面啊。那在我重换一个图标页面内存。在我页面要显示的数据,很有可能是不是从内存里面往出拿。你说问他要吧,而用当用户去操作的话,比如说你用户去输入一些啊信息,你比如说用户名密码,我之前很有可能要发请求发给服务器,这块也是存到一个内存里面。那这样的话,我数据,呃,数据有一个双向流动的效果。而安格拉GS它就是关注的这两条线,至于说我直接操作谁,不操作谁,诶,那是它底层分装的,我们看不到,安格拉做的只是在页面和内存这两个板块之间,哎,铺设管道,也说建立桥梁,让我的数据在这个管道里面来回的流动。
10:00
所以说,安格拉GS更加关注页面中动态的数据。GS能做什么项目呢?先看这个吧。构建单页面应用,单页面应用大家听过没有?没听过是吧,那你们应该听过这个。你说这个男生笑了是吧?SPA听过吧?听过是吧。没听过吗?大宝健版。那咱们要学的不是这些大保健啊?为什么他叫square呢?来给大家说一下,那我们先来,我把这个写到阿拉这边了。写到这,或者写到这号在这我们刚刚提到一个概念叫单一应应用,而这个概念大家在以后会经常接触到的。所以要知道它,首先要知道为什么叫单页面引用啊,或者说刚刚他解写叫什么。
11:06
大写的叫surprise对不对?为什么叫它呢?它是三个英文单词的缩写,S呢代表的是。Single,然后呢,Page。这三个首字母正好是SPA。什么意思?单一的页面application的应用,哎,翻译过来就是单一面应用,那单一面应用它有什么特点?给大家讲一下。首先,他将所有的活动。局限于一个页面。啊,局限于一个页面,我们尤其咱们女生应该懂,你经常浏览淘宝或者是京东的时候,当你去点击一个物物品或者详情的时候,他是不是有可能去打开一个新的链接。
12:00
这个知道吧。淘宝里面肯定是这样。就你你比如说你上来什么主页,主页里面有很多的产品,比如衣服鞋子,那很有可能当我点击衣服的时候,咔咔在这新开了一个页面。那这样的话,它还叫单一位应用吗?不是,是因为它将剩下的活动是不是转移到这个新的页面里了。而单页面应用的特点是所有的活动都局限于一个页面。即使你点击链接去跳转的话,它不会去打开新的页面,而就是在我当前的页面。单页面应用最直观的一个就是,不管你点什么链接,即使页面有切换,我浏览器从来没有打开过新的页签。那么,它如何实现这项技术呢?哎,有同学知道这个路由了,其实它底层利用的是什么。或者我先把单位用的特点说一下啊。
13:01
第一个所有的活动仅限于一个页面。第二个是当。页面中,比如说有部分数据啊,发生了变化。他不会去刷新整个页面。而是什么局部刷新?那说到这个,大家应该知道它利用的技术是什么。你们刚刚学完no,后期又是不是学了,有一个特点是什么?或者说加出来的时候,他打的口号就是什么。哎,对。不用刷新整个页面,达到局部刷新的效果,对不对,那么它利用的就是技术,还有的同学刚我听到一个叫路由和。呃,路由是大家之后也要去学的啊,其实路由你们已经接触过了。在noe里面有一个很重要的概念,什么叫路由分发?
14:03
这没问题吧?讲这个了吗?你note里面在root里面,你是不是要去注册路由。注册路由,比如说root.get post,那么它后边第一个要写的就是你那个路由地址。一旦说注册好了,我服务器开启了。那接下来别人是不是要去访问你这个服务器啊,哎,他要请求的就是你提前注册好的这些路由地址。这叫路由。大家先要掌握的是目前这一个单页面应用,这个之后我会发给大家,我会发给大家。来回到这一块,也是安拉GS现在能去构建的,上来第一个就讲的是单页运用,包括大家之后要学view,哎,它通常来说也用在单位应用。
15:01
啊特别好,然后后边这说了一个叫web APP,那web APP意思就是双端。都有,现在我们手机上是不是要安装各种各样的APP哎。这个就不说了啊,看一下这有个应用,哎,这是之前有做好了的,利用安格拉前做好了的项目,饿了么,这个网页版饿了么大家应该熟悉。哎,咱们可以去访问一下,大家看这安JS官网,其实现在没什么东西。来访问一下这个二。这个呢,是咱们打开饿了么这个,哎网址,你怎么知道它是不是用安格兰GS写的呢?刚刚不是和大家说需要你们去装一个C插件吗?装好了以后你会看到浏览器的左上角有一个这个标志,以A开头。然后如果说当前的页面是用安格兰GS写的,你就可以点它。其实。
16:04
会出来这个板块。而这里边放置的就是当前页面的所有数据。如果说不是安拉GS写的,会有什么情况,我再点。随便找一个,这个是你们接下来要学的。大家看这是不是一个新的网站,然后我去点击一下这个工具走你。他这。This page'就是not,他告诉你什么?当前的页面是不包含安格拉GS,哎,这也是插件的一个好处啊,也是插件的一个好处。好。这个饿了么还有什么微信网页版这些呢,搭下来,感兴趣可以去看一下,还有一个咱不知道咱班同学有没有用这个牌子的手机锤子。哎,这个他们的官网也是用angel GS去写,也是用angel GS去写。
17:05
嗯,不过锤子手机官网用的安GS是四点几的版本,而我们现在要学的是一点几的版本。现在呢,我先和大家说一下安娜GS版本它的哎,几几大部分。我们要学的是一点几,而安格拉记住了还有二点几和四点几,其实四点几只是在二点几的基础上去添加了一小部分新的东西。相当于分为两大类,一点几,二点几,那么我们为什么要学这个呢?是因为一点几的语法是用的我们javascript。就是我们现在所谓的GS2点几和四点几,它用的叫script。这个。二。用的是它。那如果说我们要是二点几到四点几的话,我们得单独的去整一下,你得先学习这个语法,虽然说它最终也要被转化为GS,但对于我们来说,哎,成本有点高,是因为现在大家知道,你们知道最火的框架是哪一个吗?
18:12
已经听说了是吧,最火的就是他。再往前是RA。啊,也说安哥拉现在它市场本来就越来越小啊,越来越小,所以说大家最起码你学完这个安哥拉GS,要知道如何去运用它就够了。这没问题吧?
我来说两句