Angular Mock Data

Angular本地开发模拟后台接口

在environments文件夹下创建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": "***"

列表内容

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

5.返回结果

Angular Mock Data相关推荐

dbeaver mock data generator （数据库模拟数据生成）
文章目录一.前言二.功能介绍三.操作说明 1.打开Mock生成器 2.Mock生成器界面介绍 3.选择字段分配模板 4.模板参数配置 Skip Boolean Constant Boolean ...
五：Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上实 ...
SAP UI5:how to connect mock data
Created by Wang, Jerry, last modified on Feb 02, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
run webIDE application using mock data
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Mock server的实现 - run Fiori application using mock data in offline mode
Part2 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
使用Mock.js进行独立于后端的前端开发
概述 Mock.js实现的功能基于数据模板生成数据基于 HTML模板生成数据拦截并模拟 Ajax请求用法浏览器:  <scri ...
基于Angular创建后台数据模拟（译）
我们已经习惯用AngularJS来创建前后端分离的应用,同时为了便于开发也会通过在前端代码库中使用mock数据来模拟服务端的接口.使用mock数据具有以下诸多的好处: * 如果你并不是接口api的开发 ...
gulp + angular + requirejs 简单学习
一.安装gulp(已经安装了node环境) npm install -g gulp 二.在package.json文件中配置依赖插件 {"name": "xxxx&qu ...
Angular实战项目（1）
Angular 打造企业级协作平台 [外链图片转存失败(img-J0HrPiEG-1563902660799)(https://upload-images.jianshu.io/upload_imag ...
搭建angular环境
一.安装 1.先安装npm淘宝镜像一.通过命令配置验证命令 npm config set registry https://registry.npm.taobao.org 验证命令 npm con ...

Angular Mock Data

Angular本地开发模拟后台接口

Angular Mock Data相关推荐

最新文章

热门文章