AngularJS入门小实例

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

让程序飞

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

阅读量261

点赞数

本文链接：https://blog.youkuaiyun.com/javanbme/article/details/77332213

版权

AngularJs 专栏收录该内容

5 篇文章

订阅专栏

<!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 表达式支持过滤器