02. 尚硅谷_AngularJS_HelloWorld.avi原创

来。这边呢，就是开发第一个安GS应用，当大家把上面这些了解了以后，诶了解了以后，我们就可以来到我们的项目，这先把这些全关了。大家看一下导哪个啊，接下来你们不是要往前倒项目吗？你们夹了以后，这是不是有个扣的，导这个就行了，没问题吧，这里应该会导，哎，应该会倒，好那我就直接进来了啊，然后打开这个里面，这有三部分。Prepare的表示是写好的。Study是咱们课堂上要去敲的。笔记是给大家整理的安格拉GS的一些笔记啊，然后呢，我们来到study这块。函数分为几部分，GS test还有练习，练习是我们要学习完安格拉GS语法才能去做，而GS这一块我先说一下。

首先大家看，这有两个文件夹。它们里面分别放置了两个阿拉GS的库啊，而这两个库你看这个就行了，这两个库一个是1.2的，一个是1.5的，我们刚开始会用1.2这个，这叫老版本，它里面有点语法不一样。而后期我们会用这个1.5.5的，这个是一点几里面相对来说比较新的。也说你如果说开发用一点几的版本啊，用这个肯定没问题。啊，因为这两个呢，是想让大家看到一些从它过渡到到它的一些进化的过程。然后下边有一个解query，是因为我们要与解query去做对比。来做比较。再往下我把这个收起来，Test里面，这个就是我们要整的一些知识点啊，都在这里面，都在这这里面放着。没问题吧，好。

来，咱们从test这儿开始看。看之前呢，我呢先把一个写好的效果给大家看一下，咱们先把这个效果整一整。我呢，就把这些先关了啊，咱整洁一点。效果都是不的。这个应该没问题吧。首先我们能看到的是上面一个输入框，下面这有文本，后边是不是空的，刚开始当我上边的input输入的内容发生改变的时候，下面是不是头部的去显示我输入的内容啊。能看懂吧，那其实这个用原生的也不难啊，现在我们先用解剖来剪一剪。这个呢是写好的，我来到study下边啊，这个j query在这儿。我们在这儿去写一下。大家看一下第一个我已经把什么解块这个库是不是引进来了，接下来我们去写一下应该怎么写。

是不是？天哪，我讲20分钟了才提醒我。漏了没问题。用第一步是不是要写一个大括号，里边要写什么东西？是不是写他？上来第一步不应该请他吗？那我问一下大家这个的作用是什么？什么什么家的。什么加载完毕？对。说白了，是他。文档加载完毕。那么你们之前是不是还用过一个叫什么。

在原生的里面，我们上来是不是要写个它温点二号的，那么它的作用是什么？这个是。整个页面加百。那有的同学可能会问，那么这两个的区别不是一样的吗？而且大家之前存在一个误区啊，存在一个误区，这个文档加载完毕是和谁一样，有没有见过这个document点。这个没见过是吗？咱班同学怎么有点懵啊？啊。当你们ready没见过？他表示，我们一块说吧。Dollar佛加一个括号啊，他上来写的这一步不是和分along一样，记住了它的作用和document ready一样，而document.ready表示的是文档加载完毕，就是刚刚有的同学说的是页面的结构加载完毕。

而问点lo，我这写了一个，整个页面加载完毕。那么整个页面里面包含的可能有。是吧，你比如说图片这些乱七八糟。说白了，页面里面有什么，我加了什么，必须得全部加载能力，那这样的话，为什么这两个谁更快执行？这应该毫无疑问的，他这是不是文档代表的，其实就是什么结构。结构加载完毕。这个要知道，这个有可能是一道笔试题，就是要考大家这个。来吧，我写完发去了，我们先把刚才那个功能实现一下，先把页面的结构去写一下，上面一个input，那么接下来还有个P标签对不对，比如这是您输入的内容。

后面的XSPA上来是没空的，这没问题吧，我呢先把咱们这个，哎静态页面打开，不就是它吗？接下来我们要实现的和人家的效果同步，当input里面输入内容了，下面是同步给我显示。那接下来怎么做啊？怎么做？你首先你应付的时候输入内容。当它输入内容发生改变的时候，我是不是要去给下面动态的把上面输入内容是填充到下面啊，那最起码我得知道你能想到的是应付这肯定要有个世界。对不对。这没问题吧，那上来我们应该去干嘛，咱们是不是应该先是拿到这个。

Input input拿到了以后，这是它，然后给他绑定一个世界。用什么世界比较合适？啊，上来时候你能想到这个change。传给他。Function，这没有你吧。那接下来呢？首先它一输入内容，这肯定会调用了。接下来我想的是获取到它输入的内容是不是动态的，塞给他就OK了。没问题吧？那接下来我们首先要拿到它这个内容，比如挖一个value，如何去拿。BA。你们思路能跟得上吗？能吧，这个Y6现在我是不是拿到了，那接下来我们要考虑的是三点那个spend。

