Angular2 项目，我是这样入门的

开篇废话

这个Angular2 ,其实入门的教程已经有很多很多人写过了，但，我觉得最好的仍然是官方的文档。我英语一般般，看原档比较吃力，是从Angular.cn这里开始的。
写这篇的原因是想记录一下入门过程中的一些坑，防止下次又遇到又得查半天。同时为了能给其他有缘人也看看，就写全一点吧。

开发环境篇

angular2 依赖于node.js ，我电脑上安装的node如下：

C:\Users\MidWong>node -v
v11.3.0

2、需要npm 包管理

C:\Users\MidWong>npm -v
6.4.1

Mac平台可以用homebrew安装nodejs，Windows平台可用chocolatey, 在安装nodejs时会安装npm, 检查即可。如果手动安装记得配置环境变量。

工具篇

我用的WebStorm ,当然这个没限制，看个人习惯。vscode等一众编辑器都可以。
由于需要用到http请求，官方用mooc数据测试的，而我直接用Spring Boot搭了一个restfulAPI 服务端，mooc这一步略了。服务端的内容不在本篇讨论，有机会补充。Spring Boot真是神器啊，几分钟就能做出来一个简单的API接口。

准备工作

安装angular cli 。我把这个理解为模板了，不知道合不合适。总之安装之后，好多操作都可以用简单的命令来实现。

npm install -g @angular/cli

安装完成之后，就可用ng命令来创建项目了。这一步操作，可以在终端（Windows上的命令提示符），也可以在编辑器里面的Terminal（也叫终端）里。

我比较懒，喜欢在编辑器里打开Terminal来创建，不用cd到我要的文件夹了。

image.png

ng new 项目名称

就可以创建一个angular项目了。这些步骤都可以参考文章开头的 Angular.cn 快速入门，写的更详细。

我踩的坑

1. 创建组建后，不想要了

虽然有创建组建的命令，但是没有删除的呀！这时需要删除组建文件夹/文件，然后在 app.module.ts 中删除import。
这里赞一下WebStorm，删了组建文件夹后，无用import的会有提示，选中删除就ok.

2. ts语法

一开始好不习惯这个“新语种”。但了解了它的由来后，一下就容易理解了。它是JavaScript的超集，因为JavaScript没有像诸多后端语言一样强制类型，容易写，但也容易出现一些不容易发现的Bug。ts解决了这个问题。在我看来，它就是用Java的语法写JavaScript。
怎么入门呢？我反正没去单独的学它，就只是看angular官网的代码，照猫画虎，写着写着就会了。

3. WebStorm 中的红色波浪线

好头大哦！明明和官网上的代码一模一样，就算复制过来也有些下边划红色波浪线提示这里出错。代码也能正常运行，凭啥报错呢？！终于偶然发现，Ctrl+Alt+K 格式化一下代码，干干净净的页面，真舒服了！WebStorm 有自己的格式要求，那些代码里没用的空格/换行，在编辑器里帮助我们更容易阅读代码。这样挺好的，培养良好的编程习惯。

4. 内网穿透

大部分时间调试用Chrome，偶尔需要在真机上测试下触摸/滑动是否正常，这时候需要用到内网穿透工具了，如阿里钉钉内网穿透工具。此时需要在 ng serve 后面加一个参数 --disable-host-check

ng serve --disable-host-check

这样启动后，控制台会有个warning，忽略它，可以在手机上通过互联网访问你的项目了，就不需要手机和电脑接入同一局域网这么麻烦啦。

5.项目结构

这一部分我就不写这么快了，毕竟刚刚入门，不知道什么样的结构是合理的。但是有一点能感受到的是，能用组建就用组建，然后组装，这样容易在其他地方复用。一些至负责数据处理的，例如http请求，尽量写成通用的服务，同样为了方便以后重复使用。

6.UI框架

官方推荐的有两个，一个是大名鼎鼎的Material Design，动画效果简直舒服的不要不要的，上手也很快。另一个是阿里的NG ZORRO，组件丰富，还有现成的ng-admin中后端解决方案。如果不太在意前端设计，只是想完成该有的功能，这个ng-admin很适合，完成度很好，只要按着你的需求去改就可以。

当然，其他的前端UI框架也是可以用的，比如bootstrap，像传统的html网页里一样，在index.html中引用即可。
jQuery这个库，在html网页里特别好用，但是在这，至少我觉得是无用武之地了。

7.跨域

Angular是个前端框架，势必会前后端分离，此时会有跨域的问题。前后端都可以去解决这个问题，我选择在Spring Boot里解决，只需要一个注解即可搞定

@CrossOrigin(origins = "http://example.com", maxAge = 3600)

在控制器上加这一句注解，把安全的域名写进去。当然也可以写*号，但是不推荐。

8.打包发布

打包命令如下：

ng build

这是项目文件夹中会多出一个dist文件夹，只需要把里边的文件全部复制到tomcat中的webapps目录下，就发布完成了。

然后，问题来了。
首先，如果按照页面目录，访问下来看起来没啥区别，但是在某个路由下刷新一下页面就404了。解决方案是配置app.module.ts，添加这一行：

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

像这样：

import {HashLocationStrategy , LocationStrategy} from '@angular/common';
@NgModule({  
  declarations: [AppComponent],  
  bootstrap: [AppComponent], 
  imports: [BrowserModule, routes],  
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
});

再访问时，会发现在tomcat的发布路径后，会有个# 锚点，刷新不会404了

如果，此时去浏览器F12调试，到network 标签页里观察，清除缓存并强制刷新页面（长按地址栏前面的刷新），会看到加载的文件巨大，好几M，体验不太好。
我的办法是，打包时添加参数

ng build --prod --aot

这样，压缩打包出来的文件一班会在1M以内，访问快很多了。

总结

还没到总结的时候，先挖个坑，这篇还需要回来修改/补充内容的。