小程序游戏怎么开发_Angular7创建项目、组件、效

摘要: Angular7建立新项目、部件、服务及其服务的应用 本文关键详细介绍了Angular7建立新项目、部件、服务及其服务的应用,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。...

Angular7创建项目、组件、服务以及服务的使用       这篇文章主要介绍了Angular7创建项目、组件、服务以及服务的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

创建项目

首先安装cli工具

npm install -g @angular/cli

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

ng new pybbs-front-angular

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

创建组件

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

如果想把组件都放在一个文件夹里管理,ponents 文件夹里,命令就是这样的 ponents/user


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

生命周期

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

这里只介绍二个


ngAfterViewInit 如果想对页面进行dom操作,最好在这个方法里操作,这个方法是在页面dom元素都加载完成后才调用的

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

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


服务创建好了之后,没有创建组件那么方便了,还需要自己配置一下,打开 src/ponent.ts 文件

在文件内引入,然后将服务注入到 providers 里

import { UserService } from './user/user.service';
@NgModule({
 providers: [
 UserService

首先添加一个服务 user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from 'mon/http';
import { Observable } from 'rxjs';
@Injectable({
 providedIn: 'root'
export class TopicService {
 constructor(private http: HttpClient) { }
 fetchGithubApi() {
 return new Observable((observe) = {
 const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
 this.http.get('/ 如果有错误,通过 error() 方法将错误返回
 // observe.error(data.description);

ponent.ts 文件,使用这个服务里定义的方法,代码如下

引入服务文件,然后初始化,这里初始化有两种方式,一种 private userService: UserService = new UserService(),另一种是通过构造方法注入

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';
@Component({
 selector: 'app-user',
 ',
 styleUrls: ['./ponent.scss']
export class UserComponent implements OnInit {
 constructor(
 private userService: UserService
 ) { }
 ngOnInit() {
 this.userService.fetchGithubApi()
 .subscribe(data = console.log(data), error = console.log(error));

说明:上面例子中请求接口用的是 angular 内置好的 rxjs 模块,你也可以换成流行的 axios 或者其它的框架

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站