您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
AngularJS基础及应用
发布时间：2019-08-07 20:15:41编辑：雪饮阅读（）
angular入门小案例
要实现通过一个input在输入每个字符的时候都打实时打印到一个span中
<!DOCTYPE html>
<html ng-app=''>
<head>
<title>angular</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<input type='text' ng-model='str' /><span ng-bind='str'></span>
</body>
</html>
该案例按照传统的js语法则又要监听oninput事件又要获取dom并给获取的dom赋值，而这里仅仅定义几个属性，并引入angular
ng-app:定义angular的环境范围
ng-model:定义数据模型、数据输入和输出(双向绑定)
ng-bind:邦定数据来源
ng-app范围示例
<div ng-app=''>
<input type='text' ng-model='str' /><span ng-bind='str'></span>
</div>
<div>
<input type='text' ng-model='str' /><span ng-bind='str'></span>
</div>
同样的div内容，但仅定义了ng-app属性的div内部的ng语法才生效
双向绑定
<div ng-app=''>
<input type='text' ng-model='str' />
<input type='text' ng-model='str' />
</div>
该示例中无论你输入在第一个input中还是输入在第二个input中，另外一个input都会自动变更内容，也就是说每个input既可以作为输入端，同样可以作为输出端，这个和多个变量以引用地址共享值的方式很相似，而这里称作双向绑定
ng-bind
ng-bind可以用来绑定数据来源，而该来源还可以支持简单的表达式
<div ng-app=''>
<input type='text' ng-model='a' />
*
<input type='text' ng-model='b' />
<span ng-bind="a*b"></span>
</div>
ng模板
本案例效果同ng-bind，但略有不同的是，ng-bind通过绑定数据来源方式，而本案例则直接在某元素内部以模板的形式存在，实用程度上高于ng-bind
<div ng-app=''>
<input type='text' ng-model='a' />
*
<input type='text' ng-model='b' />
<span>{{a}}*{{b}}={{a*b}}</span>
</div>
ng事件
事件所用到的变量仅支持ng定义的变量
<div ng-app=''>
<input type='text' ng-model='a' />
<input type='button' ng-click='a=a+1' value="按钮" />
</div>
ng初始化
观察上面示例中有两个数相乘得积的示例发现，当页面刚进来时由于两个输入框都没有值，或者任一方没有值时就会出现结果NaN，这时候按照以往的做法就是给input现式声明一个value属性默认值，但在ng中这是不认的，ng接管了ui，对ui的控制仅从数据上。
则ng初始化值如下：
<div ng-app='' ng-init="a=0;b=0;">
<input type='text' ng-model='a' />
*
<input type='text' ng-model='b' />
<span>{{a}}*{{b}}={{a*b}}</span>
</div>
关键字词：angular,js
上一篇：芯烨58小票打印机的web打印
下一篇：Controller、常用依赖项