AngularJS教程之简单应用程序示例

按以下步骤来创建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简单应用程序，后续继续整理相关资料，谢谢大家对本站的支持。

赞 (0)

相关推荐

  • angularJS 如何读写缓冲的方法(推荐)

    angularJS 如何读写缓冲的方法(推荐)

    写在前面 1.在客户端.服务端架构中,HTTP协议是主流通信技术: 2.HTTP协议的无状态特性,节省带宽,较少服务器的负载,缓冲技术具有重要的运用:这里主要讲解在客户端浏览器中angular如何读写缓存... 如何实现 1.angular提供了ngCookies模块来实现读写缓存的操作,基于angular的注入该服务就能很容易的操作缓存了,但是本人推荐你使用该方法实现(重构了angular-cookie) /** * Description : 缓冲服务 * Author :maikec *

  • 简介AngularJS的HTML DOM支持情况

    简介AngularJS的HTML DOM支持情况

    以下指令可用于应用程序数据绑定到HTML DOM元素的属性. 添加ng-show属性到一个HTML按钮,并把它传递模型.绑定模型到复选框,看看以下变化. <input type="checkbox" ng-model="showHide1">Show Button <button ng-show="showHide1">Click Me!</button> ng-hide 指令 添加ng-hide属性为HTML

  • AngularJS过滤器详解及示例代码

    AngularJS过滤器详解及示例代码

    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng

  • AngularJS 入门教程之HTML DOM实例详解

    AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd

  • AngularJS表格详解及示例代码

    AngularJS表格详解及示例代码

    格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>

  • AngularJS表达式讲解及示例代码

    AngularJS表达式讲解及示例代码

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. 使用数字 <p>Expense on Books : {{cost * quantity}} Rs</p> 使用字符串 <p>Hello {{student.firstname + " " + student.lastname}}!<

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • AngularJS指令详解及示例代码

    AngularJS指令详解及示例代码

    AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用. ng-init - 该指令初始化应用程序数据. ng-model - 此指令定义的模型,该模型是变量在AngularJS使用. ng-repeat - 该指令将重复集合中的每个项目的HTML元素. ng-app指令 ng-app 指令启动一个AngularJS应用.它定义根元素.它会自动初始化或启动加载包含AngularJS应用程序的Web页

  • AngularJS HTML DOM详解及示例代码

    AngularJS HTML DOM详解及示例代码

    以下指令可用于应用程序数据绑定到HTML DOM元素的属性. S.No. 名称 描述 1 ng-disabled 禁用一个给定的控制 2 ng-show 显示一个给定的控制 3 ng-hide 隐藏在给定的控制 4 ng-click 表示AngularJS click事件  ng-disabled 指令 添加ng-disabled属性到一个HTML按钮,通过它的模型.该模型绑定到复选框,看看以下变化. <input type="checkbox" ng-model="e

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • AngularJS控制器详解及示例代码

    AngularJS控制器详解及示例代码

    AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope参数指定应用程序/模块,由控制器控制. <div ng-app="" ng-controller="studentController"> ... </div> 在这里,我们已经声明采用ng-controller指令的控制器studentCont

  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

    本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替

随机推荐