Angular7创建项目、组件、服务以及服务的使用

三大前端项目就剩angular没学了，在网上找了几个教程，这里总结一下，方便以后用到时查阅

创建项目

首先安装cli工具

npm install -g @angular/cli

创建一个空项目, 有两处要选择的，一个是路由，我这里是要路由的，还有一个开发css的语言，我这里选择scss，就不截图了，选完后会自动通过yarn安装依赖，稍等一会就好了

ng new pybbs-front-angular

创建好了，运行 npm run start 或者 ng serve 启动服务，然后就可以在浏览器里打开 http://localhost:4200/ 地址查看启动后的首页了

创建组件

命令 ng g component user 执行完后，会在 src/app 目录下生成一个user的文件夹，里面有四个文件

如果想把组件都放在一个文件夹里管理，也可以在创建的时候加上一个文件夹名字，比如把所有的组件都放在 components 文件夹里，命令就是这样的 ng g component components/user

使用命令创建组件有个好处就是cli会自动把这个组件引入到 src/app/app.module.ts 文件里，这样直接在其它文件里使用 src/app/user/user.component.ts里定义的selector,一般这个名字都是 app-xxx 后面xxx就是这个模块的名字，比如这里的user模块，就是 app-user

生命周期

angular的生命周期有很多，看下下图

这里只介绍二个

创建服务

命令 ng g service user 执行完后，cli会自动创建两个文件在 src/app/user 文件夹里

如果想把服务也都放在一个文件夹里管理，可以在命令上加上一个服务的文件夹名字，如 ng g service services/user