00:01
来,咱们接着上课,那下节课呢,我们整完这个表达式,来这节课我们来看一下这个常用的指令,指令呢,其实我们之前接触的还不多。这节课呢,我们把常用的指令呢,都给大家列出来,我呢先把这个写好的打开。我们照着这些功能来往下来看,来往下来看,这都是一个一个的板块啊,我们一个一个去实现它,先来看第一个板块,这有个叫价格计算器,哎,自动自动的意思,大家看一下。我这有个数量,这有个价格,当我去改变数量或者价格的时候,你会发现下面这个总价是不是一直在自动的计算啊,那我们先把这个功能实现了,来来到我们study这第一步啊。你用安拉开发第一步还是一样的套路,创建模块对象安拉解,哎,Modu,然后。
01:03
我呢在这里边传参数,比如这来个MYAPP,我强调一遍,这个名字也可以随便去写。能懂不?嗯,好,第二个我们没有依赖的模块去整个数组controller来上,然后呢是my control,因为我们现在这个不需要打包,我就直接这样去写,哎,如果说大家以后实际的开发的时候用我们那种解决方案。好,现在咱们这个区域监管了以后,第一步我先去实现的是静态页面。就是大家以后开发的时候也是这样,给你一个需求,你拿到这个需求,你应该怎么办?啊分析通常来说我们打交道最多的是谁啊,UIUI大家知道是什么?千万不要叫UI叫美工啊,那性格脾气不好的会很急的。
02:02
你们应该也知道现在有专门培训UI的,其实最早的话,确实只有美工的公主和我们打交道,美工是干嘛的?美国说白就是做做图,贴贴图。但他们那些图都是静态的。而后来应该是从UI什么时候开始火,从一四年,一四年UI特别火,突然出了UI公主,他是临界于美工之上的,也是美工只能做一些静态的图,而UI的水平要比美工要高一个等级。哎,之前有个学生是这样问的,你们公司一个项目从没有到啊?最后开发上线经历哪些流程,或者说是你刚开始有没有什么DEMO案例演示,其实一般的公司来说都有什么意思呢?当你们的领导、leader和产品经理确定一下我们这个项目具体要开发哪些需求的时候。马上要通知UI,你去出一套设计图。
03:03
而UI出的设计图比美工的高级的是UI的设计图,它可以带交互。虽然说我们拿到旧设计图,但UI它有个工具啊,它里边你比如有些button,这有个按钮,它在进行案例演示的时候会告诉你开发人员。当你们实现完这个页面,我最终让你实现的效果是点击这个button,我要跳转到哪个页面。咔咔一点,下个页面出来之后还能继续的给咱们展现。哎,这是UI,而且一般的公,你比如说现在互联网公司里面UI,比如说拿工资是拿8000块钱的话,美工的话差不多就是4000。这就是为什么特别讨厌你们叫人家美国,哎,他会觉得你故意在羞辱他,贬低他的水平,知道吧,当然了,你要是叫美,情商高一点的,你可以叫美工,叫UI。嗯,对吧,夸他一下。
04:01
来吧,回到咱们这里。那我们真实的开发当中,大家拿到设计图,就是刚刚同学说的分析它,分析是分析它的功能点。当功能点咱们自己明确了以后,你第一步先去实现的是静态页面。之前有的同学是喜欢这样去。写东西啊。就这有个头部,有个中间,有个尾部,他上来先把头部的样结构样式以及交互全部写完。然后再去写中间的板块,这样写有什么不好的问题呢?很有可能你头部全部写完了以后,再写下边,发现有一些东西和上边是有冲突的。那这样的话,你还得把上边的结构全部拆开重来,导致你之前其实做了很多的无用功,所以我们最好的方式是先把静态的啊结构勾画出来。出来以后,结构有了第二步,我们说这个结构是连接样式就有了。
05:04
第二步,你要去干嘛?我页面里面是不是有可能有数据。而我们在开发的时候,通常上来都是假数据,甚至是没有数据。那当我们静态页面实现完了以后,第二步你要实现的是数据的动态展现。把数据写活了。说白了。啊,因为这个时候你要涉及到和服务器也是给后台发送请求,调接口拿数据。把数据真正的展现在页面,你已经成功了一大半。然后我们最后要做的是交互。最后一步,实现交互。交互意思就是响应用户的操作,因为用户很有可能在你的页面上按点点啊,按按啊。哎,要做这些活,那回到我们现在。在这个里面,我们第一步还是先实现静态页面,那我现在这些区域有了来,我还得再去创建一个,这叫作用对象,首先这有个controller。
06:11
NG controller,它指向的是我们的哎,控制器对象这个名字。有了它以后,我们看人家的需求是这个。我呢,把这个拿过来,这没问题吧,上来这儿给他来一个H2吧。然后数量这后边这很明显是个input了,但这个input它的type应该是number。为什么说是number,大家看number,如果type number有个很明显的是这有一个这个可以去调调,调控你这个里边的这个number这个数值,而且你输一个字母的话,你是输不上去的。这个之前用过吧。嗯,好,然后再来看价格的,后边也是一个应付,那我就把这个哎先拿过来,这些就没用了,没用了。
07:01
总计这儿。来,给他一个。P标签。拿过来,但总计这个数量,我问他能不能写死。这肯定不能显示,而他这需要的是动态的展现数据,而且你看一下页面在这个板块,我能不能去人为的去干干涉他操作这个数据。不能,那说明这用什么来展现数据?很好,就是它,哎,大家要是能说出这个说明是对表达式这个应用理解了。那有了这个以后,我们先把当前的这个我们写的静态页面打开。现在这个是不是出来了,出来了以后利用工具去看一下,哎,这个对象也有了,作业对象有了,现在我们唯一差的是初始化数据。对不对,也就把数据动态的展现,那这个数据你说是。
08:00
写死吗?我上来就写死在页面吗?肯定不是,那也是我需要在这儿去初始化。比如说来表示价格。我来个20。再来一个scope点,还有个叫数量,哎,比如来个一,这没问题吧,那现在我页面这个数量和价格上来,肯定是想要拿这个数据了。我是不是想办法和它关联上啊?在表单项这,我们通常用的是NG model,因为它可以实现双向数据绑定。来。在这儿PRICE1。看这数量是不是来抗体,那这这个NG model这来个一。来,我们来看一下。走,你。现在这两个是不是有了,那下面这个答案应该是会了。我这个总价说白了就是他俩乘一下是不是就完了,上午我们做过一个是拼,拼数是加起来,那这一把。
09:05
把他俩放进来就OK了。刷新啊来,我们去改一个,这算的肯定是没问题的啊,下来可以自己验证一下啊。第一个哎,自动这个我们就整完了。当然了,为结构清晰一点,我可以再给他套一个div。这个首先这样写是没有任何影响的,知道不,因为我马上我再来个div,哎,再来个div,那这把我们来把这个复制过来改一改。我们要实现是第二功能,它第二个是手动啊,一个自动挡,一个手动挡,手动挡的意思是你看我说二下面会变吗。不会吧?点什么点计算,哎,但是这个好像算错了。这很明显,算不算啊?其实这不是什么难事,我来看一看。
10:01
这不手动吗?COUNTERPRISE2。算错是这算错了,你可以移上来到这儿看看,这不是这个方法吗?看到这没有,是因为什么算错了,他每次用的是。你给他换一个他不就行了吗?走你一百二没问题啊,没问题,好,那这个板块相对于上面来说多了一个button,多了一个八,那我们先来整整,先把这改成,呃,这是手动。然后这个我问一下大家能用COUNT1吗?能不能用,你就看我去操作下边的数据的时候,上边这有没有变化,没有变化说明他俩是不是没有关系啊,这也就是为什么我上来在这儿给他们分别带了个一啊这一把来我换一个。都换成二,这为了区分一下,这画个二,这画个30吧。
11:03
哎,改一改,那我们得上来把这是不是换成二。这个东西现在还能这样写吗?如果说你这样写,它还是自动的,你都控制不了它。现在看这是不是多了一个叫八,这叫。计算。啊,多了一个巴特计算,也是我们点击巴特的时候,这是不是才会算。那点击button才会算的话,说明它对应的要有个点击事件。对不对,咱们之前,哎。原生的里面是不是有个叫on click的事件?来我们这一版来看上面这APP model这些我们都用过啊,就不说了,看这个。NGK,其实也好懂。哎,调用作业对象的方法,什么时候点击时。
12:01
怎么用呢?这不是button吗?如果说以前的话,我们很有可能是on click,那现在你在安格拉里面,它自动的帮它转换为指令了,叫NG。这没问题吧,那它点击的时候对应的是不是要有一个回调函数。来订一晚get total price。Total是总价total price总价吗?注意了,你这相当于定义了个方法,一定不要忘了这加什么括号去调用它。调用意思就是点击让他执行的意思,好,那这个方法现在没有,没有你这些指令关联的这些属性或者方法,它统一的都去哪去你的作用对象里面去找。所以我们应该是在那儿去初始化一下这个方法。能懂不?哎,只有你定义了这个方法,它点击的时候才能生效。然后接下来我们要考虑的是。
13:00
当我点击的时候,这儿是不是要算一个数啊。人家上来有个20,这个20简单。但是当我这一改变,我再一计算,是不算出来最新的。那大家说我这个方法一点击,我应该去干嘛。计算他俩对不对。这没问题吧?它乘以一个scope.count。这是算出来的价格,然后呢。呢?Return。那你现在来分析一下,我这个方法一旦调用了,它最终是不是将这个值返出去了,但是你看一下返出去给谁了。给八成的八成药,他有用吗?谁要拿有是下面这个P标签。里面是不是有个表达式。所以说你这不能用人事。不能用这词儿。
14:01
那我可以这样写,大家看着啊,我scope,我能不能再给他去初始化一个total price,这是添加一个属性。他上来这两个相乘,这不60吗。对不对,这不60吗?我可以把这个我能不能先放在这儿。先放在这儿的目的是你上来就给人家去初始化显示一个数据为60。能懂吧,而接下来我一计算的话。你是不是把最新的值要重新的放到这儿?那你说这应该怎么写?这肯定是不能有人气的。很难吗?你算他这是不是显示的是我那个总价,那也就是说当你算出来新值给了他不就完了吗?这没问题吧,那我们来看一下。上来60走你。
15:02
这时候算出最新的了啊,不难啊,这个东西倒是不难。接着再往下看,这有个人员信息列表,这一看就是一个ul。而ul里面的数据,这肯定不是写死的,得需要你去遍历生成。当然,以后开发也是这样。拿到通常数据是一个数目。啊,有很多,那这个时候你肯定要去便利拿一些数据,或者说是展现一些数据。来,我们先来整一整吧。它这里边我先来个它,哎,油加。人员信息列表,那接下来它这个UI里面是不是有很多Li,然后我先把上面的指令给我拿一个,我看我们这把要用水。来用它。我呢,先给他放到这儿。
16:08
放到这儿。现在我们这个因为啊,要动态的展现一个人员信息的列表,现在我们是不是没有数据啊。没有数据的话,我可以先去干嘛,初始化一个。人员数据。如何初始化?记住了你的所有东西,数据统一的都是给dollarco这个对象,我来一个person啊,它等于个数组在这个里边。我们要放置人员信息的数据。比如来个。哎,来一个科比,来一个A奖39。那接下来我来复制几份,哎,有五份其实就能说明效果了,那接下来这些数据改一改吧。
17:06
来个二号位345。这个已经能区分开了,好,现在这个数据有了,我们接下来是要想办法拿到这个数据,是把动态的便利生成多。如何去便利他这一把,再推出一个指令,叫NG repeat。PE的这个单词本意是重复的意思吧,其实他这个指令起的不太好。他在这儿告诉大家,就是用来遍历数数组的,但repeat的这个本意其实翻译过来跟我们这个其实有点不搭啊。它不如V里边VU里面是v for,哎,最起码我看到这个东西是不是知道是放循环去变利啊,哎,这没办法,人家的语法就是这样。看一下NGP的什么作用,便利数组显示数据,哎,数组有几个元素,就会产生几个新的作用域。
18:02
现在我先教大家如何去用它。首先你是想生成多个L。而每个里面是不是要用到我这些数据啊。那你就应该这样写。在这写个NG repeat。首先这个指令先写好,写好了以后,哎,他这种遍历方式有点像方应循环。别,我这来,Person in person。我先说一下这个结构中间这个in是固定不变的,你方叶循环是不是也需要用到in?然后印右侧这一部分,它对应的就是它要去便利的目标元素。说白了,我右边这个变量的数据,我是看到这了,我就去哪找,是我当前的作用于对象啊,就问这个对象Co去要。要谁呢?要就要这个person。
19:00
在右侧这一块的东西不能随便写,你必须要哎,你的作用对象里边要有才行。而左边这个大家猜一下是什么东西。在这就相当于Y一个person等于它变离出来的每一个对象个体。左边这个是你声明的一个变量,这个变量最终接收的就是你的每一个对象。这个应该能能懂吧。左边这个不是写死的,写什么东西,但是我为了形象一点,定义了一个person。当我们遍历完,那接下来我在I里面我就可以去使用它。第一步,哎,我先问一下大家,你person现在不是个变量吗?我能不能这样person点2U2。那我通过这个对象是不是能找到它里面的属性叫UR内,但是咱们能不能直接写在Li里面。
20:03
如果直接写它相当于是是一个什么文本吧,而我现在是一个变量,所以你得加谁啊?表达式看看进去。那接下来还有一个再来一个叫P点。来,我们来看一下效果。我去刷新下。数据是不是便利生成了,这没问题,然后哎,这是便利的一个基本操作。在安拉里面,它还还给我们提供了一些属性,哎,这些属性呢,就是用NG repeat的时候自动携带的。你想我们去操作一个数组的话,平时最关心的是哪一个属性。应该是下标索引,而在他这他统一的大家看有个共同点,都是以Dollar开头。比如说我直接来在这儿测一把。
21:00
把它放进去,注意啊,你还是一样的道理,不能直接在外边写Dollar index。如果直接写在外表呢,怎么看一半?走你你直接写在外边是不是就是一个普通的文本,而我后面这个用表达式来包起来的话,它解析完你看正好是我对应的是不是下边,所以。好,这是Dollar index,那接下来再往下看,这些东西大家应该好理解。First last middle,这是不是一个是第一个,最后一个还有中间的吧?测一个first,这些它们对应的都是布尔值,你说判断是不是第一个,是不是最后一个,我就拿这个first来测一下,大家看一下走你。你看一下,除了第一个为触,剩下的是不是全部为放?
22:02
哎,那如果说我把这个换成密道呢。你说哪个没错,哪个没放上。迷的意思是中间的意思也是除了第一个和最后一个,剩下的是不是全部属于中间的?刷新走你。这没问题吧,哎,中间的三个都为处,而一头一尾为false。哎,这些用的还比较少,其实这两个。Old和even什么意思啊?一个奇数,一个偶数吧。复制一份,哪个是奇数哪个是偶数啊。奥的是奇数,一位是偶数,来,我来看一下刷新。看这个。首先你看和我这个判咪这个I的镜子的第一个为false,那你看一下我这是不是放了个OLDOLD的,刚刚我们讲的是奇数吧,那我第一个不应该是为兔吗?
23:05
说明什么?他根据谁来判断?很好,看到这个没有。没问题吧,哎,那同理,大家看啊,它这个处方肯定是间隔的。没有,没有什么问题。这是NG repeat,再给大家看一个东西。我把这些收起来。有发现什么特点没有?我这个二它是一个作用对象吧,其实下边收起来这些也属于是做用对象。有几个呢,你看着。这几个有一个共同特点,后面标了一个叫NGP的东西。注意看这是五个吧,为什么是五个作用对象呢?刚刚我们说了,NG和P在变利的时候,你数组有几个元素,就会产生几个新的作用域。
24:03
这没问题吧,对每一个作用域控制的就是一个对象里面的数据。看到没有,科比39,第二个,那肯定是二。哎,没有任何问题。来NGP用完了,我们看还有哪个没诊。先来这个吧,N击败的。Bad这个单词什么意思,知道吗?那咱们在这看吧。我呢先指个div,现在他说是用来解决表使用表达式闪屏的问题,我不知道有到现在好像没有同学问过我,你们可能是没看到你,比如说你在当前的页面来。比如说我这写个123。你打开页面,在短时间内你能看到页面闪了一下表达式。
25:02
没看到是吗?刚刚没办法,我电脑太快了,你们有的同学电脑比如说年龄超过五年了。四五年的,或者说是你们处理器比较低II5的,或者是有同学甚至有I3的。看到这个一点问题没有啊。其实我我好像也能看到啊。我得做一些事情。我刚是不是把缓存清掉了,第一个看啊,你看我在这个毕业地的时候,这是是不是使用的都是表达式啊,来看一下。走,你。看到没有,长城那个其实就是这个文本,这个语法直接显示出来了。哎,我点的好像比以前快了,以前还确确实实能看到啊,你们下来可以测一下,第一次打开页面,估计你们多多少少都能看到。哎,这是一个不好的现象,为什么如果说用户的电脑卡的话,或者网速太差。
26:05
他看到的一直是表达式。根本看到的不是要展现的数据。那这个时候就用户体验特别差。我们先来说一下为什么出现这个问题啊,为什么出现这个问题。大家想,我的angel是不是在这引入的?而我们的代码解析是不是从上往下去解析。当我浏览器引擎解析到这儿的时候,有没有去加载安键。还没有,那浏览器器根本不认识你,这个大括号是语法。他只当做是普通的文本。谁认识安格拉GS认识?也就是说,当我走到这一步的时候,安哥拉GS还没有真正的去发挥它的作用。所以哎,浏览器引擎认为这是普通的文本去把展现到页面。那接下来再往下走,走到这一步,我是不是加载完阿格拉GS了它,然后真正的开始发挥作用,一看,哎,这个表达,这两个大括号不是文本,这是我的语法。
27:09
回头再给你解析出来。啊,这是出现这个问题的原因。记住了,这个一定要理解了。然后我们讲了使用NGB可以解决这个问题,大家看如何去解决。你之前想写是个123,是不是用表达式直接包括123啊,注意NGB的。哎,NG,它是一个指令,那么指令通常的用法,我们现在用的是。作为标签属性去用。这不就是标签属性吗?其实指令还有一种用法是作为标签,但是我们现在不用它啊,标签指令,那么NG bed里面你放什么呢?就放表达式里边要放置的数据,直接搬到NG了就好了。来,我们先来看能不能显示走你。
28:02
刷新一下。这两个显示的效果是一模一样的。那NG为什么就可以解决这个问题呢?这还要说一个东西,浏览器,以及它在从上往下加载的时候,它只看标签体的内容。标签属性第一把他不过。那放到这,即使我浏览器已经不认识,没关系,我解析到这儿一看P标签中间是不是空的,空的话我就不显示任何内容。最起码用户看不到我当前的表表达式。然后往下一加载安拉GS,一旦生效了以后,他认识N的。哎,立马又把这个动态的塞到我这个P标签里。打那么的多。哎,这就是他的一个作用。你可以看一下这两个最终来你可以去干嘛,去检查一下。这不是这两个P标签吗?这两个P标签首先这多了NG的指令,我们不管它,但是你看最终的效果是不是都在P标签里面多了个123这个文本。
29:11
哎,最终的结果是一样的,手段不一样而已。手段不一样。那整完这个以后再往下还有一个我记得。N基受N基亥的,其实这个一看就大家应该是能知道他是干嘛的。你们在学jary的时候,里面有个方法叫烧害的。这用过吧。受害的控制什么显示和隐藏的来,我呢,先把这两个指令放过来来。这调整一下NG受、NG亥的两个指令,它们对应的要放置一个布尔类型NG受,如果为处就显示。当然了,没放就隐藏。害的是不是正好和他相反?这个应该好理解,来,我先来一个啊,来一个P标签。
30:06
来个文文吧。比如说我喜欢。贾新闻。二。这个不是随便写的,我可以给你证明一下。这个。这个这个电电视剧你们看过吗。对吧,我其实从来不追星啊,但是小时候感觉看这个。太漂亮了。那时候倚天屠龙记火的时候,高圆圆其实只是一个配角。知道吗?周芷若不就是他吧?那时候根本不知道什么叫高圆圆啊,现在好像高圆圆比他火。来吧,还是看这个吧。好,新来一个,我喜欢贾静雯,接下来再换一个。啊。现在有两个P标签,那如果说我用指令去控制它,让他俩去显示隐藏的话,都显示的话,我来个NG受,我应该是放处还是放。
31:07
说我不是写式的,写式的意思吗?这肯定没错,如果说我这个也想让他写式,但是我用的指令是害的呢。Hi,是不是隐藏的意思啊?那我应该是反向操作,给他一个force,能懂不?刷新一下,现在这两个是不是都有了,但这样写的话,你是写死的。我可以这样,比如说is like,我回答现在我这放了个是什么。之前不是布尔值。那现在这是什么?这很明显是个变量,也就是我最终要问这个变量要它对应的值吧,那我们应该是考虑是不是在作为一个对象里面出什么一个is like。
32:00
放到这儿,比如说我上来没触。这没问题吧,但是这样的话就有一个问题,我页面肯定是只能显示一个了。因为你一旦这为处的话,它这是不是都关联是同一个过值。所以肯定有一个隐藏了,走你。没问题,来,接下来咱们再来整一整,比如我这来一个八寸啊,比如这是切换喜欢。当我点击八段的时候,去控制这两个文本,来回的去切换显示怎么办,怎么写?首先八层点击它避免不了的,要绑定一个点击事件吧。NG,我们刚学完的可。来一个叫Switch,这没问题吧,加括号调用,那现在Switch这个方法我是不是也得去初始化一个co.Switch等于一个function,哎,大家看一下这个Switch,这是不是有个背景色。
33:04
看到没有,为什么会出现这样呢?它属于是关键字,而你这这相当于GS里面是定义了个属性,是个变量吧。之前应该给大家讲过,你第一变量之前最好不要用关键字,还有保留字。知道不,所以这来个Switch。来一个吧。你回头再看,现在那个黄色是不是没有了,哎,我说这个呢,是因为这个关键字在这儿,还好在view里边有很多的关键字,你比如说这个delete,你们先记住它。你们之后学的时候,如果说定义这个变量很直接,上来就报错了,就告诉你不能用关键字啊。好吧,那定义完这个方法了,当我点击的时候,我要去干一些什么事情啊。
34:01
你去控制页面两个文本的切换,说白了,你最终控制的是我这个布尔值的来回切换。对不对。怎么写?我要控制是不是他?取法应该会吧,我问你,我直接这样写行吗?行不行?你直接这样写的话,它相当于还是在当前作业找没有去全局找了window学校了。能懂不?所以这个时候不要忘了用它来带上。来我们来看一下刷新,哎,上来是这个,然后咔一点。没问题吧,哎,就这么没羞没臊的就把这个实现了。
我来说两句