本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第2章,第2.1节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看
2.1 什么是UI
提起UI,你一定知道它是指用户界面(User Interface),但是如果细细剖析,你会发现它没那么简单。
对于一个用户界面,它实际上包括三个主要部分:
内容:你想展现哪些信息?包括动态信息和静态信息。注意,这里的内容不包括它的格式,比如生日,跟它显示为红色还是绿色无关,跟它显示为年月日还是显示为生辰八字也无关。
外观:这些信息要展示为什么样子?这包括格式和样式。样式还包括静态样式和动画效果等。
交互:用户点击了加入购物车按钮时会发生什么?还要更新哪些显示?
在前端技术栈中,这三个部分分别由三项技术来负责:HTML负责描述内容,CSS负责描述外观,JavaScript负责实现交互。当然,这三者之间没有明确的界限,比如有些格式化需要JavaScript来实现,而HTML也往往会影响一些样式。
如果进一步抽象,它们分别对应MVC的三个主要部分:内容—Model,外观—View,交互—Controller。
对应到Angular中的概念,“静态内容”对应模板,“动态内容”对应Scope,交互对应Controller,外观部分略微复杂点:CSS决定样式,过滤器(filter)则决定格式。
有了这些概念为基础,我们再来深入讲解下Angular中的概念。