简介
AngularJS是为了解决静态网页技术在构建动态应用上的不足.
AngularJS通过使用我们称为 标识符 (directives)的结构，让浏览器能够识别新的语法。例如：
- 使用双大括号{{}}语法进行数据绑定；
- 使用DOM控制结构来实现迭代或者隐藏DOM片段；
- 支持表单和表单的验证；
- 能将逻辑代码关联到相关的DOM元素上；
- 能将HTML分组成可重用的组件。
1. ng-app ：指令标记了 AngularJS 脚本的作用域。
<html lang="en" ng-app>
2. 脚本标签
<script src="lib/angular/angular.js"></script>
3. 双大括号绑定的表达式：{{}}
AngularJS表达式 Angular expression 是一种类似于JavaScript的代码片段。
AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。
{{‘yet‘ + ‘!‘}}
{{yourname || ‘World‘}}
4. ng-controller, ng-repeat
<html ng-app> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> ... </body> </html>
eg:
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
eg: checkbox, radio
<script>
var myApp=angular.module(‘myApp‘,[])
.controller(‘secondCtrl‘,function($scope){
$scope.sex=1
$scope.data=[{id:0, sex:‘男‘},{id:1, sex:‘女‘}]
})
</script>
<div class="test">
<label ng-repeat="d in data">
<input type="radio" name="xingbie" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}}
</label>
<label ng-repeat="d in data">
<input type="checkbox" name="sex" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}}
</label>
</div>
参考资料:
1. 中文教程网址
AngularJS 介绍
时间： 2024-11-05 14:57:00