全栈开发之小窍门——一个逗号引发的错误

背景

有读者在学习《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》 "第8章 应用实例1——用户管理" 这一章时，遇到个莫名其妙的问题，我看了读者发给我的完整工程，从代码上看，没有发现错误， 在chrome 的console 上也没有任何报错，这是什么原因呢？

一个空格引发的异常

我运行了下工程，没有异常。 凭我的直觉，以下这段代码似乎不妥， 不知你是否看出了什么端倪。

<tr>
<td> <input class="form-control",ng-model="contact.name"> </td>
<td> <input class="form-control",ng-model="contact.email"> </td>
<td> <input class="form-control",ng-model="contact.number"></td>
<td> <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
</td>
</tr>

以上代码，貌似没什么问题吧！

再看下它在 sublime 上的表现

sulime 上代码

同样是这段代码，在sublime上有三行白色的显示， 问题很有可能出在这里。

应该在 ng-model 之前，与逗号之间，添加一个空格。 代码如下：

<tr>
<td> <input class="form-control", ng-model="contact.name"> </td>
<td> <input class="form-control", ng-model="contact.email"> </td>
<td> <input class="form-control", ng-model="contact.number"></td>
<td> <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
</td>
</tr>

这样一改，在sublime上有了很大的差别，看看效果吧：

添加空格后的代码

经这么一改， 再来运行下， 瞬间一切变得OK了。

小结

学习全栈开发技术，必须通过代码的敲击来实战，还得有高手指点，遇到疑问时，可以随时得到作者的帮助。这是最有效的学习方法！

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。