宁皓网 Angular ：起步 有大用 有大大用 有大大大用

创建 Angular 项目，理解基本概念。

封面摄影：José Ramos

来自 https://ninghao.net/course/7641#info

vs code 要安装的扩展(插件)

1) prettier          #它可以用来格式化

1) Angular Essentials

1) 搜索一下 "Angular"看看

1)  auto import         #用来自动导入

1)  Npm Intellisense        #npm包 智能提示

1) Path Intellisense   (自动补全文件路径)

介绍与准备

1)介绍（起步 1）

先安装一个 Angular 命令行工具，

# npm install @angular/cli  --global

用它在本地创建一个 Angular 项目，

# cd Desktop/

# ng new ninghao-angular        #这个命令里面有 npm install功能,但是老是提示 npm install 安装不成功,我执行yarn 安装吧,使用yarn 见   /node-admin/18340    /node-admin/18338    /node-admin/18339   /node-admin/14818

#  npm install -g yarn

#  yarn config set registry https://registry.npm.taobao.org --global

#  yarn config set disturl https://npm.taobao.org/dist --global

#  yarn      

#  ng new ninghao-angular           #再执行一下 ng new ninghao-angular 吧

# ng serve  (ng run start)            #package.json中定义

# git init             #感觉上面的ng new ninghao-angular  就已经执行了 git init 命令    

# git add .

# git commit -m 'init'

# git remote add origin https://github.com/shipingzhong/ninghao-angular.git         #添加远程仓库

# git remote #查看远程仓库的名字

# git push origin master        #推送到远程origin的master分支

# git branch 

# git branch starter            #创建名为starter分支  创建分支后,,,原分支的内容就复制到了新分支上面

# git checkout -b getting-started            #创建名为getting-started分支,并切换过来   创建分支后,,,原分支的内容就复制到了新分支上面

# git branch                     #分显示当前分支为getting-started

# git push origin starter            #推送到starter    分支

# git push origin getting-started        #推送到getting-started分支

vscode vs code 上面 安装 prettier 扩展  

vscode 上 打开命令面板,输入 "format"     可以看看 文件=>首选项=>设置 输入 "format on save"

添加一个文件 .prettierrc (可以到prerrier官网查看用法)

singleQuote:true表示双引号变单引号

trailingComma:all  表示多行时,自动在最后一行加上逗号

vscode 上安装 angular 扩展包  " Angular Essentials "  里面包含了几个其它的扩展。比如 Angular Snippets ，Angular language service 等等

src/main.ts 是入口文件,需要root模块, 自己写的代码一般放在src/app/下面  app.module就是定义的root模块

appmodule是根模块

# ng generate module modules/post     #  (  生成的模块在 src/app/modules/post 目录下)    ng generate module post   #生成post模块在post目录下面  

# ng generate component modules/post    #  (  生成的组件在 src/app/modules/post 目录下)  

CREATE src/app/modules/post/post.component.html (19 bytes) #组件模板文件

CREATE src/app/modules/post/post.component.spec.ts (585 bytes)    #组件的测试文件

CREATE src/app/modules/post/post.component.ts (267 bytes)    #组件定义

CREATE src/app/modules/post/post.component.css (0 bytes) #组件样式文件

UPDATE src/app/modules/post/post.module.ts (261 bytes)        #同时更新了这个模块

vscode vs code 我安装的扩展(插件)如下

启动项目的开发服务，然后再配置一下代码编辑器。

接着再理解一下 Angular 项目的结构，了解怎么创建与使用模块组织应用的结构，

# ng g m modules/post  ( ng generate component modules/post)

创建一个组件，

# ng g c modules/post  ( ng generate component modules/post)

在组件模板里显示数据，绑定属性还有事件等等。

来自  https://ninghao.net/video/7643#info

2)创建与运行 Angular 前端项目

打开终端，确定在你的系统上已经安装好了 Node.js，

$ node -v

   v10.16.1

安装了 Node.js 会自带一个包管理工具 npm ..

$ npm -v

6.9.0

