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

三大前端项目就剩angular没学了，在网上找了几个教程，这里总结一下，方便以后用到时查阅 创建项目 首先安装cli工具 npm install -g @angular/cli 创建一个空项目, 有两处要选择的，一个是路由，我这里是要路由的，还有一个开发css的语言，我这里选择scss，就不截图了，选完后会自动通过yarn安装依赖，稍等一会就好了 ng new pybbs-front-angular 创建好了，运行 npm run start 或者 ng serve 启动服务，然后就可以在浏览器里打开 http://localhost:4200/ 地址查看启动后的首页了 创建组件 命令 在Angular 7中，开发人员可以利用Angular CLI（命令行接口）快速地创建项目、组件和服务，这大大简化了前端开发流程。以下是对这些概念的详细说明： **创建项目** 要创建一个新的Angular 7项目，首先确保Node.js和npm已安装。接着，全局安装Angular CLI工具，使用命令： ```bash npm install -g @angular/cli ``` 安装完成后，通过以下命令创建项目： ```bash ng new 项目名称 ``` 在这个过程中，系统会提示选择是否包含路由和CSS预处理器。例如，如果选择包含路由和SCSS，命令是： ```bash ng new pybbs-front-angular --routing --style=scss ``` 创建完成后，使用`npm run start`或`ng serve`启动开发服务器，项目将在`http://localhost:4200/`运行。 **创建组件** 创建组件的命令是： ```bash ng g component 组件名称 ``` 例如，要创建一个名为"user"的组件，命令是： ```bash ng g component user ``` 这会在`src/app`目录下生成一个`user`文件夹，包含四个文件：`user.component.html`（模板）、`user.component.scss`（样式）、`user.component.spec.ts`（测试）和`user.component.ts`（组件类）。 组件的生命周期包括多个钩子，如`ngOnInit`和`ngAfterViewInit`。`ngOnInit`在组件初始化时被调用，适合用来设置初始数据或发起网络请求。`ngAfterViewInit`则在组件的视图DOM元素加载完成后触发，适合进行DOM操作。 **使用组件** 组件的定义通常包含一个选择器，例如`app-user`。在其他组件的模板中，可以通过此选择器来使用该组件。例如，在`app.component.html`中插入`<app-user>`标签即可。 **创建服务** 创建服务的命令与创建组件类似： ```bash ng g service 服务名称 ``` 如创建一个名为"user"的服务： ```bash ng g service user ``` 这会在`src/app/user`目录下生成`user.service.ts`（服务实现）和`user.service.spec.ts`（测试文件）。 **使用服务** 服务需要手动注入到需要使用它的组件中。在组件类中导入服务： ```typescript import { UserService } from './user/user.service'; ``` 然后，在组件的构造函数中注入服务，并在`providers`数组中声明它： ```typescript import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class UserService { constructor(private http: HttpClient) { } fetchGithubApi() { return new Observable((observe) => { const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; this.http.get('https://api.github.com', httpOptions).subscribe((data: any) => { observe.next(data); }); }); } } ``` 在组件类中，可以直接调用服务提供的方法，例如在`user.component.ts`中： ```typescript constructor(private userService: UserService) {} ``` 至此，我们已经了解了如何在Angular 7中创建项目、组件和服务，以及如何在组件中使用服务。这个过程体现了Angular的模块化和依赖注入特性，使得代码组织清晰，易于维护。