Angular本地開發(fā)模擬后臺(tái)接口

在environments文件夾下創(chuàng)建environment.dev.ts

const baseURL = 'http://localhost:5002/'; export const environment = {production: true,envName: 'dev',apiURL: {login: baseURL + 'login/user'} };

在angular.json文件中修改如下

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"***": {"root": "","sourceRoot": "src","projectType": "application","prefix": "app","schematics": {"@schematics/angular:component": {"styleext": "less" }},"architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": { "outputPath": "dist/ls365", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", "src/api" ], "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "src/styles.less" ], "scripts": [] },"configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true }, "dev": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true } } },"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": { "browserTarget": "***:build" },"configurations": { "production": { "browserTarget": "***:build:dev" } } },"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": { "browserTarget": "***:build" } },"test": {"builder": "@angular-devkit/build-angular:karma","options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "src/styles.less" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } },"lint": {"builder": "@angular-devkit/build-angular:tslint","options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } }}},"***-e2e": {"root": "e2e/","projectType": "application","architect": {"e2e": {"builder": "@angular-devkit/build-angular:protractor","options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "***:serve" },"configurations": { "production": { "devServerTarget": "***:serve:production" } } },"lint": {"builder": "@angular-devkit/build-angular:tslint","options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } }}}},"defaultProject": "***"

列表內(nèi)容

ngOnInit() {this.http.get('/api/mock/test.json').subscribe(data => {console.log(data);});}

5.返回結(jié)果

總結(jié)

以上是生活随笔為你收集整理的Angular Mock Data的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。