下面我们先用 npm 这个包管理工具在系统的全局范围，安装一下 Angular 命令行工具。

执行一下 npm install 要安装的是 @angular/cli，在全局范围安装一下它，使用这个命令行工具，可以创建新的 Angular 项目，还可以快速给项目创建一些需要的东西。完成以后，在终端，就可以使用 ng 这个命令。

# npm install @angular/cli --global

进入到你想要保存项目的地方 .. 比如进入到桌面上 .. 在这里创建一个 Angular 项目，执行 ng new ，后面加上要创建的项目的名字 .. ninghao-angular

cd ~/desktop
ng new ninghao-angular

问我们想要使用 Angular 的路由功能吗，输入 y ，确定使用，又提示选择 CSS 样式的格式，暂时可以选择默认的 CSS。

ng 命令会给我们创建好一个 Angular 项目，并且安装好项目依赖的东西。完成以后，进入到项目所在目录 ninghao-angular，用编辑器打开项目，我用的是 VSCode 编辑器。

在本地运行项目的开发服务，需要执行一个特定的命令，在终端可以执行一下 Angular 的命令行工具提供的，

# ng serve。

或者可以执行一下 

#  npm run start 

，这个命令是在项目的 package.json 文件里定义的，对应的要执行的具体的命令就是 

# ng serve，所以你使用哪个命令都是可以的。

命令会给我们创建一个开发服务，预览当前正在开发的这个 Angular 项目，可以打开这个开发服务的地址，默认就是这个 localhost:4200，在浏览器上打开这个地址。

现在你会看到一个 Angular 的欢迎界面。

来自  https://ninghao.net/video/7644#info

3)项目的源代码管理

用 ng new 命令创建的 Angular 项目已经给我们初始化了代码仓库，先回到终端 .. 新建一个标签 .. 在终端执行 

# git log 

， 会显示已经做好了一次提交。

下面我要去给项目创建一个远程仓库， 可以在 github 上面创建一个

https://github.com/new

，创建一个新的仓库，仓库的名字是 ninghao-angular ， 创建仓库，

 复制一下添加远程仓库的命令... 

在项目下面执行一下，

# git remote add origin git@github.com:shipingzhong/ninghao-angular.git

这样会在项目里添加一个叫 origin 的远程仓库。

$ git remote

  origin

执行 git push 把本地项目推送到项目的远程，push 到的远程的名字叫 origin，要 push 的本地分支叫 master。

$ git push origin master

这样会把本地项目的 master 分支推送到刚才我们在 github 上给项目创建的远程仓库的上面， 回到远程仓库页面，刷新一下

https://github.com/shipingzhong/ninghao-angular

，你会看到推送上来的项目。

分支

再执行一下

$ git branch

* master

项目当前是在 master 分支上， 在以后的课程里，我会创建一些不同的分支，在这些分支上做的提交我给会把它合并到 master 分支上，也就是你可以在这个分支上找到所有课程里对项目做的所有的修改。

下面再去创建一个分支， 

#  git branch starter ，

 创建一个名字叫 starter 的分支， 

$ git branch

* master

  starter

如果你想跟着这个课程做一些练习，为了保证不出问题，你可以克隆我的这个项目的远程仓库到你的本地，然后切换到 starter 这个分支， 在项目下面执行 npm install ， 这样你就会拥有一个跟我现在用的一样的项目。

这样你再跟着视频做练习的时候，就会保证不出太多问题，因为我们用的是同样版本的 Angular。

每开始一个新的课程我可能都会创建一个新的分支，然后在这个分支上去做一些提交，所以如果你想看到某个课程对项目都做了哪些修改，你可以查看对应的分支。

下面我要给当前这个课程创建一个分支并且切换到这个分支上，可以执行 git checkout -b 分支的名字是 getting-started。 

#  git checkout -b getting-started

现在会显示，

$ git branch

* getting-started

  master

  starter

项目当前所在的分支是 getting-started。

我再把这两个分支上推送到项目的远程， git push origin 先推送一下 starter ... 

$ git push origin starter    (origin 是远程仓库名,starter是分支名)

