Mac上Angular的环境搭建（1211）

参考网址：

1. 官方网站

要求

1. Node.js
   下载地址，当然也可以用brew install node来安装。

2. npm package manager
   当我用brew安装node.js的时候，npm也一并被安装了

安装Angular CLI

npm install -g @angular/cli

配置编辑器

官网的第四步就开始编辑Angular组件了，但工于利其事必先利其器，一个文件一个文件的编辑太麻烦了，咱先把编辑器配置好。
常用的Angular编辑器有Visual Studio Code、WebStorm、Sublime Text

Sublime Text3

下载地址

TypeScript

npm install --save-dev typescript

从 TypeScript 2.3 开始，TypeScript 提供了一种插件模式的语言服务可以用。

接下来，在你的用户首选项中（按 Cmd+, 或 Ctrl+,）添加：

"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib" 

Angular/language-service

npm install --save-dev @angular/language-service

VS Code

下载地址

Angular语言服务

Visual Studio Code 可以从商店中安装 Angular 语言服务，这个功能就在左侧菜单面板最底下的那个图标。 你也可以使用 VS 的快速打开（⌘+P）功能来查找这个扩展插件。打开它之后就输入下列命令：

ext install Angular.ng-template

中文界面（可选）

按⇧⌘P调出命令调色板，然后开始键入“display”以过滤并显示Configure Display Language命令。 Configure Display Language

按Enter键，将locale.json创建一个文件，其默认值设置为您的操作系统语言。您可以使用IntelliSense（^ Space）选择不同的受支持语言区域设置。

支持的语言
保存locale.json并重新启动VS Code以使用新的显示语言。

有可能会提示你没有语言包，这是需要去marketplace下载对应的语言包。

在“扩展”视图（⇧⌘X）中搜索语言包category:"Language Packs"。

Language Packs

打开项目

要在VS Code中打开Angular应用程序，请打开另一个终端（或命令提示符）并导航到该my-app文件夹并键入code .

如果提示没有这个命令，说明还没有在shell中安装code你命令。打开命令调色板 (⇧⌘P) 输入Shell Command: Install 'code' command in PATH点击并安装然后重启编辑器即可。

Install 'code' command in PATH

运行项目

⌃⇧`新建VS终端或⌃`打开终端，然后输出命令npm start即可，
若提示找不到npm命令，则需要执行npm install。
然后就可以去浏览器就能访问我们的web项目啦。

调试Angular

要调试客户端Angular代码，我们需要安装Debugger for Chrome扩展。
⇧⌘X在搜索框中键入chrome。您会看到几个引用Chrome的扩展程序。

Debugger for Chrome
安装完成后重新启动VS Code激活拓展程序。
更多debugger for chrome的用法请参见官网

使用Angular CLI进行Chrome调试

参阅Github