初识angular踩的坑

发布时间:2019-06-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初识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;
};

letconst代替VAR箭头表达式代替匿名函数等等,这些小的细节部分都让我没少出问题。

组件化的核心

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

初识angular踩的坑

然后将组件进行拼接。

初识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有所区别,像是ngIfngFor,他们在使用时都需要在前面添加一个星号:*,例如:

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

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

总结

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

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


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

脚本宝典总结

以上是脚本宝典为你收集整理的初识angular踩的坑全部内容,希望文章能够帮你解决初识angular踩的坑所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
猜你在找的angularjs相关文章
全站导航更多
最新angularjs教程
热门angularjs教程