初识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...