脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → 创建AngularJS应用

创建你的第一个AngularJS应用的方法

 更新时间：2015年06月16日 11:47:17   投稿：goldensun  
这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下

 按以下步骤来创建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定时器的使用与移除操作方法【interval与timeout】

    AngularJS定时器的使用与移除操作方法【interval与timeout】

    这篇文章主要介绍了AngularJS定时器的使用与移除操作方法,结合实例形式分析了AngularJS中interval与timeout方法的相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • 详解Angular6 热加载配置方案

    详解Angular6 热加载配置方案

    这篇文章主要介绍了详解Angular6 热加载配置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 浅析Angular19 自定义表单控件

    浅析Angular19 自定义表单控件

    这篇文章主要介绍了Angular19 自定义表单控件的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • AngularJS在IE下取数据总是缓存问题的解决方法

    AngularJS在IE下取数据总是缓存问题的解决方法

    这篇文章主要介绍了AngularJS在IE下取数据总是缓存问题的解决方法,分析了问题的原因及AngularJS设置禁止IE对ajax缓存的实现方法,需要的朋友可以参考下
    2016-08-08
  • 玩转Koa之koa-router原理解析

    玩转Koa之koa-router原理解析

    本文将要分析的是经常用到的路由中间件 -- koa-router，详细的介绍了koa-router概述和实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈angular.js跨域post解决方案

    浅谈angular.js跨域post解决方案

    本篇文章主要介绍了浅谈angular.js跨域post解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • angula中使用iframe点击后不执行变更检测的问题

    angula中使用iframe点击后不执行变更检测的问题

    这篇文章主要介绍了angula中使用iframe点击后不执行变更检测问题，本文给大家分享解决方案，通过实例代码给的大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • AngularJS基础 ng-keydown 指令简单示例

    AngularJS基础 ng-keydown 指令简单示例

    本文主要介绍AngularJS ng-keydown 指令,在这里帮大家整理了ng-keydown 指令的基础资料,并附有代码,有需要的朋友可以参考下
    2016-08-08
  • 基于AngularJS实现的工资计算器实例

    基于AngularJS实现的工资计算器实例

    这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • Angular项目中使用scss文件的一些技巧小结

    Angular项目中使用scss文件的一些技巧小结

    SCSS是Sass 3引入新的语法,其语法完全兼容 CSS3,并且继承了Sass的强大功能,下面这篇文章主要给大家介绍了关于Angular项目中使用scss文件的一些技巧的相关资料,需要的朋友可以参考下
    2022-05-05

最新评论