然后再推送一下 getting-started 分支。

$ git push origin getting-started

回到项目的远程仓库页面 .. 刷新一下，

https://github.com/shipingzhong/ninghao-angular

打开 Branch 下拉菜单，里面会出现项目的几个分支，有 master，starter，还有 getting-started。

来自  https://ninghao.net/video/7645#info

4)VSCode：使用 Prettier 格式化代码

Prettier 可以帮我们格式化代码，比如自动缩进，把双引号改成单引号，把长的代码格式化成多行等等。在项目里可以安装一个 Prettier 包，然后用命令去格式化代码，或者也可以直接在编辑器上安装一个 Prettier 扩展。

在 VSCode ，打开安装扩展的界面，可以打开命令面板，搜索 install ， 

然后搜索要安装的扩展，prettier ， 可以安装一下 Prettier ，Code formatter 。

安装了这个扩展以后，编辑器里会多出一些格式化相关的命令，先打开项目里的一个文件，然后打开编辑器的命令面板，

ctrl+shift+p

可以搜索一下 format ，会列出相关的命令，

 比如格式化文档，或者格式化所选代码等等。

打开 VSCode 编辑器的配置， 搜索一下 Format on save，保存文件的时候自动格式化。

这样在保存代码文件以后，会自动格式化， Prettier 可以配置一下， 在项目的根目录下面，添加一个配置文件，名字是 .prettierrc， 相关的配置是一个 json 格式的数据。

可以使用的配置选项你可以参考 Prettier 的官方文档， 先添加一个 singleQuote ，把它设置成 true。

再添加一个 trailingComma ， 设置成 all ， 在多行的时候自动会在最后一行添加逗号。

下面可以打开一个代码文件试一下。

注意这里有个对象，现在最后一个项目的结尾没有逗号，保存一下文件，会自动在这里添加一个逗号。

再把这个单引号，换成双引号， 保存文件，Prettier 会自动把双引号换成单引号。

再试一下缩进 ... 保存文件， Prettier 可以帮我们修改不正确的缩进，默认会缩进两个空格，你可以通过配置选项，设置成自己想要的缩进尺寸。

来自  https://ninghao.net/video/7646#info

5)VSCode：安装 Angular Essentials

使用 VSCode 编辑器开发 Angular 项目，可以在编辑器上安装一些 Angular 相关的扩展。打开编辑器的命令面板，搜索一下 install ，执行安装扩展 .. 再搜索一下 angular。然后可以安装一下 Angular Essentials 这个扩展。

它其实是一个扩展套装，里面包含了几个其它的扩展。比如 Angular Snippets ，Angular language service 等等 。这些扩展可以帮助我们更有效的开发 Angular 项目。

来自  https://ninghao.net/video/7647#info

基础

6)理解初始化的项目结构

用 ng new 创建的 Angular 项目，根目录下有一些文件，一般就是一些配置文件， 项目的主要代码是在 src 目录的下面，src 表示 source。

src 里的这个 main.ts 是应用的入口， 在这个文件里创建了一个 Angular 应用， 创建这个应用时候需要一个 AppModule，这是应用的 root 模块。

我们写的代码一般会放在 app 目录的下面。

目前这里有一个 app.module， 这个文件里定义的就是应用的 root 模块， 我们可以根据自己的需要去创建不同的模块。

模块里会包含一些东西，在这个 AppModule 里面包含了一个组件叫 AppComponent ， 打开 app.component ， 应用的界面都是由组件构成的，你可以根据需求去创建不同的组件,然后把它们组合在一起使用。

组件可以是个类，这个类要用 @Component 装饰器装饰一下，给这个装饰器提供一个配置选项参数可以配置一下这个组件.. 里面可以设置组件的 selector ， 这里用的是一个元素选择器叫 app-root。

也就是这个组件会放在 app-root 这个元素上，打开 src 下面的 index.html ，你会发现这里用了一组 app-root。

templateUrl 可以设置组件的模板的位置， 这里用了一个 html 文档， 就是这个 app.component.html，

