Jin-angular4初体验

angular4在3月份的时候发布，最近打算尝尝鲜。所以从经过3天的熟悉，就打算使用angular4做做项目。

声明：本文并不是一篇入门指南，纯粹是是一篇体验angular4的心得。如果你对angular4感兴趣我也有2个案例供你入门。

案例1：学习案例

案例2：项目案例

请以后使用angular，因为它和angularjs完全是两个不同的框架。

首先说说感觉吧。其实感觉门槛还是有的，毕竟需要使用TypeScript进行开发，而且angular4与原来我们使用的angularjs 定位也是不同的。angular完全就是一个新的框架，语法需要重新熟悉，包括它里面的各个模块。以及模块的调用方式都需要我们重新学习去使用。 angular4是一个集成的框架，各个模块相互分离，需要根据当前情况引入不同的模块。所以API页面要多翻一番。

事出有因

每一件事的发生绝非偶然。需要做新项目，技术没有确定。为了更好的去了解angular的发展方向，所以就对angular4进行一次实际的尝试。

绝不放弃

其实很多人觉得新知识学起来很难，不知道怎么学，TypeScript是不是很难写，跟着demo做可是怎么都不对，入门了又怎么把它真正的使用到项目里面。这种种原因促使了，个人心理的畏难情绪的产生。请不要放弃，试着了一步一步解它。

做中学，学中做

有人问过我，入门angular需要多久。结论：最多5天就可以学完。那么后面就是需要项目来实践了。我说的是看文档学习，不是什么看入门视频。这是一个学习的过程。其实我原来也很喜欢通过视频进行学习，开始的时候还是觉得很爽的，因为可能你几个小时就可以学习完一门新的语言，并且能了解到很多。但是我更想知道录制视频的人是怎么学习的，他难道也是通过视频学习来进行学习的吗？其实我更相信他是去官方网站查看api然后通过自己一步一步的摸索，一边做一边学习。让后才有了这个视频，让我们快速入门。所以我通过一遍摸索，一遍做。完成了我的angular demo 。这里面最重要的一点就是可以培养我们的学习方式，而不是一味的只是接受知识。

请注重你的学习方式，通过思考得来的才是最真实的。

TypeScript

先说说切换到TypeScript的代价是多少。首先说说首次使用的感觉吧。个人感觉有点写Java的感觉。毕竟是他是微软搞出来的，一个JavaScript的超集。切换难度最多2颗星（🌟）。个人感觉没什么感觉，不用太专注它。

比如说变量可以定义为：私有，保护，公共三种。参数设置类型，函数设置返回值类型啊。

最简单的例子：

class User{
  private name : string = 'jin';//先定义类型，再给默认值
  protected username : string = 'jin';
  public getSomething(value:string):string{
    return 'i get value:'+value;
  }
}

代价小，是不是不靠谱啊，为什么angular要使用它进行开发呢。首先，应该是类型考虑，应该JavaScript并没有对类型做强制要求，JavaScript是可以在多类型之间相互转换的，TypeScript希望在上面加上一层校验，希望为每个变量和参数以及函数返回值添加类型保护，这样可以更好的了解代码，维护代码类型的统一。再者TypeScript的代码提示功能，有利于帮助我们提高代码质量。

总的说：TypeScript就是为了我们更高效的进行编码，减少低级错误和规范编码而生的。

但是：TypeScript代码是无法直接执行的，如果项目中需要使用到TypeScript。需要使用类似webpack的ts-loader插件先将TypeScript代码转化为JavaScript代码（使用systemjs也是可以的，不过与webpack的思路是不一样的，喜欢的也可以关注一下）。

请花几分钟的时间去熟悉TypeScript，其实它并没有你想象的那么陌生。下一秒你可能就喜欢上它了，因为它想要整理你的代码。

angular4

angular4它的很多特征和优势，在官网都有介绍。那么在使用过程中是不是也是如此呢。感觉angular确实有着往原生app走的趋势。代码拆分觉得更加的合理了。作为一个集成的前端框架，上手之后，效率感觉更高效一点，也不能说比原来angularjs好到哪里去.我看中的是angular的组件化，也就是原来angularjs的controller了。不过在使用上就更加的灵活了。考虑代码使用（webpack）打包的话，就有点尴尬了，因为体积超大，不能接受，难道这就是所谓的app式体验吗？不过还好代码加载执行前可以加loading态。不然超大的白屏，真让网络慢的人无法生存。

angular4保留了directive，使用和原来的angularjs相似，只是语法的不同而已。

pipe感觉是新的知识，其实只是filter的一个换名而已。

service是请求后端服务的组件。在使用方面配合rxjs更加的完美灵活。

带来的新问题

作为新技术，有好又坏。但是当优势大于劣势的时候，也是可以尝试使用的。

现在存在的问题就可能有。比如：

其它外部组件的引入。
代码打包体积问题，整个硬伤啊。

这都是需要关注的。