Angular 博客全栈实战

课程简介

本课程从最基本的知识入手，在实战开发中讲解组件、服务、指令、模块等，学会解决页面导航、服务器通讯、数据展示、表单验证等问题，使之能熟练使用 Angular 和 TypeScript 开发组件式单页应用。

作者介绍

殷迦南，极客学院前端工程师，擅长 PC/Web 端单页应用（SPA）开发，掌握 HTML5/CSS3 等前端标准，熟悉 ES6/7 语法及更高等前端规范。

课程内容

导读：项目介绍分析

需求

我们需要一个简洁的博客前台单页应用（包含后端），需要有以下功能：

• 目录
  • 从后端获取数据渲染列表；
  • 点击列表跳转到对应的文字页面，同时路由更改。
• 文章
  • 后端提供数据为 Markdawn，需要转换成普通格式；
  • 提交留言功能；
  • 每篇文章下方展示相应的留言列表。
• 其他
  • 标题、导航、个人信息均从后端获得。

页面基本样式如图所示：

分析

后端部分

• 框架：Express
• 数据库：MySQL

前端部分

• Logo、标题和小标题属于头部部分；
• 个人信息、导航、版权信息属于右侧部分；
• 中间内容部分为文章的列表以及显示文章内容的部分；
• 从后端拿到的文字内容要对其 Markdown 的形式进行解析。

（1）新建项目

为了我们之后方便写 CSS，这里采用 SaSS，当然原生的 CSS 或者 Less 也是可以的。原生的 CSS 不需要加后边的——style 参数，使用 Less 的话只需要把后边的 SaSS 改成 Less 即可。

ng new myproject --style scss

（2）进入项目目录并运行：

cd myprojectnpm start

这时候我们的第一个项目就运行起来了，打开地址：127.0.0.1:4200。

现在，我们的项目已经正常运行了。

第01课：开发项目组件

第02课：使用路由改造项目

第03课：依赖注入

第04课：Angular 表单

第05课：Express 基础知识

第06课：配置 MySQL 数据库

第07课：部署服务端

第08课：管道

第09课：与服务器通讯

第10课：构建和部署

阅读全文: http://gitbook.cn/gitchat/column/5a40bc5c55091c1a88d9254e