打开这个文件，这个文档里的内容，就是你在应用的首页上看到的那个欢迎界面。

删除掉这些内容， 添加一组标题元素， 里面输出一个 title ， 这里用了特别的格式可以输出组件里的数据， 把要显示的数据放在两组大括号里面。

保存一下 ... 回到浏览器，再预览一下现在的应用首页，页面上会显示项目的名字，ninghao-angular。

现在我们看到的这个界面的显示就是 AppComponent 这个组件。

这个组件要显示的就是一个标题元素，包装的是一个 title 属性的值。

打开 AppComponent ， 修改一下它的 title 属性的值。

现在界面上显示的就是修改之后的 title。

定义组件的时候，可以用 styleUrls 设置一下组件要用的样式文件的位置 ，打开 app.component.css， 设置一下 h1 元素的样式，先用一个 text-transform 属性，值设置成 uppercase，然后再用一个 letter-spacing ，添加点字间距，大小是 3px 保存一下这个样式文件.. 再去预览一下。

你会发现界面上显示的这个大标题样式的变化。

来自  https://ninghao.net/video/7649#info

7)模块：Modules

在 Angular 项目里我们可以使用模块来组织应用的结构，可以按照应用的功能或者资源去创建一些不同的模块，每个模块里都可以包含一些相关的东西。比如组件、指令，服务等等。

Angular 项目里面至少需要一个模块，我们用 ng 命令创建的项目里面，会包含一个 AppModule， 这个模块是在 app.module.ts 文件里定义的。它是我们的应用的根模块，Angular 在创建应用的时候用到了这个模块。

下面我们可以再用命令去快速生成一个模块， 在项目所在目录的下面，执行 ng generate ，生成项目需要的一些东西可以使用这个命令，后面加上要生成的东西的名字，我需要一个 module，也就是模块， 接着跟着模块的名字，比如 post。

这样会创建一个叫 post 的模块，放在 post 目录的下面，如果想设置一下存储要创建的这个模块的位置，模块的名字就可以是一个具体的位置，比如 modules/post，这个命令的后面还可以跟着一些选项， 先使用默认的选项执行一下这个命令。

# ng g m modules/post    (ng generate module modules/post)

你会发现生成了一个模块文件，放在了 src，app， modules，post 目录的下面 。

回到项目，打开 app ... modules ，post 下面的这个 post.module.ts，在这个 ts 文件里定义了一个叫 PostModule 的模块 。

模块是一个类，这个类要用 @NgModule 装饰器装饰一下，这个装饰器来自 @angular/core 这个包。

在给这个装饰器提供的对象参数里面，可以配置一下这个模块。

在 declarations 里面，可以列出这个模块里包含的一些东西，比如组件，指令，管道之类的东西。

在模块里要使用其它模块提供的功能，需要把这些模块放在这个模块的 imports 里面，这里导入了一个叫 CommonModule 的模块，它来自 @angular/common。

在这个 CommonModule 模块里导出了一些 Angular 项目里常用的指令还有管道， 也就在我们这个 PostModule 的 imports 里，添加了这个 CommonModule 模块，就可以在 PostModule 模块里使用在 CommonModule 模块里导出的一些功能，就是一些常用的指令还有管道。

如果在这个 PostModule 里面还需要另外一些模块里导出的功能，我们需要把这些模块的名字添加到这里的这个 imports 里面。

来自  https://ninghao.net/video/7650#info

8)组件：Components

应用的界面是由各种不同的组件组合在一起构成的，下面我们先去创建一个组件.. 在终端，项目所在目录的下面，执行 ng generate 这回生成一个 component ，组件，名字是 modules/post ， 执行一下这个命令。

# ng g c modules/post    ( ng generate component modules/post)

命令会给我们生成一个叫 post 组件，放在了 src.. app，modules，post 目录的下面， 这里的 post.component.ts 是组件的定义， post.component.spec.ts 是组件的测试文件。 post.component.html 是组件的界面(模板文件)， post.component.css 是这个组件需要的样式文件。

另外命令还自动更新了一下 post.module。

