Angular航海日志 D1.快速创建第一个Angular Web应用

Posted 2021-04-26 课工场大前端

引言

我们之前简单地学习了一下AngularJS，也就是Angular1。我们当时就说过，1到2几乎是颠覆性的升级，所以我们会从称呼上改变，之前的是AngularJS，从2开始都叫Angular。官方说后期的45678都不会有像1到2这样的颠覆性更新，而是像H4~H5一样保持向后兼容。所以我们放心学习Angular2课程。

正文

我们首先还是不要搞太多理论，先创建个项目再说。要注意的是，从2开始使用框架和之前大不一样了，之前不管是VueJS、AngularJS还是ReactJS，都像JQuery一样，使用<script>标签直接引入使用。但现在这三个框架都开始推荐使用NodeJS中的npm组件来创建项目。

Angular是由TypeScript写的，而TypeScript是ES6的超集，增加了类型支持，也就是JS从弱类型变成强类型了。。。所以我们最好也用TS写代码。

要使用TS，首先要安装Node.js，这个我们之前的文章有介绍过，不再赘述。大家自行传送过去《》。

1. 安装后后win+r进入命令行，执行命令，查看是否安装成功

node -v

安装ng提供的工具angular-cli：

npm install -g @angular/cli

2. 这里就得等他慢慢装了，如果觉得慢，可以将npm改成cnpm，方法也在上面那篇node文章有讲。

3. 安装成功后，就可以使用ng命令了

cd xxxx/xxxx(你希望创建项目的文件夹)

ng new simba-demo 

执行之后，你就会发现一大堆的输出，各种create，各种npm安装依赖，最终会生成一个文件夹。 我们推荐使用VSCode打开这个项目，如果是HBuiler也行，但要设置JS为ECMAS6模式的。

烦不了，直接运行：

ng serve

然后就跑起来了，访问localhost:4200，不出意外会看到这样的页面： 

之所以能这么跑，是因为angular-cli中有个内嵌的HTTP服务器，我们可以用它来启动应用。而且TypeScript后缀是.ts而不是.js，ng serve命令会自动将ts文件编译成js文件，从而让浏览器识别。

OK，我们依然不要着急去看源码，反正也看不懂。。。

现在框架都非常流行组件化思想，所以其实ng项目也都是被分成一个一个的组件。啥叫组件呢？比如一个商品详情页面，基本信息可能是个组件，评价列表也是个组件。基本的表现就是扩展html标签，实现对应的功能。

我们现在就来制作第一个组件,依然是命令行：

ng generate component fuck-world

好了，现在我们可以看一下代码了，如果你有java基础，就会知道src是存放核心代码的地方：

我们看到定义组件并不是一段简单的代码，而是生成了一个文件夹，里面有四个文件，直接看fuck-world.components.ts文件： 

最基本的组件包括两部分：1.Component注解 2.组件定义类

从上往下看吧： 首先是import这是ES6语法，和Java中的import其实功能差不多。

import语句定义了我们写代码时要用到的那些模块。from后面的则是告诉我们从哪里引入依赖。

同时我们也要告诉编译器我们引入了啥，这里分别是Component和OnInit。暂时不用管这两个对象是干嘛用的。

注意这个import{ sth } from where 格式，也是ES6中的，被称为解构。可以再次传送。

然后我们要声明组件了：

@Component({})这种写法也有点像Java，被称为注解。ng通过这样的方式来给组件注入元数据，当FuckWorldComponent类上使用@Component时，就把FuckWorld“装饰”成了一个Component。

我们看下注入的对象属性：

1. selector 组件在html中要表现的标签

2. templateUrl 组件对应的html文件 或者 template 直接写html字符串

3. styleUrls 样式表的数组，可以使用多个样式表

OK。下面我们来使用这个组件。到src/app/app.component.html中，也就是顶层组件的模板。我们把之前demo的代码删掉，把组件写进去：

然后可以看到浏览器中的效果变掉了，如无意外会自动刷新。

那这个效果是从哪里来的呢？组件在哪定义这段话呢？显然你已经知道了:

OK,现在我们的组件其实是渲染了一个静态的模板，显然我们应该改成动态的。怎么操作呢？我们想起在组建的ts文件中还有个东西没介绍，就是那个class类。

这个类目前是空的，只有个构造函数和实现了一个ngOnInit()接口方法，我们给这个类加两个属性进去： 

注意这里的语法，定义属性，然后冒号跟着属性的类型，又回到了强类型了。。。

然后我们在模板中使用她们：

如你所见，使用{{}}来绑定变量，而对于循环绑定数据，就跟之前的ng-repeat不一样了。我们使用NgFor指令（语法是*ngFor），内部的东西就没啥好讲的了吧，跟foreach很类似，let也是ES6的语法，如果不懂继续传送。。。

要注意，之前我们写HTML时常常不注意规范，比如在行级元素中写块级元素，或者段落标签中放标题标签。之前浏览器会包容我们，但ng不会，一定要严格按照标准来写HTML。

同时我们也使用了class样式，那么对应的样式写在哪呢？显然你也猜到了，styleUrl对应的样式文件里：

OK看一下效果：

大家都知道，组件能在首页显示出来，是因为我们在app.component.html中添加了这个组件。其实光看名字你也知道，app.component本身也是个组件，她对应的标签叫<app-root>，然后是在最外层的index.html中使用的：

那既然如此，我们自定义组件是不是也可以这样互相嵌套呢？当然也是可以的，我们再来创建个组件。

我们看到项目中又多了一个组件文件夹：

啥都不用改，直接在之前的fuck-world组件中加进去：

效果：

OK了。但此时还有个问题，子组件是静态的。组件之间需要通信，即子组件需要接收到父组件传过来的值。我们一定要知道组件编译过来是啥样子，是一段html，所以如果这样写，是没有任何卵用的。

所以要对组件进行一些修改，让她可以接收参数：

修改模板：

然后在父组件使用的时候也得修改一下：

然后我们看下效果：

是不是少了啥？不知道怎么操作事件对不对？也不知道怎么像之前ng-model那样绑定文本框对不对？

我们来试一下：

注意这里的#title和#age，这语法叫解析(resolve)，要注意这不是绑定了文本框的value，而是绑定了整个文本框对象。

然后我们绑定click事件，把事件的名字包括在括号()中就可以告诉ng要去响应这个事件。那在哪边写对应的响应呢？当然是到组件对应的类中写了：

看到了吗？定义方法的方式也不一样了，我们可以指定方法的参数类型和返回类型了，比如这个add方法，就是接收两个文本框对象，并且返回个布尔类型。

我们目前只是简单的打印一下值，如前面所说的，我们使用了obj.value。

那如果你有了一定的编程基础，肯定知道这种传参的方式非常的不OOP，因为数据都是基于控件了，非常不利于维护和扩展。所以我们来试试用对象来传参。

首先在组件文件夹下新建个ts文件：

然后在子组件中，这里是fuck-item中使用：

模板文件：

OK，现在开始在父组件中使用：

模板文件，循环子组件，同时将数据传进去：

看下效果：

OK，第一个非常简单的ng应用就到此为止了。不要问我为什么，不要问我是什么，第一章，照着写混脸熟就行了。后面我们会慢慢深入解释。

最后我们来了解一下ng serve命令是怎么去启动我们的应用的：

1.ng会查阅angular-cli.json指定一个“main”文件，这里是main.ts；

2.main.ts是应用的入口点，指定了AppModule来引导该应用，代码在src/app/app.module.ts中；

3.AppModule是模块系统，指定了将哪个组件用作顶层组件，默认是AppComponent；

4.AppComponent的模板中有一个<app-fuck-world>标签，也就是我们刚才写的，会渲染出我们的数据。

我们看下app.module.ts的代码，

介绍一下这个NgModule注解，declarations是用来声明组件，如果想用某个组件，一定要在这个地方声明她，你看到我们之前自定义生成的两个组件都在这里咯，最后一个bootstrap参数最重要，她指定了顶层组件，也就是最初始的组件。

打开文件看看吧，理解一下大概流程。