Angular JS是当今编码界广泛使用的Javascript框架之一,对于在Web应用程序中声明动态视图非常有用。 实际上,Angular JS是最优秀的框架之一,可以激发人们以光速开发Web应用程序的热情。 AngularJS使用名为Directives的新属性可以轻松扩展HTML。
它具有一组内置指令,这些指令为您的应用程序提供功能。 ng-model是其中之一。 使用Angular的ng-model,您可能无需编写代码就可以制作一个简单的应用程序,以在html上实时显示输入元素的值。 ng-model指令基本上用于将输入字段的值绑定到控制器中的属性。
让我们快速构建一个简单的Web应用程序,该应用程序实时显示html input元素中键入的内容。 这种简单的技术可以集成到出色的应用程序中,例如将将您在设备上键入的内容镜像到数据库中的聊天应用程序,然后您可以选择另一台设备以从上一设备停止的位置继续。 酷吧?
将这些html代码复制到文本编辑器(例如记事本)中,另存为angularapp.html或您喜欢的任何其他名称,然后在浏览器中启动html文件以查看结果。 注意:您必须连接到互联网才能远程加载Angular JS库。
Angular的ng模型,无需编码!
您好,请在下面告诉我们您的编码经验。您输入的内容会实时显示在输入元素的下方
{{typeHere}}
用Vanilla JS编码
用简单的英语来说,使用Vanilla JS进行编码就像使用普通JavaScript进行编码一样,没有像Angular JS这样的任何其他库。 这具有超级优势,因为它为您提供了资深程序员的素质,他们不必依赖库就可以在苛刻的情况下工作。 使用Vanilla JS,我们无需使用任何库就可以使用Angular ng-model精确地编码刚刚完成的工作。 让我们开始。
编码Angular ng-model的Vanilla Javascript版本
输入您在这里学到的东西。.
var displayHere = document.getElementById('displayHere');
var textHere = document.getElementById('textHere');
setInterval(realtimeText,1000);
函数realtimeText(){
var textHereValue = textHere.value;
displayHere.innerHTML = textHereValue;
}
用Vanilla JS编写此应用程序的优势
在Vanilla JS中编码相同应用程序的优势显而易见。 它不需要库,而且与使用角度库相比,它当然是一款轻巧的应用程序。
好吧,我是Angular JS的忠实粉丝之一。 请单击拍手按钮并共享。 谢谢。