回到项目，先打开 post.module，文件的一开始导入了刚才我们用命令创建的 PostComponent 组件，然后在这个模块的 declarations 里面，列出了这个模块里包含的一些资源， 这里会出现 PostComponent 组件。

下面打开这个组件看一下， 组件是一个类，这个类需要使用 @Component 装饰器装饰， 给它一个对象可以配置这个组件相关的东西， selector 是 app-post ，templateUrl 是组件的模板文件的位置， styleUrls 是组件的样式文件的位置。

打开 post.component.html ， 它是组件的模板文件， 现在这个模板文件里有一个段落标签，文字是 post works。

然后打开 app.component.html 文件，它是 AppComponent 组件的模板文件，在它里面，可以用一下 PostComponent，添加一组 app-post， 因为 PostComponent 设置的 selector 就是这个 app-post。

回到浏览器预览一下 ... 现在界面上并没有显示 PostComponent 组件里的东西， 控制台上会出现一些错误 ... 提示 app-post is not a known element。

如果要在 AppComponent 组件里使用 PostComponent ... 我们还需要做点设置，打开 PostComponent 所在的模块，PostModule。

在这个模块里，需要添加一个 exports， 导出这个模块提供的东西， 因为在其它的地方我们要使用这个模块里PostComponent ，所以需要把它导出来。

再打开 AppModule， 在这个模块的组件里要使用 PostModule 模块里导出的组件，所以在这个模块的 imports 里面，需要导入 PostModule， 输入 PostModule ... 按一下 tab ... 编辑器会自动在文件顶部导入这个模块， 如果没有自动导入，你需要手工添加这行代码。

再回到浏览器预览一下，如果你发现还没有正常显示组件内容的话，可以回到终端，先停止一下项目的开发服务，然后重新再运行一下。

# ng serve

现在你会发现，界面上会显示一个 post works，这个文字就是 PostComponent 组件要显示的内容。

来自  https://ninghao.net/video/7651#info

9)显示数据（插值，ngFor，ngIf）

在组件的模板里面，可以用一种特别的形式显示组件里的数据。先打开 Post 组件，在这个组件里添加一个属性，名字叫 title，可以直接给它设置一个值，比如 Posts。

在组件的模板里，可以绑定输出组件的 title 这个数据，打开这个组件用的模板文件，post.component.html，去掉里面的东西，添加一组 h3 标签，绑定输出组件的数据的写法是用两组大括号，然后里面是数据的名字，比如 title。

打开浏览器预览一下，你会发现页面上会显示 Post 组件里的 title 属性的值。这个值的周围用了一组 h3 元素包装了一下。

如果组件里的这个 title 的值有变化，Angular 会自动显示变化之后的数据。

*ngFor

再回到 Post 组件，在这个组件里添加一组数据，名字可以叫 entities， 一个数组，数组里添加几个项目，每个项目是一个对象，对象里有个 title 属性，设置一下它的值。继续再添加两个一样结构的数据项目，每个数据项目里面都有一个 title 属性。

打开组件的模板，在这个模板里如果想输出组件里的一组数据，可以用一个 ngFor 指令，先添加一组 ul 元素，里面添加一个 li 元素，在这个元素上，用一下 ngFor 指令，注意前面需要加个 * 号。

它的值可以这样设置一下，let entity of entities，这里的 entities 是组件里的一组数据，前面的这个 entity 是我们给当前项目起的一个名字。ngFor 这个指令会循环 entities 数组。

在这个 li 元素里，先添加一组标题元素 .. 里面绑定输出一个 entity 里的 title 属性的值。因为 entities 里的每个数据项目里面都会包含一个 title 属性。

在浏览器上预览一下，你会发现，页面上会显示出我们在 Post 组件里添加的 entities 这组数据，每个项目都会是一个 li 元素，里面包装的文字就是每个数据项目里的 title 属性的值。

*ngIf

判断条件然后决定是否要显示某些元素，可以用一下 ngIf 这个指令。回到组件，先给 entities 里的数据项目再添加一个 body 属性，随便输入一行文字..

