手机版

AngularJS教程的简单应用示例

时间:2021-09-07 来源:互联网 编辑:宝哥软件园 浏览:

按照以下步骤创建一个AngularJS应用程序

步骤1:加载框架

作为一个纯JavaScript框架,可以使用脚本标签添加。

脚本src=' http :http://Ajax . googleapis.com/Ajax/libs/AngularJS/1 . 2 . 15/angular . min . js '/脚本步骤2:使用ng-app指令定义angular js应用程序

Div ng-app=' './div步骤3:由ng-model指令定义的模式名

pEnter您的姓名:输入类型='text' ng-model='name'/p

步骤4:使用ng-bind指令绑定并定义上述模型中的值

pHello span ng-bind='name'/span!/p

按如下方式运行AngularJS应用程序

在HTML页面中使用上面提到的三个步骤。

testAngularJS.html

Html titleangularjs第一个应用程序/title body h1示例应用程序/h1 div ng-app=' p我的名字:输入类型=' text ' ng-model=' name '/p p p你好,span ng-bind=' name'/span!/p/div脚本src=' http:http://ajax.googleapis.com/Ajax/libs/angular js/1 . 2 . 15/angular . min . js '/脚本/正文/html输出

在网络浏览器中打开textAngularJS.html。请输入您的姓名并查看结果。

如何将AngularJS与HTML集成

ng-app指令指示AngularJS应用程序的开始。

ng-model指令在HTML页面中创建一个名为“name”的模型变量,ng-app指令用于div。

只要用户在文本框中输入的内容显示在HTML span标记上,Ng-bind就使用模型名称。

end/div标记指示AngularJS应用程序的结束。

以上就是AngularJS的简单应用。后续继续整理相关资料。感谢您对本网站的支持。

版权声明:AngularJS教程的简单应用示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。