Tiven Wang
Wang Tiven March 13, 2018
425 favorite favorites
bookmark bookmark
share share

Angular is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular itself, and Node.js runtime environment.


本文完整代码可下载自 Github

Set up the Development Environment

本文使用最新版 Angular v7.2.15

环境配置最低要求 Node.js version 8.x or 10.x and npm

Angular CLI 是开发测试构建部署 Angular 项目的命令行工具,安装在全局环境

npm install -g @angular/cli

打开命令行窗口,用下面的命令创建一个新的 Angular 项目并生成项目骨架,railway-app 是我们的项目名称你可以自定义。

ng new railway-app

这个过程需要一段时间,主要是因为需要安装 npm 依赖包。国内网络可能更慢或者失败,请设置代理 npm proxy

进入项目目录, 然后启动服务器

cd railway-app
ng serve --open

ng serve 命令可以启动服务器,监控项目文件,如果你有修改自动重新构建项目。--open或者-o选项会自动在浏览器中打开项目主页。

Project Skeleton



Angular 项目代码使用 TypeScript 语言进行开发,

Angular CLI



Sublime Text or Atom

如果简单起见可以使用 Sublime Text 或者 Atom 编辑器加装 TypeScript 相关插件。

Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

How to use Typescript with Visual Studio Code

I’d strongly recommend you to use angular-cli for developing an Angular2 app. Not only for simplicity, but because in a community we need to have a basic starter which gives us the ability to have similar structured repo. So we can understand easily the structure of an other project.

Plus, angular-cli handles Typescript compilation for you and you don’t have to deal with it in command line or from your IDE.

npm i -g typescript (no need for typings anymore since Typescript 2.0 !)

npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project

Then just run

ng serve And access to your app at : http://localhost:4200

Angular-cli compiles your Typescript and even your (sccs|sass|less) files.

When you want to deploy your app :

ng serve --prod Will also minimify JS and CSS. [1.]

How to debug the typescript source code

// TODO https://angularfirebase.com/lessons/methods-for-debugging-an-angular-application/




Similar Posts


Back to Top