Install Node & the Angular CLI

教师：在本课程中, 我们需要几个工具, 我们将逐步安装和添加它们｡ 例如, 稍后将添加MongoDB｡ 我们需要的是节点｡ js的｡ 首先, 因为我们将编写并运行Node｡ js代码, 我们的服务器端逻辑, 而且因为即使Angular需要它, 即使我们不创建自己的节点应用程序｡ 不是因为角度使用节点｡ js语言的特性, 但是因为Angular实际上是一个具有更复杂的构建工作流的框架｡ 因此, 我们以开发人员的身份编写源代码, 并将其转换为在浏览器中运行良好的代码, 这在Angular中要复杂一些, 因为Angular为一个用户的类型脚本设置了一个超JavaScript｡ 因此, 一种完全基于JavaScript的不同语言, 这一点很重要, 它不会在浏览器中运行｡ 为了让它运行, 我们需要编译它, 它会为我们完成｡ 别担心｡ 但是最后进行编译的任务运行程序是Node｡ 例如js｡ 因此, 这将贯穿整个开发过程｡ 我们不需要为此编写任何代码, 但这是一些在后台发生的事情｡ 不仅是TypeScript JavaScript编译, Angular代码本身也需要捆绑和优化, 我们需要通过剥离未使用的代码并将其缩小来减少代码大小｡ 而所有这些都是节点处理的任务｡ js, 当我们正在开发应用程序时, 或者当我们基本上完成它时｡ 和节点｡ js也将用于此｡ 所以我们需要它有两个原因, 为了节点｡ 我们为后端和Angular构建工作流编写的js代码｡ 要了解有关Angular和Angular工作流程及其工作原理的更多信息, 请务必查看专门介绍Angular的课程｡ 因为虽然我会在这门课中大体上介绍一些角度的基础知识, 但我确实希望你知道关于角度的基础知识｡ 如果您以前从未接触过Angular, 那么本课程不适合您｡ 因此, 在排除了这些问题之后, 请下载Node｡ js来自节点｡ js的｡ org, 在那里, 选择最新的版本10. 1在我的情况下, 如果你面临的问题, 回落到旧版本｡ 但一般情况下, 建议使用10个｡ 1或任何最新版本｡ 只需点击它, 它将下载一个安装程序, 通过它你可以走｡ 它既适用于Mac OS, 也适用于Windows, 还有所有的Linux, 它应该会自动给你正确的下载｡ 一旦你成功地安装了它, 通过安装程序, 我们可以考虑设置一个Angular应用程序, 因为这实际上是我们在本课程中将要开始的｡ 为此, 我们将使用另一个工具, 即Angular CLI｡ CLI代表命令行界面, 它是创建角度应用程序的缺陷方式｡ 由于我提到的构建工作流更加复杂, 我们需要许多工具来编译代码､ 优化代码, 而我们自己设置所有这些工作非常麻烦, 而且容易出错｡ CLI为我们提供了一个项目设置, 在这里所有这些都得到了处理, 我们可以专注于编写Angular代码｡ 我们的逻辑｡ CLI是这样安装的, 它使用NPM节点程序包管理器, 通过此处的第一个命令在我们的计算机上全局安装CLI工具｡ NPM（节点程序包管理器）与Node一起安装｡ js自动执行｡ 所以如果你安装节点｡ js, 您将拥有NPM｡ 现在, 让我们安装CLI｡ 我已经有节点了｡ js安装, 所以我可以直接快进到这一步｡ 要安装CLI, 您应该打开终端或计算机上的命令提示符, 然后运行NPM（此节点程序包管理器命令, 可在Node中使用）｡ js的｡ Install-g for globally, 因为我们希望在我们计算机上全局安装Angular CLI, 以便我们可以在计算机上的任何位置使用它｡ 该CLI软件包的名称为@angular-cli｡ 并确保不要打错, 命名是很重要的｡ 您可以添加一个@latest来获取最新的版本, 但默认情况下它应该提供给您该版本｡ 现在在Windows上, 这个命令应该是这样的｡ 在Mac和Linux上, 您可能需要在此命令前面添加sudo, 以获得执行此命令的正确权限｡ 然后按Enter键, 并在系统提示时输入密码｡ 然后, 它将从NPMs存储库下载该CLI包并将其安装到您的计算机上｡ 这可能需要几秒钟到几分钟的时间, 一旦完成, 我就会回来｡ 安装完成了, 在我的例子中, 我在安装过程中遇到了一些错误, 但这没有问题, 只要它以一些输出结束, 其中提到了软件包名称和版本, 并说更新或添加了8个, 或者数字实际上可以不同｡ 所以如果你看到类似的东西, 它成功了｡ 您可以忽略其间发生的任何错误, 它能够从这些错误中恢复｡ 安装完成后, 我们可以使用CLI创建一个新的Angular项目, 并在整个课程中将Node､ Mongo和express添加到该项目设置中｡ 但让我们从前端开始, 因为这是我们快速在屏幕上看到东西的方式｡ 因此, 让我们创建一个新项目, 然后导航到要在其中创建项目的文件夹｡ 一旦进入该文件夹, 您就可以在计算机上使用CD命令｡ 使用ng new创建一个新项目, ng new是一个命令, 现在由于CLI包而可用, ng基本上是一个命令, 因此可用｡ 然后是这个项目的名字, 我会把它命名为mean-course, 当然, 你可以选择任何你想要的名字｡ 只要确保它不是以数字开头, 也不是被命名为test, 这是被禁止的｡ 但其他的都可以｡ 平均路线应该工作, 一旦你点击回车, 它将建立该项目｡ 它会在那里创建很多文件｡ 其中大多数是该工作流的配置文件｡ 我们不需要担心他们｡ 它也会给我们一个小的虚拟应用程序, 我们可以从它开始｡ 它还将安装所有依赖项, 如Angular框架, 以及框架所依赖的其他依赖项｡ 而且还有几个构建的或工作流依赖项｡ 编译TypeScript代码的依赖项, 优化代码的依赖项, 诸如此类｡ 所以这可能需要一段时间, 我会回来一旦它完成｡ 现在, 一旦它完成了, 你可以导航到新创建的文件夹与cd, 然后该文件夹的名称｡ 在那里, 只需运行ng serve即可启动一个仅用于开发的服务器｡ 这不是您将用来部署它的服务器｡ 我将在课程结束时向您展示如何部署该应用程序｡ 这是一个仅用于开发的服务器, 允许您预览应用程序｡ 双击NX HTML文件将不起作用, 因为这将使用文件协议而不是Http协议, 因此我们需要的许多功能都没有启用｡ 这就给了我们一个真正的Web服务器在我们的机器上运行在这个地址｡ 您可以在这里看到, 默认情况下是Http：//localhost：4200, 然后您可以转到浏览器, 只需访问本地主机4200｡ 在该URL上, 您应该会看到CLI默认提供的类似以下内容的虚拟起始页｡ 现在设置好了, 我们当然要处理我们的代码, 为此我们需要一些IDE或一些高级文本编辑器, 这样做会更容易｡ 现在, 您可以使用任何您想要的IDE, 如Sublime､ Atom､ WebStorm｡ 在本课程中, 我将使用Visual Studio代码｡ 现在让我们把它设置好, 并在下一节课中打开我们的项目｡