Angular学习笔记第一节-基本概念

1.Let do it!

1.ng的基础概念

• 在学习ng之前,我们只需要掌握HTML.CSS.JS即可.
  • 简称ng.名字不错,吊!
  • 重要的特性
    • 有了ng,我们就可以轻松的构建SPA应用,而且ng通过指令扩展了HTML,通过表达式来绑定数据到HTML上.吊!
• ng1有一些缺点,但是现在还是很多公司在使用的一个东西.以后看ng2怎么样,现在最流行的一个东西是vue和react.以及redux等等

---

2.什么叫做单页面应用?

• 只有一个页面(整个应用的一个载体)
• 内容全部都是通过Ajax来进行载入的

---

3.分析之前我们开发web的一个方式

• 之前我们做web开发的时候,都是按照每一个大的功能模块分为一个模块来搞的.当客户端发起请求的时候,就会去服务器重新下载一个HTML的文件,然后在客户端重新进行渲染,这就是原来我们做web开发的一个方式.
• 那么什么是SPA,SPA也就是整个站点,只有一个HTML文件,他是一个模板页面,当我们进行模块之间的跳转的时候,不会再去请求一个新的HTML文件,然后去渲染他,而且请求数据填充这个模板的HTML文件,这样做的好处就是用户的体验好,异步加载的速度快.ng特别适合数据交互频繁的应用场景.
• 举例
  • 网易云音乐.当我们访问网易云音乐的时候,我们可以发现,不论我们是去那个页面,底部的音乐一直都在进行播放,而不是说我们重新加载了一个HTML文件,底部的<audio></audio>标签就没有了.
  • 这就是ng应用的一个重要场合,特别适合数据量请求频繁的应用. - 看下面的一个示意图:

SPA.png

---

4.为什么要使用ng

• 4.1 ng通过指令来扩展了HTML,通过表达式来绑定数据到HTML上面,这样做的好处就是减少了频繁的DOM操作,我们知道频繁的DOM操作是非常消耗性能的!使用了ng之后,就会以后JS关于DOM的操作就会减少,更多的是操作的是数据.(这里ng就和jq产生了鲜明的对比)
• 4.2 使用ng,更少的代码,实现更强劲的功能!叼叼叼! - 4.3 下面我们展示下一个数据请求展示在页面的一个案例:

演示代码.png

---

上面的其实就是我们之前的页面的数据展示方式,通过请求API,然后解析数据,进行字符串的拼接,然后for循环,而后渲染页面,写了很多的JS代码,执行了很多次的DOM操作.
下面,我们有请ng来完成同样的操作!

Angular来实现相同的功能.png
可以很明显的看到,使用了ng之后,我们不再需要写大量的JS来解析数据,拼接DOM.然后渲染页面了!不但代码量减少了很多,而且更加的高效,页面加载的速度也变快了!B格也提高了!ng就是吊!
更少的代码,实现更强劲的功能!!!

---

5.使用ng带来的价值

• 5.1 ng的一点起源故事

  • ng的作者是玩java的,ng中的很多概念都是来源于后台开发的思想,这1,2年的前端发展的很快速就是因为一帮子做后台的大牛来前端捣乱.也感谢他们为前端这个方向带来了更好的思想,让前端发展的更快更好.

• 5.2 ng的价值:带领前端进入MVVM的时代!

  • 让前端不再是简单的切页面,实现功能!而是走向模式化或者是架构化.

---

6.ng的特性

• MVC(MVVM)
• 模块化
• 双向数据绑定
• 指令系统

结束语:至此,第一节的笔记就结束了.后面继续....