这没问题吧？接下来有个方法叫HTML用过吗？这个应该是用过三乙，它是不是就OK了。来，我们先来看我刷新一下啊，然后我去输入它。下面有变化吗？然后我又点了一下任意地方说明什么。说明我们绑定的时间不对。当你输入的时候，也是在我input文本框的内容发生变化的时候，是不会调用T事件的，什么时候调用啊？失去焦点的时候，所以还不能用什么气，我们应该是用这个叫keep up。K up什么意思啊？键盘也是当你按键按下台行的一个吧，那而这个呢，正好是我们想要的，你比方说我输一个A。

我咔一出下边是不是就同步出来了啊，所以说你看着啊。这不就没问题了吗？这是用解块RY实现它，哎，用解块RY实现它，然后在这list.value大家上来想这个this的问题啊，其实还有一个，你们为什么没说这个Dollar啊。我们用race的是原生GS里面的race吧，而在结块里面，我是不是可以将这race分装成一个，这叫什么结块对象？分装成铁块对象的目的是什么？使用解困对象的方法。用什么方法？哎，这把不是六了吧，来我们看看。刷新走你。是不是也没问题啊。

这是用节拍来实现它，这个大家能听懂吗？能听懂，那接下来来我给你们看一把，用安JS如何去实现它，哎，这些东西会有吧。你看啊。大家平时啊，如果说我们开的这种页签多了的时候，你比如说你这是不是有可能想全屏去看它，然后整完了以后，我是不是又想翻回来找一下目录，这个时候你会发现目录是不是收起来了。知道我说的意思吧。然后你比如说我想快速的找到他，知道点哪个吧。不要一个一个去翻，等到你们真实的开发当中，你项目的层次是很深的，这个时候你比如这看到这个没有。你一上去。这应该是有单词的。看到。Scar from source，它会滚动到了吗？你资需要你当前资源的地方，注意看我现在的叶叉是不是在这个解放实线，这然后点一下这个找你，它会快速的去定位，这没问题吧，哎，方便一点啊方便一点。

好了，我们用解化，这实现了，接下来我来用阿法减S整一遍。注意看下面这，我上来已经提前把安格拉GS这个库引好了，我现在引的是1.2元引说引的是老版本。然后我把刚刚那个功能整整上面语音库的。接下来还是一个P标签，你输入的。内容是。这不静态的页面吗？那接下来。我来去写点东西，你们先不要管是什么NG。APP。因为他刚刚是不是有没有看到这是个空串啊。现在我就不用写啊，不用写我就写了它，接下来我在这写东西叫model。

我随便写啊。我先给大家把这个功能实现了。Your name。接下来。打开我们当前的页面来看一下。这个功能就实现了。然后你回头再来看一下我们简答，你看到这个和结块这个对比哪个简单一点。简单还是解的简单？很明显是解放人的简单，为什么？我有写一行的JS吗？没写吧？我很明显没有写GS，然后我只是在标签体，体内也是标，这叫标签属性。咔咔就写了三个东西，然后这个功能就实现了，而且细心的同学你会发现一个问题。这个差别其实不大啊，其实你仔细的看我这个安格拉GS这个响应要比他这个要快。

快那么一点点。哎，主要是我电脑太快了。如果大家电脑卡一点的话，你会发现这个杰瑞的很明显没有我GS这个效果好。来先整出这个效果，就是让大家对这个lgs感兴趣一点啊，现在我问一下来我有去操作大幕吗。咱没有像解块一样，我是不是先拿到一个大对象给他去绑定相应的事件，没有吧，但是我现在很明显，我在我input里面输入的数据是否会自动的流到了下边这个地方。那这个时候你回头再来看一个东西，我们上来讲阿拉GS的时候，他与杰克瑞对比，再想一下这句话。它的主体不再是do，而是页面中动态数据。

这样的话应该是啊，有一点感觉的。大家接下来的任务是把这个解压了，把当前的这个项目导进来，然后呢，把刚刚那些东西实现了，你先不要管它是什么，哎，先把这个效果实现自己去改了一下，然后需要大家做的事情是安装一下这个插件。这边不是有个插件吗？这一个来我说一下。这有更多工具，这是不是有扩展程序啊，需要大家做的是把这个拖进来就OK了，这没问题吧。这是你们需要做的事情，那再说一个，刚刚咱没说。这是不是有个web设置，这个web设置啊。是什么东西呢？那我来写点啊，你们平时写这个Q标签怎么写啊？

自己敲是吧，这样。是吗？这是一个。我这个肯定要比你们方便。我们是不是就就挑了三个字母，哎，这这这叫快捷的，也叫代码模板，代码模板，再比如说你比如你们写GS的时候打写log怎么写啊。很有可能是自己去挑他是不是，然后我们onesto给提供了一些快捷的方式。当你调出这个命令，按下K键，它会自动去给你补全你要想要的东西。如何去设它呢？可以加下来，我先把这个视频。