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


Posted in Javascript onFebruary 19, 2019

三大前端项目就剩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

页面名 说明
user.component.html 组件模板文件
user.component.scss 组件的样式文件
user.component.spec.ts 组件测试文件
user.component.ts 组件文件

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

生命周期

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

这里只介绍二个

方法 说明
ngOnInit 组件加载时初始化变量或者网络请求时代码写在这里面
ngAfterViewInit 如果想对页面进行dom操作,最好在这个方法里操作,这个方法是在页面dom元素都加载完成后才调用的

创建服务

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

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

服务文件名 说明
user.service.ts 组件提供服务的主文件
user.service.spec.ts 组件提供服务文件的测试文件,写对服务测试的代码都放在这里面

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

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

import { UserService } from './user/user.service';

@NgModule({
 providers: [
  UserService
 ]
})

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

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/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('https://api.github.com', httpOptions)
    .subscribe((data: any) => {
     observe.next(data.detail);
     // 如果有错误,通过 error() 方法将错误返回
     // observe.error(data.description);
    });
  });
 }
}

打开 user.component.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',
 templateUrl: './user.component.html',
 styleUrls: ['./user.component.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 或者其它的框架

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

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
初识Node.js
Mar 20 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
async/await地狱该如何避免详解
May 10 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
详解JavaScript匿名函数和闭包
Jul 10 Javascript
小程序转发探索示例
Feb 19 #Javascript
JS异步执行结果获取的3种解决方式
Feb 19 #Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
基于node.js实现爬虫的讲解
Feb 18 #Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 #Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 #Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP教程 基本语法
2009/10/23 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
学习python的几条建议分享
2013/02/10 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Pytorch中.new()的作用详解
2020/02/18 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
学年自我鉴定范文
2013/10/01 职场文书
竞聘书格式及范文
2014/03/31 职场文书
闭幕式主持词
2014/04/02 职场文书
班级课外活动总结
2014/07/09 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
银行求职自荐信范文
2015/03/04 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
vue使用echarts实现折线图
2022/03/21 Vue.js
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA