零、前言

网络开发自诞生以来已经走过了漫长的道路。今天,我们需要快速、健壮和引人入胜的网络应用,而渐进式网络应用是前进的方向。在本书中,我们将使用两个最流行的框架——Angular 和 Laravel 来构建强大的网络应用。

Angular 是创建现代快速 PWA 最流行的前端 JavaScript 框架之一。除了非常通用和完整之外,Angular 还包括用于生成模块、组件、服务和更多实用程序的 Angular CLI 工具。另一方面,我们有 Laravel 框架,这是一个开发 web 应用的强大工具,它探索了范式约定对配置的使用。

这本书给你一个实用的知识,从零开始使用带有 Laravel RESTful 后端的 Angular 构建现代全栈网络应用。它将带您了解使用这两个框架进行开发的最重要的技术方面,并演示如何将这些技能付诸实践。

这本书是给谁的

这本书是为刚接触 Angular 和 Laravel 的开发人员准备的。需要了解 HTML、CSS 和脚本语言,如 JavaScript 和 PHP。

这本书的内容通过查看现代工具和技术涵盖了软件工程生命周期的所有阶段,包括但不限于 RESTful APIs、基于令牌的身份验证、数据库配置以及 Docker 容器和映像。

这本书涵盖了什么

第 1 章了解 Laravel 5 的核心概念、介绍了 Laravel 框架作为开发 web 应用的强大工具,并探讨了范式约定对配置的使用。我们将看到,开箱即用的 Laravel 如何具备我们构建现代 web 应用、基于令牌的身份验证、路由、资源等所需的所有功能。此外,我们将了解为什么 Laravel 框架是当今开发网络应用最流行的 PHP 框架之一。我们将学习如何设置环境,查看 Laravel 应用生命周期,并了解如何使用 Artisan CLI。

第 2 章TypeScript 的好处、介绍 TypeScript 如何让您编写一致的 JavaScript 代码。我们研究它包含的特性,例如静态类型和其他在面向对象语言中非常常见的特性。此外,我们还研究了使用最新版本的 ECMAScript 的新功能,并发现 TypeScript 有助于我们编写干净且组织良好的代码。在本章中,我们将看到 TypeScript 相对于传统 JavaScript 的优势,了解如何使用静态类型,并了解如何使用接口、类和泛型以及导入和导出类。

第 3 章了解 Angular 6的核心概念深入Angular,这是开发前端 web 应用最流行的框架之一。除了非常通用和完整之外,Angular 还包括用于生成模块、组件、服务和更多实用程序的 Angular CLI 工具。在本章中,我们将学习如何使用新版本的 Angular CLI,了解 Angular 的核心概念,并掌握组件生命周期。

第 4 章构建基线后端应用T5】是我们将开始构建示例应用的地方。在本章中,我们将使用 RESTful 架构创建一个 Laravel 应用。我们将仔细研究我们在第一章中简要提到的一些要点,例如使用 Docker 容器来配置我们的环境,以及如何填充我们的数据库。我们甚至将检查如何使用 MySQL Docker 容器,如何使用迁移和数据库种子,以及如何使用 Swagger UI 创建一致的文档。

第 5 章使用 Laravel 创建 RESTful API-第 1 部分,将介绍 RESTful API。您将学习如何使用 Laravel 框架的核心元素——控制器、路由和有说服力的对象关系映射(ORM)来构建 RESTful API。我们还展示了我们正在构建的应用的一些基本线框。此外,我们将更仔细地观察一些您需要熟悉的关系,例如一对一、一对多和多对多。

第 6 章使用 Laravel 创建 RESTful API 第 2 部分继续我们构建示例 API 的项目,尽管在这一点上,我们在 Laravel 还有很长的路要走。我们将学习如何使用一些在 web 应用中非常常见的功能,例如基于令牌的身份验证、请求验证和自定义错误消息;我们还将看到如何使用 Laravel 资源。此外,我们将看到如何使用斯瓦格文档来测试我们的应用编程接口。

第 7 章带 Angular CLI 的渐进式网络应用涵盖了自上一个 Angular 版本以来影响 angular-cli.json 的变化。angular-cli.json 文件现在已经改进了对多个应用的支持。我们将看到如何使用 ng add 命令来创建一个 PWA,以及我们如何组织我们的项目结构,为一个可扩展的项目留下一个单一的基础。此外,我们将看到如何使用 Angular CLI 创建服务工作和清单文件。

第 8 章处理 Angular 路由和组件,这是我们来到单页应用(SPAs)最重要的部分之一,也就是路由的使用。幸运的是,Angular 框架为处理应用路由提供了一个强大的工具:@angular/router 依赖关系。在本章中,我们将学习如何使用其中的一些功能,例如路由插座和子视图,并且我们将看到如何创建主-细节页面。此外,我们将开始创建前端视图。

第 9 章创建服务和用户认证,是我们将创建许多新东西的地方,我们将执行一些重构来记住导入细节。这是一个以有规律和进步的方式学习新事物的好方法。此外,我们将深入研究 Angular 框架的 HTTP 模块的操作和使用,现在称为 httpClient。此外,我们将研究拦截器、处理错误、使用授权头,以及如何使用 r oute guards 保护应用路由。

第 10 章包含 Bootstrap 4 和 NgBootstrap 的前端视图解释了如何使用 Angular CLI 中新的 ng add 命令将 Bootstrap CSS 框架和 NgBootstrap 组件包含在正在运行的 Angular 应用中。此外,我们将看到如何将我们的 Angular 服务与组件连接起来,以及如何使用后端 API 将它们组合在一起。我们将学习在我们的后端应用编程接口上配置 CORS,以及如何在我们的 Angular 客户端应用中使用它。我们还将学习如何处理 Angular 管道、模板驱动表单、模型驱动表单和表单验证。

第 11 章构建和部署 Angular Tests ,讲述了如何安装、定制和扩展 Bootstrap CSS 框架,以及如何使用 NgBootstrap 组件,如何将 Angular 服务与组件和 UI 接口连接起来。我们将学习编写 Angular 单元测试,配置应用 linters(针对 SCSS 和 Tslint)以保持代码一致性,创建 NPM 脚本,以及创建 Docker 映像并部署应用。

充分利用这本书

命令行、Docker 和 MySQL 的一些知识会很有帮助;但是,这并不是完全必需的,因为所有命令和示例都附有简短的说明。

您需要在机器上安装以下工具:

  • Node.js 和 NPM
  • 码头工人
  • 代码编辑器—我们建议您使用 Visual Studio 代码
  • 建议使用 Git 源代码管理,但这不是必需

下载示例代码文件

你可以从你在www.packtpub.com的账户下载这本书的示例代码文件。如果您在其他地方购买了这本书,您可以访问www.packtpub.com/support并注册将文件直接通过电子邮件发送给您。

您可以按照以下步骤下载代码文件:

  1. 登录或注册www.packtpub.com
  2. 选择“支持”选项卡。
  3. 点击代码下载和勘误表。
  4. 在搜索框中输入图书的名称,并按照屏幕指示进行操作。

下载文件后,请确保使用最新版本的解压缩文件夹:

  • 视窗系统的 WinRAR/7-Zip
  • zipeg/izp/un ARX for MAC
  • 适用于 Linux 的 7-Zip/PeaZip

这本书的代码包也在 GitHub 上托管在https://GitHub . com/PacktPublishing/hand-On-Full-Stack-Web-Development-with-Angular-6-and-Laravel-5。如果代码有更新,它将在现有的 GitHub 存储库中更新。

我们还有来自丰富的图书和视频目录的其他代码包,可在【https://github.com/PacktPublishing/】获得。看看他们!

下载彩色图像

我们还提供了一个 PDF 文件,其中包含本书中使用的截图/图表的彩色图像。你可以在这里下载 https://www . packtpub . com/sites/default/files/downloads/handsonfulstackwebdevelopment with angular 6 and laravel 5 _ color images . pdf

使用的约定

本书通篇使用了许多文本约定。

CodeInText:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟网址、用户输入和推特句柄。这里

就是一个例子:“所有使用 Composer 的 PHP 项目在根项目中都有一个名为composer.json的文件。”

代码块设置如下:

{
 "require": {
     "laravel/framework": "5.*.*",
 }
}

任何命令行输入或输出都编写如下:

composer create-project --prefer-dist laravel/laravel chapter-01

粗体:表示一个新的术语、一个重要的单词或者你在屏幕上看到的单词。例如,菜单或对话框中的单词像这样出现在文本中。下面是一个例子:”

搜索chapter-01文件夹,点击【打开】

Warnings or important notes appear like this. Tips and tricks appear like this.

取得联系

我们随时欢迎读者的反馈。

综合反馈:发邮件feedback@packtpub.com并在邮件主题中提及书名。如果您对本书的任何方面有疑问,请发电子邮件至questions@packtpub.com

勘误表:虽然我们已经尽了最大的努力来保证内容的准确性,但是错误还是会发生。如果你在这本书里发现了一个错误,如果你能向我们报告,我们将不胜感激。请访问www.packtpub.com/submit-errata,选择您的图书,点击勘误表提交链接,并输入详细信息。

盗版:如果您在互联网上遇到任何形式的我们作品的非法拷贝,如果您能提供我们的位置地址或网站名称,我们将不胜感激。请通过copyright@packtpub.com联系我们,并提供材料链接。

如果你有兴趣成为一名作者:如果有一个你有专长的话题,你有兴趣写或者投稿一本书,请访问authors.packtpub.com

复习

请留下评论。一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢?然后,潜在的读者可以看到并使用您不带偏见的意见来做出购买决定,我们在 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们的书的反馈。谢谢大家!

更多关于 Packt 的信息,请访问packtpub.com