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

 更新时间:2019年02月19日 09:45:37   作者:朋也  
这篇文章主要介绍了Angular7创建项目、组件、服务以及服务的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

三大前端项目就剩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 或者其它的框架

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

相关文章

  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    在学习了如何简单开始一个Angular程序之后,跟着网上的教程我也来实现一个购物车功能,为了减少页面样式设计我使用了bootstrap来偷懒,现在分享给大家,有需要的可以参考借鉴。
    2016-08-08
  • Angular2 组件交互实例详解

    Angular2 组件交互实例详解

    Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义。下面通过本文给大家介绍Angular2 组件交互知识,感兴趣的朋友一起看看吧
    2017-08-08
  • angularjs项目的页面跳转如何实现(5种方法)

    angularjs项目的页面跳转如何实现(5种方法)

    本篇文章主要介绍了详解angularjs项目的页面跳转如何实现 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Angular.js中控制器之间的传值详解

    Angular.js中控制器之间的传值详解

    angular中每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据就要考虑到控制器之间参数的传递了,下面来看看详细的介绍。
    2017-04-04
  • Angular 4.x 动态创建表单实例

    Angular 4.x 动态创建表单实例

    本篇文章主要介绍了Angular 4.x 动态创建表单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Angular 利用路由跳转到指定页面的指定位置方法

    Angular 利用路由跳转到指定页面的指定位置方法

    今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS directive返回对象属性详解

    AngularJS directive返回对象属性详解

    这篇文章主要为大家纤细介绍了AngularJS directive返回对象属性的相关内容,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • angular2+nodejs实现图片上传功能

    angular2+nodejs实现图片上传功能

    这篇文章主要介绍了angular2+nodejs实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Angular 4依赖注入学习教程之ClassProvider的使用(三)

    Angular 4依赖注入学习教程之ClassProvider的使用(三)

    这篇文章主要给大家介绍了关于Angular 4依赖注入之ClassProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular 4具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • AngularJS包括详解及示例代码

    AngularJS包括详解及示例代码

    本文主要介绍AngularJS包括的基础知识,这里整理了相关资料并附示例代码和实现效果图,有需要的小伙伴可以参考下
    2016-08-08

最新评论