AngularJS入门小实例

最新推荐文章于 2022-04-27 19:46:52 发布

原创最新推荐文章于 2022-04-27 19:46:52 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

5 篇文章

订阅专栏

本文介绍AngularJS的基础用法，包括如何使用文本输入指令与模型进行双向绑定，展示AngularJS表达式的特性和使用方法，以及如何初始化变量并进行数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app>
<head>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
	<title></title>
</head>
<body>
	Your name:<input type="text" ng-model="test"  placeholder="请输入姓名" >
	<hr>
	hello,{{test || ''}}

	        <div ng-app="" ng-init="firstName='John';num1=2;num2=3">
 
	<p>姓名为 <span ng-bind="firstName"></span></p>
	<p>结果为 <span ng-bind="num1+num2"></span></p>
 	<p>结果为 <span >{{num1+num2}}</span></p>
	</div>

<div ng-app="" ng-init="Person={firstName:'张',lastName:'三'}">
{{Person.firstName}}
</div>

<div ng-app="" ng-init="Number1=[1,2,3,4,5]">
{{Number1[1]}}
</div>

</body></html>

文本输入指令<input ng-model="test" />绑定到一个叫test的模型变量。

双大括号标记将test模型变量添加到问候语文本。

你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

ng-app=" " 定义angularJS的使用范围；

ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；

ng-model="变量" 定义变量名；

ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器