Angular-搭建本地开发环境

前端之家收集整理的这篇文章主要介绍了Angular-搭建本地开发环境前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


搭建本地开发环境

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

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

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

确定你已经安装了node 和 npm,然后:

  1. 新建项目目录(你可以暂时为其取名quickstart,以后再重命名)。

  2. 克隆或者下载@H_301_10@《快速起步》种子到你的项目目录。

  3. 安装npm包。

  4. 运行npm start来启动例子应用。

克隆

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

@H_404_56@ COPY CODE
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.

下载

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

@H_404_56@ COPY CODE
cd quickstart npm install npm start

Deletenon-essentialfiles (optional)

You can quickly delete thenon-essentialfiles that concern testing and QuickStart repository maintenance (@H_301_10@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)

@H_404_56@ COPY CODE
xargs -a nonessentialfilestxt rm rf rm srcapp/*.spec*.ts rm nontxt

Windows

@H_404_56@ COPY CODE
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 这样的在线编程环境中运行例子的唯一选择。 你将在本文档中学习其他编译和开发选择。



附录:node 和 npm

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

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

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

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

附录:为何在本地开发

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

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

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

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

  • 你不能在 plunker 里面发布你的应用

  • 编程时你不可能总是在线

  • 在浏览器中编译 TypeScript 很慢

  • 只有本地 IDE 有类型支持代码重构和代码自动完成

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

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

转载地址:

https://angular.cn/docs/ts/latest/guide/setup.html 原文链接:https://www.f2er.com/angularjs/147772.html

猜你在找的Angularjs相关文章