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中的事件
Sep 23 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
学习javascript文件加载优化
Feb 19 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
js实现盒子移动动画效果
Aug 09 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
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python_LDA实现方法详解
2017/10/25 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Django实现分页显示效果
2019/10/31 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
经典公益广告词
2014/03/13 职场文书
我为自己代言广告词
2014/03/18 职场文书
技术负责人任命书
2014/06/05 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
财务人员入职担保书
2015/09/22 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书