# 打破传统的前端 ### 什么是UI 提起UI，你一定知道它是指用户界面（User Interface），但是如果细细剖析，你会发现它没那么简单。对于一个用户界面，它实际上包括三个主要部分： * 内容：你想展现哪些信息？包括动态信息和静态信息。注意，这里的内容不包括它的格式，比如生日，跟它显示为红色还是绿色无关，跟它显示为年月日还是显示为生辰八字也无关。 * 外观：这些信息要展示为什么样子？这包括格式和样式。样式还包括静态样式和动画效果等。 * 交互：用户点击了加入购物车按钮时会发生什么？还要更新哪些显示？ 在前端技术栈中，这三个部分分别由三项技术来负责： * HTML负责描述内容 * CSS负责描述外观 * JavaScript负责实现交互。 当然，这三者之间没有明确的界限，比如有些格式化需要JavaScript来实现，而HTML也往往会影响一些样式。 如果进一步抽象，它们分别对应MVC的三个主要部分： * 内容——Model * 外观——View * 交互——Controller。 对应到Angular中的概念 * “静态内容”对应模板 * “动态内容”对应Scope， * 交互对应Controller * 外观部分略微复杂点：CSS决定样式，过滤器（filter）则决定格式。