初识angular踩的坑

最近从angularjs转到学习angular，虽然有了前面的项目实践的经验，这几天的学习总体来说还是比较轻松的，但是也是以前的思想的缘故吧，踩了好几个坑。

TypeScript

我们知道，angular使用的是typeScript语言，带类的js语言。这就让我这个写惯了js和java的有点难受了。

java中，定义变量都是先声明类型，然后才是变量名：

private Test test；

但是在ts（typeScript简称，后面我都会以ts代表）中，变量的定义是先定义变量名，然后才声明变量的类型，而且还有一个冒号：

private test: Test;

另外，还有箭头表达式：

let fn = () => a + b;

他就相当于：

let fn = function() {
    a + b;
};

像let和const代替var，箭头表达式代替匿名函数等等，这些小的细节部分都让我没少出问题。

angular最为核心的就是组件化，将单页面分为若干个组件，

然后将组件进行拼接。

这就有点向我们在angularjs中使用的ui-view，但是他要比ui-view组件化的更加彻底。

组件化就要求我们要做好一个规划：

1.将一个页面分为哪几个组件.
2.组装好。
3.最后去实现组件的功能。

要不就有可能出现我在学习中出现的问题：组件组装错了位置。而且相信在后面的项目中，我们会创建大量的组件，清晰的整理组件之间的关系会让项目的开发变得简单。

angular默认单向数据绑定，要使用双向数据绑定就要使用[()]的形式：

<div>
    <span>name:</span>
    <input [(ngModel)]="hero.name" placeholder="hero">
</div>

其实他angular的绑定是这样的：

数据绑定：使用[]
事件绑定：使用()
双向数据绑定：数据绑定 + 事件绑定，所以是[()]

还有一些就是angular自带的装饰器，比如@Component，@Input，@NgModule等等，这些都是angular内部写好的。

还有angular的内置指令也和angularjs有所区别，像是ngIf和ngFor，他们在使用时都需要在前面添加一个星号：*，例如：

<div *ngIf="object">
    ...
</div>

这个星号其实是一种语法糖，简化了ngIf和ngFor的原有的写法，并且也使得代码更符合我们的普遍要求，更加易读。

通过几天的学习，对angular有一个初步的了解。但是还是要通过项目的磨炼才能对更加深入的原理等深层的东西有一个比较深刻的理解。

但是通过这次学习，也是发现了，我们学习语言主要学习的是思维，当我们的思想有了，那么其他的都是想通的。

相关参考：
官方文档
 https://blog.csdn.net/u010130...