创建你的第一个AngularJS应用的方法  更新时间:2015年06月16日 11:47:17   投稿:goldensun   这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下  按以下步骤来创建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整合Springmvc、Spring、Mybatis搭建开发环境 Angularjs—项目搭建图文教程 分享使用AngularJS创建应用的5个框架 使用AngularJS创建单页应用的编程指引 AngularJs入门教程之环境搭建+创建应用示例 AngularJS 相关文章 AngularJS之ionic 框架下实现 Localstorage本地存储 这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular2之二级路由详解 今天小编就为大家分享一篇Angular2之二级路由详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 angular6 填坑之sdk的方法 这篇文章主要介绍了angular6 填坑之sdk的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 AngularJS 入门教程之事件处理器详解 本文主要介绍AngularJS 事件处理器,这里整理了相关资料和示例代码,有需要的小伙伴可以参考下 2016-08-08 Angular 多模块项目构建过程 这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2020-02-02 JavaScript框架Angular和React深度对比 这篇文章主要介绍了JS框架中Angular和React不同和差异,以及两个框架的深度对比介绍。 2017-11-11 Angularjs中的页面访问权限怎么设置 最近一直在忙一个手机端的项目,所以对js学习有点松撤了。今天小编抽时间跟大家分享一篇关于angularjs中的页面访问权限设置教处,对angularjs访问权限感兴趣的朋友一起学习吧 2016-11-11 Angularjs 事件指令详细整理 这篇文章主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍,需要的朋友可以参考下 2017-07-07 AngularJS初始化过程分析(引导程序) 这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下 2014-12-12 Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法 今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 最新评论

 按以下步骤来创建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。请输入姓名并看到的结果。

2015616114947849.png (611×329)

 如何让AngularJS与HTML集成

  •     ng-app指令指示AngularJS应用的开始。
  •     ng-model指令创建一个名为“name”的模型变量在HTML页面中,并有ng-app指令在div内使用。
  •     ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。
  •     结束</ div>标记表示AngularJS应用程序的结束。
您可能感兴趣的文章:

  • AngularJS入门教程之学习环境搭建
  • AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
  • Angularjs—项目搭建图文教程
  • 分享使用AngularJS创建应用的5个框架
  • 使用AngularJS创建单页应用的编程指引
  • AngularJs入门教程之环境搭建+创建应用示例
张贴在3