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 相关文章推荐
过虑特殊字符输入的js代码
Aug 05 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
js中的this的指向问题详解
Aug 29 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
webpack打包单页面如何引用的js
2017/06/07 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
layui实现三级联动效果
2019/07/26 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python getpass实现密文实例详解
2019/09/24 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Django models filter筛选条件详解
2020/03/16 Python
银行学习十八大感想
2014/01/11 职场文书
保护水资源的标语
2014/06/17 职场文书
银行先进个人总结
2015/02/15 职场文书
后勤个人工作总结
2015/02/28 职场文书
音乐之声观后感
2015/06/04 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js