【Angluar2】环境搭建和HelloWorld

开发Angluar2，需要安装NodeJS和npm、angular-cli，以及TypeScript集成开发工具(IDE)。

安装NodeJS和npm
1、npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
      允许用户从npm服务器下载别人编写的第三方包到本地使用。
      允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
      允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
2、新版的NodeJS已集成npm，因此安装NodeJS后npm也一并安装好了。从https://www.npmjs.com/下载NodeJs安装程序(node-v8.11.2-x64.msi)
      安装完成后，通过开始菜单点击【Node.js command prompt】，会提示已自动设置NodeJS环境变量，然后输入 "npm -v" 来测试是否安装成功：
      $ npm -v
         2.3.0
      PS: 首次安装后，若不通过开始菜单点击【Node.js command prompt】，直接在cmd窗口输入npm命令会提示找不到命令。
3、使用npm命令安装模块
      语法格式： npm install <Module Name>

安装TypeScript（可选）
> npm install -g typescript
好像只安装Angular-CLI不安装TypeScript也没问题，可以用Angular-CLI命令替代，不过最好安装上。
安装后可以通过tsc命令编译TypeScript源码。
> tsc -v

安装Angular-CLI 
         Angular-CLI 是 Google Angular 核心团队提供的开发工具，集成了大量的 NodeJS 模块，例如：webpack，karma，asmine，typescript 编译器等。只要一条命令就能帮你自动创建项目的目录结构、自动生成 Component 骨架代码，并自动添加依赖、热加载代码等。
1、使用npm命令安装angular-cli
      > npm install -g angular-cli
      上述命令默认从官方下载，可以利用淘宝镜像安装angular-cli：
     > npm install -g angular-cli –registry=https://registry.npm.taobao.org
     如果之前安装失败过，在安装angular-cli之前最好先卸载干净： 
     > npm uninstall -g angular-cli 
     > npm cache clean
2、测试是否安装成功.
     > ng -v
        ...
        angular-cli: 1.0.0-bata.28.3
        ...
3、通过 Angular CLI 的 help 命令来获取相关的命令信息.
     > ng help

将npm设置为淘宝（可选）
> npm config set registry http://registry.npm.taobao.org
安装完成后使用cnpm来代替npm命令即可。

安装typings（可选）
> npm install -g typings
用途：为js提供智能感知。

创建HelloWorld应用
1、创建angular2工程
...... 命令格式：ng new <project-name> [options]
...... 打开F:\allDemoCodeAndDoc\code\angular2目录，在地址栏输入cmd，这样命令行直接切换到当前路径
...... 新建一个angular2工程(整个过程可能要持续几分钟)：
       > ng new helloworld
      完成后，会在angular2目录下生成一个helloworld目录以及angular2工程相关文件。
      其中，tsconfig.json是项目配置文件，指定了使用的es库和构建输出目录。
...... 开发代码时只需要在生成的app目录修改或增加对应文件，外层目录其它自动生成的文件一般不需要修改。
       app下默认生成有应用对应的几个文件：模块、组件、组件模板文件、css样式等。
2、启动ng web服务器
       > cd helloworld
       > ng serve
...... 必须先切换到工程目录，再启动服务，启动服务过程中会先编译工程，因此过程有点慢。
...... 也可以自定义配置 IP、端口和实时重载端口号
       > ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
...... 在浏览器中打开默认地址 http://localhost:4200，显示app works!，证明测试应用成功了。
3、显示内容为HelloWorld
...... 组件是具有模板的控制器类，主要处理页面上的应用程序和逻辑的视图。组件包含两个重要的事情: 一个是视图，另一个是一些逻辑。
...... 第二步显示的是app.component.html模板文件中的插值表达式{{title}}的值，现在将其内容显示为HelloWorld，只需要修改src\app\app.component.ts
       组件AppComponent方法，将其返回值修改为HelloWorld，无需重启ng服务器，页面会自动刷新显示为修改后的值。
4、使用ctrl+C快捷键退出ng服务器
5、构建工程
...... 生产环境构建(指定生产环境prod参数，--target=xxx可省，貌似没啥用)
       > ng build --target=production --environment=prod
...... 开发环境构建(指定开发dev参数，--target=xxx可省，貌似没啥用)
       > ng build --target=development --environment=dev
...... 构建并压缩js文件
       > ng build --prod --build-optimizer
       > ng build --dev --build-optimizer
...... --environment=可简写为--
       >  ng build --prod
       >  ng build --dev
...... 构建后的文件放在/dist目录中，生成的文件就是最终可部署到jetty等应用服务器的前端html、js、css...文件。

创建工程生成的文件内容说明
...... package.json中，dependencies 是运行时所需要的依赖，devDependencies 是开发时所需要的依赖，@angular 是 Angular 的核心库，Angular2 将它
       分成了很多包，这样方便开发者灵活的按需引入。
       rxjs、zone.js等是为 Angular 提供核心功能支持。
...... tsconfig.json用于配置将TypeScript 编译成 ES5 的参数。
...... app.module.ts是整个应用程序的入口。

安装和使用Angular2 IDE工具(推荐)
WebStorm是开发Angular2应用理想的开发工具，用来管理代码结构，并支持TypeScript语法高亮和提升补全等功能，不过要收费因此抛弃使用。
Atom也可用于开发Angular2应用，是github推出的开源软件，支持typescript语言高亮、代码提示和自动补全等功能，因此考虑使用该软件开发。
1、安装Atom
...... 从https://atom.io官网下载AtomSetup-x64.exe。
2、安装Atom-typescript 插件
...... 下载安装后，软件主界面【Install Packages】- 【Open Installer】按钮，在弹出的面板内输入typescript，选择安装搜索结果中的 Atom-typescript 插件。
       安装完成后，会在【Packages】菜单下挂出Typescript二级菜单。
3、安装atom-beautify插件
...... 类似第2步操作方法，安装atom-beautify，然后通过快捷键ctrl+alt+b即可对代码进行格式化，排版更好看。
4、打开工程
...... 软件主界面【Open Project】打开已存在的工程，双击左侧文件目录树的文件，若提示需要安装atom-typescript依赖，按提示安装依赖即可。

安装和使用Eclipse TypeScript插件(不太好用，不推荐)
...... 对于习惯使用eclipse开发的人来说，也可以通过安装Eclipse TypeScript Plug-in来开发Typescript应用。
...... 在更新插件【Add】窗口输入http://eclipse-update.palantir.com/eclipse-typescript地址更新插件，更新完成后会提示重启eclipse。
...... 在左侧工程面板右键一个web工程，然后选中工程名并右键 -> Configure -> Enable TypeScript Builder。