前言

本文的商城后台页面地址如下，先睹为快，再说实现。

https://yitala-store.firebaseapp.com

本文继续介绍angular2实战的相关内容。之前的实战严格说起来并非实战，因为都只是在在前端开发，没有数据库和服务端支持，没有数据库和服务端的项目就像行尸走肉一样，没有灵魂。本项目将加入firebase做数据库和服务端，结合商城后台的简单业务，实现CRUD，文件上传，下载，最终部署一个真正可以运行的网站。你没有听错，是最终可以部署到网络上访问的网站，如上文的链接（注意：上传页面操作特别慢，要翻墙才行）。学习本文，读者需要有自行搭建angular2的种子工程的能力，阅读和实践大概需要花你半天时间。

CRUD效果图 文件上传下载效果图

涉及知识点：

1，angular2一些非常基础的知识，component，router；

2，ng-bootstrap angular2版本的bootstrap。

3，firebase，angularfire2

git地址https://github.com/linweiwei123/yitalastore-admin-ng2.git

运行工程：

前提条件，必须安装了node，npm，webpack。

1） npm install 

2)  npm run start  到此就可以运行了，访问localhost:3000

从零开始

上面的工程是最终的结果，现在我们从头开始一点点的开发。

使用本工程，删除掉products文件夹，upload文件夹，share下的common文件夹，以及删掉他们相关的引用，使之成为一个干净的工程。

一，引入ng-bootstrap

ng-bootstrap是bootstrap4的angular2扩展，还处于beta阶段，但是这点不妨碍我们尝试使用。

安装npm install --save @ng-bootstrap/ng-bootstrap

在app.module.ts中导入

import{NgbModule}from'@ng-bootstrap/ng-bootstrap';

在app.module.ts的@NgModel({})的imports数组中加入

NgbModule.forRoot()，

如此ng-bootstrap就引入完成了，接下来我们来封装一个模态框，可以用来弹提示消息，用过bootstrap朋友不会陌生，就是model。

二，封装提示框组件 MessageComponent

这种公共的组件我们按照之前设计的框架最佳实践，放在share模块中，所以在share下创建一个messageComponent。代码如下，非常简单

message.component.ts message.component.html

@Input msg:string是用来传递弹框消息的。

然后要在app.component.ts中申明，

最后就可以在你想用的地方使用了，使用方法如下

在你想用的地方都可以使用此方法来弹出提示框。

当然bootstrap还有很多东西，时间控件，轮播图，分页，tab，等等，无法一一讲述，读者可以举一反三，自行拓展。

三，创建firebase账号，引入到工程中。

firebase，是实时数据库，结合前端可以做一些android app，ios app还有我们的web app。在被google收购以后现在功能已经非常强大，在12月8日的google开发者大会中，引人注目。firebase简直是前端人员的福音，使用它你可以不需要自己弄后端的东西，就可以构建一个完整的app，实时数据库，文件存储，以及其他非常强大的功能。本文就实时数据库和文件存储来做个简单介绍。

注册一个google账号，如果你有了的话就不用注册，然后根据https://firebase.google.com的入门指导创建一个应用，添加一些数据（可以后面自己用代码新增数据，删除数据，更新数据）

实时数据库

从这里可以非常直观的看到数据库的情况，一个实时数据库存储了一些json，storage存储了一些图片文件。

接下来要把firebase引入到工程中，

npm install angularfire2 --save

引入firebase生成的app相应的初始化配置信息；

如此，firebase就应用到应用中了。

另外，还有个非常重要的一点，千万注意，需要将数据库规则改成read，write改为true，否则我们没做权限认证无法CRUD数据，Database和storage都需要改。

四，使用angularfire2实现数据的CRUD

创建products.component.ts，products.component.html 相关代码见源码，都有非常清楚的注释。

需要特别说明的是，database是时时数据，只要你改变了，他自行会推向各个端，你可以多开几个浏览器试一试，就像websokit一样，这一点常常可以用来做聊天工具。我看到firebase官网的demo中有一个是android／ios的聊天app（非常爽，现在开发一个简单的聊天工具只要1一个小时）。用firebase开发，简直无脑。具体实现细节就不一一阐述了，有兴趣的读者可以阅读源码，或者与我联系。

五，使用firebase sdk实现图片上传与下载

具体实现阅读源码。这里需要特别注意，为什么不直接使用angularfire2实现图片的CRUD，而要使用firebase的sdk呢，因为angularfire2还没有实现相关的typescript声明，就是*.d.ts文件，这点我咨询了angularfire2的主程他说未来考虑实现。查询了相关资料，可以使用angularfire2中国的呢firebaseApp来实现，不用再去下载一个firebase.js,更不用在index.html中引用firebase.js

由于国内的原因，firebase storage不通，所以这个功能对于部署在国内使用的功能，意义不大。上传图片和下载可以考虑用七牛云的js sdk来替换。

六，全球化部署

好霸气的名字，不过确实也是，firebase hosting可以实现全球部署，你发布的网站在全球都能访问（部分功能中国不能访问，如storage）。发布也十分简单，就是敲几个命令。

1）安装发布工具

npm install-g firebase-tools

2）初始化应用

如果是在我的工程基础上做的，就跳过这个步骤，我已经做了。

如果是读者新建的工程，执行 firebase init，提示要发布上去的文件夹时，不要默认选择public，改成dist（后面会解释）

3）添加文件

这一步firebase工具会去找含有firebaseConfig的html文件，如果有就跳过，把找到的内容发布上去。这里非常重要，读者一定要认真，我们最终的文件是编译后的dist包，firebaseConfig最终回打到dist下的index.html中，所以我们要把dist文件发布上去。

编译生成dist，执行npm run build:prod ,编译好后生成一个dist文件夹，

4）发布 

执行firebase deploy，耐心等待几分钟，

在浏览器中就可以输入网址  <your project name>/firebaseapp.com,本文的就是yitala-store.firebase.com,就能查看到部署到全球的网站了。

总结

本商城后台实现了一些简单的CRUD功能，使用了ng-bootstrap和firebase。大概我花了一天半的时间完成。感觉angular2插件真是非常丰富，非常好用。同时也感觉firebase之强大，但是也非常遗憾，firebase感觉在国内几乎不可能用到生产中，只能是用来自娱乐。这里推荐一个国外友人的工作日记的网站https://ng2-todo-app.firebaseapp.com/ ，这种轻量加简单的还是可以用一用。最后寄语与全中国前端开发人员共勉，希望祖国早日融入互联网怀抱。

作者按：最近换了工作，非常忙，学习的时间非常有限，希望自己过阵子能够多写一些更有深度的文章。