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

背景

有读者在学习《 全栈开发之道: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 准时推送技术文章。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容