Tips for @angular/cli-第1篇:mock-data放哪儿?

在项目开发过程中,不可避免地要编造一些模拟数据。

@angular/cli 对模拟数据的管理做了很好的支持,我发现还有很多道友不会用,这里做一个小示范。

angular-cli.json里面暗藏的利器

angular-cli.json这份配置文件是给编译器读的,所以很显然,它非常重要不是吗?

在这份文件里面有一个assets配置项,请看:

0_1517284325070_1.png

assets的本意是“资源”、“资产”,也就是说,在使用ng build进行编译的时候,这个配置项所指向的目录和文件都会被当成“资源”看待。

OK,既然如此,那我们就可以把编造的静态模拟数据放到这里了。比如,我们在src/assets目录下面新建一个mock-data/user.json,就像这样:

0_1517284457970_2.png

用ng build打包之后,这份user.json就会被原封不动地输出到dist目录了,就像这样:

0_1517284542426_3.png

自定义目录

有一些道友喜欢折腾,他说,我不喜欢在assets目录下面放东西,我想自定义一个目录来放这些模拟数据。

当然OK啦,你可以在angular-cli.json里面增加一个配置项:

0_1517284632872_4.png

然后你就可以在my-test-data里面编写模拟数据了:

0_1517284665976_5.png

ng build之后,my-test-data这个目录也会被原封不动输出到dist里面:

0_1517284714591_6.png

如何加载模拟数据?

OK,我会写模拟数据了,那么写完之后怎么加载呢?

来尝试一下最新的HttpClient吧,它比原来的Http服务用起来更简单了,就像这样:

0_1517284811115_7.png

看一下浏览器里面的网络面板:

0_1517284838880_8.png

界面长这样:

0_1517284857090_9.png

小结

@angular/cli是一款极其强大的开发工具,它提供了大量的功能来简化我们的开发过程,有了它之后,我们的开发过程会如虎添翼。

本例所涉及到的所有代码都在这里,请自行查看调试: https://gitee.com/mumu-osc/OpenWMS-Frontend

去试试吧!

by:大漠穷秋(原创不易,请保留签名,谢谢!)

👍

@angular/cli 官方在gitter上的聊天组在这里 https://gitter.im/angular/angular-cli , 来飚两句英文吧。

@admin 飚不动…

此回复已被删除!
登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待