boke | angular4，我有个项目想和你谈谈

一. 后台发布系统技术选型

完成了后台接口的开发，现在开始准备开发后台发布系统，用户对象是管理员发布文章，管理用户，新增文章标签等。开发这个博客系统的初衷是希望从无到有开发出一个博客系统，然后就是希望借助这个系统进行一些前端技术的实战。光看demo和文档是很难学懂一个新技术的。

所以，这次的后台系统准备用angular4进行开发，之前学习的零碎的知识点要应用在一个小的项目中。

二.环境搭建

使用angular-cli搭建了第一个angular项目。步骤参照如下：

1.打开命令行，检查自己本机是否已经安装node和npm，确保node在6.0以上，以及npm在3.0以上。安装成功后的效果如下图所示：

  

2.在自己本机全局安装angular-cli：命令如下：npm install -g @angular/cli，安装好之后使用ng -v检查是否安装成功。安装成功后的截图如下所示：

 

3.安装完成后，使用ng命令创建一个新项目：ng new  projectName(你的项目名)

4.进入到该项目目录：cd projectName 

5.启动服务：ng serve 或者 npm start，这时angular的项目将新建成功，浏览器访问http://localhost:4200将会出现欢迎界面。

6.环境搭建成功后的项目结构如下：

  

三. 开发过程是艰辛的但是值得

开发时间断断续续经历了一个月，终于遇到各种问题，因为之前从来没有用angular开发过项目，再加上ng4在国内的资料比较少，遇到问题百度基本上解决不了，在开发过程中最需要的就是一个用angular已经开发成功的的项目，这样遇到相同的功能性问题才可以去参考，但是当时没有找到一个开源的优秀代码，遇到问题只能自己去google搜索，要么就是查阅官方文档，开发过程中遇到的各种经典问题如下： 

angular4的跨域问题解决、中间人组件通信的过程、刷新当前页面404的解决方法、如何实现一个编辑详情的功能、获得一组checkbox中哪个被选中等很多常见的问题。

下一篇文章会详细列出这些问题的解决方案，敬请期待哦。

四 第三方的故事

后台系统中用到了一些第三方的组件或者库。bootstrap所有UI用bootstrap实现，弹出框使用了bootstrap的弹出框。编辑框使用的是wangeditor的第三方组件。组件个人维护，UI不错，容易上手。