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应用的一个重要场合,特别适合数据量请求频繁的应用. - 看下面的一个示意图:
- 网易云音乐.当我们访问网易云音乐的时候,我们可以发现,不论我们是去那个页面,底部的音乐一直都在进行播放,而不是说我们重新加载了一个HTML文件,底部的
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年的前端发展的很快速就是因为一帮子做后台的大牛来前端
捣乱.也感谢他们为前端这个方向带来了更好的思想,让前端发展的更快更好.
- ng的作者是玩java的,ng中的很多概念都是来源于后台开发的思想,这1,2年的前端发展的很快速就是因为一帮子做后台的大牛来前端
-
5.2 ng的价值:带领前端进入MVVM的时代!
- 让前端不再是简单的切页面,实现功能!而是走向模式化或者是架构化.
6.ng的特性
- MVC(MVVM)
- 模块化
- 双向数据绑定
- 指令系统
结束语:至此,第一节的笔记就结束了.后面继续....
