Angular-搭建本地开发环境

发布时间：2020-12-17 09:31:25 所属栏目：安全来源：网络整理

导读：搭建本地开发环境《快速起步》在线编程例子是 Angular 的游乐场。它不是开发真实应用的地方。你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular。利用github 上的《快速起步》种子在你的电脑上搭建一个新项目是很快很容易的。这个Qu

搭建本地开发环境

《快速起步》在线编程例子是 Angular 的游乐场。它不是开发真实应用的地方。你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular。

利用github 上的《快速起步》种子在你的电脑上搭建一个新项目是很快很容易的。

这个QuickStart种子的live example就是QuickStart加上app.module.ts和main.ts文件 (稍后会讲到)，它能让制作更复杂的应用例子更简便。

确定你已经安装了node 和 npm，然后：

新建项目目录（你可以暂时为其取名quickstart，以后再重命名）。
克隆或者下载《快速起步》种子到你的项目目录。
安装npm包。
运行npm start来启动例子应用。

克隆

运行下列命令来执行克隆并启动步骤。

git clone https://github.com/angularquickstartgit quickstart cd quickstart npm install npm start

npm startfails inBash for Windowswhich does not support networking to servers as of January,2017.

下载

下载《快速起步》种子并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。

cd quickstart npm install npm start

Deletenon-essentialfiles (optional)

You can quickly delete thenon-essentialfiles that concern testing and QuickStart repository maintenance (including all git-related artifactssuch as the.gitfolder and.gitignore!).

Do this only in the beginning to avoid accidentally deleting your own tests and git setup!

Open a terminal window in the project folder and enter the following commands for your environment:

OS/X (bash)

xargs -a nonessentialfilestxt rm rf rm srcapp/*.spec*.ts rm nontxt

Windows

for f %i in(nontxt) do del i F S Q rd git s q rd e2e q

《快速起步》种子库里都有什么？

《快速起步》种子包含了与《快速起步》游乐场一样的应用。该应用有自己的游乐场，但是，它真正的目的是提供坚实的本地开发基础。所以你的电脑里的项目目录里面有更多文件，参见搭建剖析。

注意/app目录中以下三个 TypeScript (.ts) 文件：

src

app

     app.component.ts 
   

     app.module.ts 
   

    main.ts 
  

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; AppModule './app/app.module' platformBrowserDynamic().bootstrapModule(AppModule);

All guides and cookbooks haveat least these core files. Each file has a distinct purpose and evolves independently as the application grows.

Files outsidesrc/concern building,deploying,and testing your app. They include configuration files and external dependencies.

Files insidesrc/"belong" to your app. Add new Typescript,HTML and CSS files inside thesrc/directory,most of them insidesrc/app,unless told to do otherwise.

所有指南和烹饪书都至少有这几个核心文件。每个文件都有独特的用途，并且随着应用的成长各自独立演变。

文件	用途
`app/app.component.ts`	定义与《快速起步》游乐场同样的`AppComponent`。它是根组件，随着应用的演变，它将变成一颗嵌套组件树。
app/app.module.ts	定义`AppModule`，根模块为 Angular 描述如何组装应用。目前，它只声明了`AppComponent`。不久，它将声明更多组件。
`main.ts`	使即时 (JiT) 编译器用编译应用并且在浏览器中启动并运行应用。对于大多数项目的开发，这都是合理的选择。而且它是在像 Plunker 这样的在线编程环境中运行例子的唯一选择。你将在本文档中学习其他编译和开发选择。

下一步

如果你是 Angular 初学者，建议根据学习路径学习。

附录：node 和 npm

Node.js 和 npm 对使用 Angular 和其他平台进行现代网络开发是至关重要的。 Node 驱动客户端开发和构建工具。npm包管理器本身是node应用，用于安装 JavaScript 库。

如果你的电脑没有安装它们，立刻安装它们。

在终端/控制器窗口运行命令node -v和npm -v，来确认你运行的 node 是v4.x.x或更高，npm 为3.x.x或更高。老版本会产生错误。

我们推荐使用nvm来管理多版本 node 和 npm。如果你的电脑上已经有使用其他版本 node 和 npm 的项目，你可能需要 nvm。

附录：为何在本地开发

在浏览器中在线编程是很好的探索 Angular 的方法。

几乎每章文档里面的链接都在浏览器中打开完整的例子。你可以用这些代码做实验，或者与朋友共享你的修改，或者下载并在你自己的电脑上运行这些代码。

快速起步仅仅展示了AppComponent文件。它在内部创建了只为游乐场而准备的等价app.module.ts和main.ts。所以读者可以在零干扰的情况下探索 Angular。其他例子是基于《快速起步》种子的。

虽然有这么多的乐趣，但是...

你不能在 plunker 里面发布你的应用
编程时你不可能总是在线
在浏览器中编译 TypeScript 很慢
只有本地 IDE 有类型支持、代码重构和代码自动完成

把在线编程环境当做游乐场，一个尝试文档例子和自己做实验的地方。当你想要提交关于文档的问题或者提交关于 Angular 自身的问题时，它是重现错误的完美地方。

对于现实项目开发，我们强烈推荐在本地开发。

转载地址：

https://angular.cn/docs/ts/latest/guide/setup.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!