现在 entities 里的这三个数据项目里面，前两个都有 body 属性，只有最后一个数据项目里没有 body 属性。

打开组件的模板文件，在 li 元素里添加一个 p 标签，里面绑定输出一个 entity 的 body 属性。

回到浏览器预览一下，现在显示的数据列表里会包含数据项目的 body 属性的值，不过最后一个数据项目里并没有 body 属性，但是这里仍然输出了一个空白的 p 标签。

回到组件的模板文件，在这个段落标签上，添加一个 *ngIf，判断的条件是 entity 的 body 属性，意思就是，如果 entity 里有 body 属性，就输出这个段落元素，如果没有，就不会输出这个元素。

再去预览一下。这次你会发现，最后一个列表项目里面，没有输出空白的段落标签，因为这个数据项目里面没有 body 属性。

来自  https://ninghao.net/video/7652#info

10)属性绑定（Property binding）

绑定属性的值可以使用插值的形式，就是用两组大括号，打开 Post 组件，在这个 li 标签里面，添加一组 a 标签，用它包装一下 entity.title，在这个 a 标签上添加一个 title 属性，它的值可以绑定输出一个 entity.title。

回到浏览器，鼠标放在列表项目的上面，显示的提示就是 a 标签的 title 属性的值。 检查一下源代码，你会发现 a 标签上有一个 title 属性，它的值就是内容的标题。

绑定属性还有一种方法，是用方括号的形式。方括号，title，绑定一个 title 属性，值是 entity 的 title 属性的值。

回到浏览器再预览一下，鼠标放在这个列表标题的上面，仍然会显示一个标题。

使用这种绑定属性的方法可以绑定更多的属性，因为元素的很多属性并不直接能在元素上使用，比如 textContent 属性，它的值是元素里包含的文字内容。如果你用插值的写法就不能在元素上绑定这个属性。你不能直接在 a 标签上用 textContent 属性设置它的值。绑定这些标签本身并不直接支持的属性，可以使用方括号的形式可以绑定它们。

方括号 textContent，它的值可以是 entity 的 title 。然后去掉 a 标签之间绑定输出的 entity.title。

到浏览器上预览一下，列表上仍然会显示原来的标题文字，这里显示的文字是我们绑定的 textContent 属性的值。

来自  https://ninghao.net/video/7653#info

11)事件绑定（Event binding）

在元素上可以绑定一些事件，在这个 Post 组件里面先添加一个事件的处理方法，名字可以叫 removeItem，在这个方法里先简单的控制台上输出一行文字，remove。

打开这个组件的模板文件，在这个 li 元素里再添加一个 button 元素，按钮文字是 remove。在这个按钮元素上绑定一个 click 事件，绑定事件用的写法是一组括号，里面是绑定的事件的名字，比如 click 事件，就是点击事件。它的值是事件的处理方法，就是在这个元素引发生点击事件以后要做的事情。

用一下刚才我们在组件里添加的 removeItem()。回到浏览器，按一下列表项目里边的 remote 按钮，触发了点击事件，会执行组件里的 removeItem 方法，这个方法做的事情就是在控制台上输出一个 remove。

改进事件处理方法

下面我希望在点击了 remove 按钮之后，可以真正的删除掉当前项目。回到组件模板，在这个 ngFor 指令里面，先用分号分隔一下，然后输入 index as i ，这个 index 是当前项目的索引号，这里我们把它命名成了小 i 。

把这个索引值交给 removeItem 方法。 回到组件，找到 removeItem 方法，让它接收一个 item 参数，类型是 number，这个 item 的值可以是内容列表项目的索引号。

方法里面重新设置一下组件的 entities 属性的值，它的值是 this.entities 用一下数组上的 filter 方法，给它一个方法，方法有一个 entity 参数，表示当前项目，还有一个 index，它是当前项目在数组里的索引号。

方法 return 的是 index !== item 的项目。

回到浏览器再试一下，按一下列表项目的 remove 按钮，现在可以在列表里移除掉对应的内容项目。

来自  https://ninghao.net/video/7654#info