AngularJS学习之二：配置本地开发环境

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

导读：安装Angular QuickStart seed，以便在您的机器上更快，更高效地开发设置一个本地开发环境这个 QuickStart live-coding 例子是一个操

安装Angular QuickStart seed，以便在您的机器上更快，更高效地开发

设置一个本地开发环境

这个QuickStart live-coding例子是一个操场。它并不是你将要开发一个真正应用的地方。你应该在你的机器上本地化开发...... 这也是我们所认为的你应该如何去学习Angular的方法。

在你的机器上，使用这个QuickStart seed建立一个新的项目是快和容易的，QuickStart seed被维护在github上。

这个QuickStart seed live-example是 QuickStart加上app.module.ts和main.ts应用文件（下面有描述），这两个文件有利于更丰富的应用例子展示。

确保你已经安装了node和 npm 。然后 ...

创建一个项目文件夹（你可以叫它quickstart以后再重命名）。
Clone或者download（看下面）这个QuickStart seed到你的项目文件夹。
安装npm。
运行npm start去运行样例应用程序。

克隆

使用下面的这些终端命令执行以下clone-to-launch（从克隆到运行）的步骤。

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

（注：

npm install类似于maven，即根据依赖配置文件package.json来下载所需要的依赖包。

参考：https://docs.npmjs.com/cli/install。）

下载

Download the QuickStart seed （下载QuickStart seed）并且解压它到你的项目文件夹中。然后用下面的这些命令执行剩余的步骤。

QuickStart seed里面有什么？

这个QuickStart seed包含了就像QuickStart playground一样的应用程序。但是它的真正目的是为本地开发环境提供一个坚实的基础。所以，会有更多的文件在你的机器的这个目录中,其中的大部分，你稍后会学习到。

Focus on the following three TypeScript (.ts) files in the/appfolder.

重点在以下三个TypeScript (.ts) 文件，位于/app文件夹中。

app

    app.component.ts 
  

    app.module.ts 
  

    main.ts 
  

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.tsandmain.tsapplication files (described below) that facilitate richer application examples.

Make sure you havenode and npm installed. Then ...

Create a project folder (you can call itquickstartand rename it later).
CloneordownloadtheQuickStart seedinto your project folder.
Installnpmpackages.
Runnpm startto 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 (/appfolder.

main.ts

}

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

Defines the same`AppComponent`as the one in the QuickStart playground. It is therootcomponent of what will become a tree of nested components as the application evolves.
Defines`AppModule`,theroot modulethat tells Angular how to assemble the application. Right now it declares only the`AppComponent`. Soon there will be more components to declare.
`main.ts`	Compiles the application with theJIT compilerandbootstrapsthe application to run in the browser. That's a reasonable choice for the development of most projects and it's the only viable choice for a sample running in alive-codingenvironment like Plunker. You'll learn about alternative compiling and deployment options later in the documentation.

Next Step

If you're new to Angular,we recommend staying on thelearning path.

Appendix: node and npm

Node.js and npm are essential to modern web development with Angular and other platforms. Node powers client development and build tools. Thenpmpackage manager,itself anodeapplication,installs JavaScript libraries.

Get them nowif they're not already installed on your machine.

Verify that you are running nodev4.x.xor higher and npm3.x.xor higherby running the commandsnode -vandnpm -vin a terminal/console window. Older versions produce errors.

We recommendnvmfor managing multiple versions of node and npm. You may neednvmif you already have projects running on your machine that use other versions of node and npm.

Appendix: Why develop locally

Live codingin the browser is a great way to explore Angular.

Links on almost every documentation page open completed samples in the browser. You can play with the sample code,share your changes with friends,and download and run the code on your own machine.

TheQuickStartshows just theAppComponentfile. It creates the equivalent ofapp.module.tsandmain.tsinternallyfor the playground only. so the reader can discover Angular without distraction. The other samples are based on the QuickStart seed.

As much fun as this is ...

you can't ship your app in plunker
you aren't always online when writing code
transpiling TypeScript in the browser is slow
the type support,refactoring,and code completion only work in your local IDE

Use thelive codingenvironment as aplayground,a place to try the documentation samples and experiment on your own. It's the perfect place to reproduce a bug when you want tofile a documentation issueorfile an issue with Angular itself.

For real development,we strongly recommenddeveloping locally.

（编辑：李大同）

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