安装Angular QuickStart seed,以便在您的机器上更快,更高效地开发
设置一个本地开发环境
这个QuickStart live-coding例子是一个操场。它并不是你将要开发一个真正应用的地方。你应该在你的机器上本地化开发...... 这也是我们所认为的你应该如何去学习Angular的方法。
在你的机器上,使用这个QuickStart seed建立一个新的项目是快和容易的,QuickStart seed被维护在github上。
这个QuickStart seed live-example是 QuickStart加上app.module.ts和main.ts应用文件(下面有描述),这两个文件有利于更丰富的应用例子展示。
使用下面的这些终端命令执行以下clone-to-launch(从克隆到运行)的步骤。
git clone https://github.com/angularquickstartgit quickstart cd quickstart npm install npm start
下载
Download the QuickStart seed (下载QuickStart seed)并且解压它到你的项目文件夹中。 然后用下面的这些命令执行剩余的步骤。
QuickStart seed里面有什么?
这个QuickStart seed包含了就像QuickStart playground一样的应用程序。但是它的真正目的是为本地开发环境提供一个坚实的基础。所以,会有更多的文件在你的机器的这个目录中,其中的大部分,你稍后会学习到。
Focus on the following three TypeScript (.ts
) files in the/app
folder.
重点在以下三个TypeScript (.ts
) 文件,位于/app文件夹中。
import { Component} from '@angular/core'; @Component({ selector: 'my-app',template `<h1>Hello {{name}}</h1>`})exportclassAppComponent name = 'Angular'}
所有指导和操作手册都至少有这些核心文件。每一个文件有一个不同的目的,会随着应用的发展而独立地演化。
File | Purpose |
---|---|
app.component.ts |
定义一个和在QuickStart playground中一样的AppComponent。它将会随着应用的演进变成一颗嵌套组件的树的根组件。 |
app.module.ts | 定义 AppModule,这个root module将告诉 Angular如何去组装应用程序. 现在它仅仅声明了AppComponent 。很快将会有更多的组件去声明。 |
main.ts |
使用JIT compiler去编译应用程序,然后bootstraps在浏览器中去运行应用程序。 这对于大多数项目的开发来说是一个合理的选择而在类似Plunker这样的 live-coding环境运行样例代码,这是唯一的选择。你之后可以在这系列文档中学到别的可替代的编译和部署的选择。 |
以下是原文,摘自:https://angular.io/docs/ts/latest/guide/setup.html。
Setup a local development environment
TheQuickStart live-codingexample is an Angularplayground. It's not where you'd develop a real application. Youshould develop locallyon your own machine ... and that's also how we think you should learn Angular.
Setting up a new project on your machine is quick and easy with theQuickStart seed,maintainedon github.
TheQuickStart seed live-exampleis QuickStartplustheapp.module.ts
andmain.ts
application files (described below) that facilitate richer application examples.
Make sure you havenode and npm installed. Then ...
- Create a project folder (you can call it
quickstart
and rename it later). - CloneordownloadtheQuickStart seedinto your project folder.
- Installnpmpackages.
- Run
npm start
to launch the sample application.
Clone
Perform theclone-to-launchsteps with these terminal commands.
Download
Download the QuickStart seedand unzip it into your project folder. Then perform the remaining steps with these terminal commands.
What's in the QuickStart seed?
TheQuickStart seedcontains the same application as the QuickStart playground. But it's true purpose is to provide a solid foundation forlocaldevelopment. Consequently,there aremany more filesin the project folder on your machine,most of which you canlearn about later.
Focus on the following three TypeScript (/app
folder.