环境搭建说明: 1、全局安装angluar脚手架 npm install -g @angular/cli 2、初始化项目(支持scss) ng new 项目名称 --style=scss // 进入项目 cd 项目名称 运行代码可以是:serve或者 npm install(安装依赖) npm start(运行) 3、安装element npm i --save element-angular a、在跟模快app/app.module.ts文件中引入 import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { RouterModule } from '@angular/router' import { AppComponent } from './app.component' import { ElModule } from 'element-angular' // 引入实例组件ExAppComponent import { ExAppComponent } from '路径' @NgModule({ declarations: [ AppComponent, ExAppComponent, // 实例组件 ], imports: [ BrowserModule, BrowserAnimationsModule, ElModule.forRoot(), ], providers: [], bootstrap: [ExAppComponent], }) export class AppModule { } b、在src/style.scss文件下添加一行代码 @import "~element-angular/theme/index.css"; (引入element样式) 4、安装路由 npm i --save @angular/router a、在跟模快app/app.module.ts文件中引入 import { RouterModule, Routes } from '@angular/router'; import { Demo01Component } from './demo01/demo01.component'; const appRoutes: Routes = [ { path: 'demo', component: Demo01Component },]; // 这里需要注意,路由地址不能加/ @NgModule({ imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // <-- debugging purposes only ), 其他的模块写入 ] }) b、去模块下进行调用路由 <nav> <a routerLink="/demo" routerLinkActive="active">Crisis Center</a> </nav> <router-outlet></router-outlet> 5、get接口调用 a、在app文件下创建一个文件夹名为config,在config文件下创建service服务 在config.service.ts中输入 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ConfigService { constructor(private http: HttpClient) { } getConfig(myUrl: string) { return this.http.get(myUrl); } } b、app/app.module.ts文件中引入 import { HttpClientModule } from '@angular/common/http'; import { ConfigService } from './config/config.service'; @NgModule({ declarations: [ AppComponent, // 主文件 ProjectActivityComponent, // 子文件 ], imports: [ BrowserModule, HttpClientModule ], providers: [ConfigService], bootstrap: [AppComponent] }) c、去project-activity.component.ts文件下进行调用接口 引入文件 import { ConfigService } from '../config/config.service'; export class ProjectActivityComponent implements OnInit { constructor(private myServce: ConfigService) {} ngOnInit() { // 界面初始化的时候进行调用 this.showConfig(); } showConfig() { this.myServce.getConfig('http://jsonplaceholder.typicode.com/users') .subscribe((result) => { console.log(result, 'ddd'); }); } }
原文地址:https://blog.csdn.net/CuiCui_web/article/details/89354124
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。