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 相关文章推荐
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
实例讲解vue源码架构
Jan 24 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
小程序转发探索示例
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短址转换实现方法
2015/02/25 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
python获取list下标及其值的简单方法
2016/09/12 Python
pycharm设置注释颜色的方法
2018/05/23 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
tensorflow 查看梯度方式
2020/02/04 Python
HTML5进度条特效
2014/12/18 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
远程教育心得体会
2014/01/03 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
给领导的致歉信范文
2014/01/13 职场文书
文明学生事迹材料
2014/01/29 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
政府门卫岗位职责
2014/04/29 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书