初识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最为核心的就是组件化,将单页面分为若干个组件,

clipboard.png

然后将组件进行拼接。

clipboard.png

这就有点向我们在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...


朴世超
个人学习总结与项目实战问题记录
345 声望
21 粉丝
0 条评论
推荐阅读
多神经元简单神经网络的实现
数据集首先数据集选择使用Cifar-10。这个数据集合包含十个类的图片,每类6000张32 x 32的图片,共计60000张图片,其中50000训练图片,10000张测试图片。这里下载了python对应的版本:读取文件在Cifar-10的网站,...

喵先生的进阶之路1阅读 1.4k

Async Pipe 以及Promise
前言之前在写项目的时候引用某个管道的时候 &lt;td&gt;{{ house | housePlace }}发现效果不是想要的, 而是如下图的效果,并没有显示出正确的地址!参考项目中的代码发现需要加上async管道 &lt;td&gt;{{ house | h...

weiewiyi2阅读 866

利用tethys在C层调用子组件弹窗
本周正式接手了新项目,目前感觉主要难度就体现在——找不到代码,找不到对应接口,项目主体结构与之前接触过的有较大差距。还有就是由于这个项目并不是只由我们来写,并且是最新的版本,所以这就不可避免的会遇到...

李明3阅读 349

2023 重学 Angular
作者:徐海峰就在前几天(2022-11-07) Angular 正式发布了 v15 版本,本人第一时间用我那不专业的英文翻译了一下  [[译] Angular 15 正式发布!]([链接]) 文章一出就遭到社区部分人的质疑,什么 "Angular 落寞很...

PingCode研发中心2阅读 474

封面图
angular 页面缩放时调整css
问题背景登录界面:由于之前登录框设置的是绝对位置,所以在浏览器页面缩小后,登录框的位置会缩到看不见的地方。比如left字段,设置的是370px。 当页面宽度缩小至400左右时,登录框就会由于向右偏移了370px,而导...

weiewiyi2阅读 467

剪切板
写项目的时候需要用到剪切板的功能, 参考项目里的写法,用到了document.execCommand()方法。 {代码...} 看webstrom提示发现,这个方法是弃用的符号。 之后就想着看看现在用什么来代替。查看官方文档MD5官方文...

weiewiyi2阅读 329

修改首次进入前台登陆页面报401错误时遇到的问题
我们在userService的构造函数中订阅了请求当前登陆用户的方法,其中就会向后台发送/api/user/me的请求,但是我们在后台中设定了权限管理,此时没有用户登录如果进行访问的话就会报401错误。

李明2阅读 304

345 声望
21 粉丝
宣传栏