今天完成的事情：

响应式的CSS框架

       目前主流的响应式css框架都有网格的概念，在我们现在使用的MDL（Material Design Lite）框架中叫做grid。在MDL中，一个页面在PC浏览器上的展现宽度有12个格子（cell），在平板上有8个格子，在手机上有4个格子。即一个grid的一行在PC上是12个cell，在平板上是8个cell，在手机上是4个cell。如果一行中的cell数目大于限制数目（比如在PC上超过12个），MDL会做折行处理。标识一个grid容器也很简单，在对应标签加上class="mdl-grid"即可。类似的每个cell需要在对应标签内加上class="mdl-cell"。如果要定制化grid的话，我们需要给class添加多个样式类名，比如如果希望grid内是没有间隔的，可以写成class="mdl-grid mdl-grid--no-spacing"；如果希望添加更多自己的定义，类似的可以写成mdl-grid my-grid-style，然后在css中定义这个my-grid-style即可。

在login页面from的外层套一层div，并应用grid相关的css类。使用ngstyle指令，给dom元素设定css属性。grid里面我们仅有一个有实际内容的cell，就是form。这个form在PC和平板上都占3个cell，在手机上占4个cell。但为了使这个form可以放在页面靠右的位置，我们添加了2个占位标签mdl-layout-spacer，标签的作用使将cell剩余的横向空间占满。

在LoginComponent中将其赋值给photo: photo = '/assets/xxx.png'(图片是在src\assets目录下面）。

这样就不用在style.css下面设置背景图了

vscode调试

安装插件debugger for chrome，点击选择debugger for chrome，vscode会帮你创建一个配置文件，这个文件位于\.vscode\launch.json是debugger的配置文件。如果是MacOSX或者Linux，请把userDataDir替换成对应的临时目录， "webpack:///*": "/*"。点击debug视图中的debug按钮，右键点击变量把它放到监视中看看变量值或者逐步调试应用。

明天计划的事情：

实验Restful API

问题：

很多细节方面要注意，服务和模块都要导入到AppModule了

收获：

尝试了vscode调试断点

组件的优化

<input type="text" class="form-control" name="name" [(ngModel)]="model.name" #name="ngModel" required>name属性是必须要添加的，加上模版引用变量#name="ngModel"就能快速访问到这个控件。