AngularJS教程之简单应用程序示例  更新时间:2016年08月16日 15:32:52   投稿:lqh   本文主要介绍AngularJS简单应用程序,这里提供了详细的流程和代码程序,有需要的小伙伴可以参考下 按以下步骤来创建AngularJS应用  第1步:加载框架 作为一个纯粹的JavaScript框架,它可以使用 第2步:使用ng-app指令定义AngularJS应用 … 第3步:用 ng-model指令定义的模式名称 Enter your Name: 第4步:用ng-bind指令将上述模型中的值绑定定义 Hello ! 按以下步骤来运行AngularJS应用 使用上面提到的三个步骤在HTML页中。 testAngularJS.html AngularJS First Application Sample Application 我的名字: Hello, ! 输出 在Web浏览器打开textAngularJS.html。请输入姓名并看到的结果。 如何让AngularJS与HTML集成 ng-app指令指示AngularJS应用的开始。 ng-model指令创建一个名为“name”的模型变量在HTML页面中,并有ng-app指令在div内使用。 ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。 结束标记表示AngularJS应用程序的结束。 以上就是AngularJS简单应用程序,后续继续整理相关资料,谢谢大家对本站的支持。 您可能感兴趣的文章: AngularJS 入门教程之HTML DOM实例详解 简介AngularJS的HTML DOM支持情况 AngularJS表格详解及示例代码 AngularJS过滤器详解及示例代码 AngularJS控制器详解及示例代码 AngularJS表达式讲解及示例代码 AngularJS指令详解及示例代码 AngularJS利用Controller完成URL跳转 angularJS 如何读写缓冲的方法(推荐) Angularjs在初始化未完毕时出现闪烁问题的解决方法分析 Angularjs中$http以post请求通过消息体传递参数的实现方法 AngularJS HTML DOM详解及示例代码 AngularJS 简单程序 相关文章 AngularJS过滤器filter用法分析 这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的功能、分类、使用方法与相关注意事项,需要的朋友可以参考下 2016-12-12 Angular框架详解之视图抽象定义 这篇文章主要给大家介绍了关于Angular框架详解之视图抽象定义的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2021-04-04 在AngularJS应用中实现一些动画效果的代码 这篇文章主要介绍了在AngularJS应用中实现一些动画效果的代码,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 2015-06-06 深入学习JavaScript的AngularJS框架中指令的使用方法 这篇文章主要介绍了深入学习JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入门学习中的基础知识,需要的朋友可以参考下 2016-03-03 Angular路由简单学习 这篇文章主要和大家一起学习Angular路由,介绍angular的$route的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 Angular2 组件通信的实例代码 本篇文章主要介绍了Angular2 组件通信的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS service之select下拉菜单效果 这篇文章主要为大家详细介绍了AngularJS service之select下拉菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 Angular4.0中引入laydate.js日期插件的方法教程 在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库。下面这篇文章主要给大家介绍了关于Angular4.0中引入laydate.js日期插件的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。 2017-12-12 详解angular element()方法使用 本篇文章主要介绍了详解angular element()方法使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular利用HTTP POST下载流文件的步骤记录 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-07-07 最新评论

按以下步骤来创建AngularJS应用

 第1步:加载框架

作为一个纯粹的JavaScript框架,它可以使用<script>标签来添加。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

第2步:使用ng-app指令定义AngularJS应用

<div ng-app="">
...
</div>

第3步:用 ng-model指令定义的模式名称

<p>Enter your Name: <input type=”text” ng-model=”name”></p>

第4步:用ng-bind指令将上述模型中的值绑定定义

<p>Hello <span ng-bind=”name”></span>!</p>

按以下步骤来运行AngularJS应用

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

testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。请输入姓名并看到的结果。

如何让AngularJS与HTML集成

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

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

ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。

结束</ div>标记表示AngularJS应用程序的结束。

以上就是AngularJS简单应用程序,后续继续整理相关资料,谢谢大家对本站的支持。

您可能感兴趣的文章:

  • AngularJS 入门教程之HTML DOM实例详解
  • 简介AngularJS的HTML DOM支持情况
  • AngularJS表格详解及示例代码
  • AngularJS过滤器详解及示例代码
  • AngularJS控制器详解及示例代码
  • AngularJS表达式讲解及示例代码
  • AngularJS指令详解及示例代码
  • AngularJS利用Controller完成URL跳转
  • angularJS 如何读写缓冲的方法(推荐)
  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
  • Angularjs中$http以post请求通过消息体传递参数的实现方法
  • AngularJS HTML DOM详解及示例代码
张贴在3