1.指令
(1)ng-init 指令初始化 AngularJS 应用程序变量。不常用
HTML5 允许自定义属性以 data- 开头。而AngularJS 属性以 ng- 开头,所以可以使用 data-ng- 来让网页对 HTML5 有效。
(2)ng-app 指令定义一个 AngularJS 应用程序。一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
(3)ng-model 指令把元素值(比如输入域的值)绑定到应用程序。能够同步数据。
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
(4)ng-bind 指令把应用程序数据绑定到 HTML 视图。
(5)ng-repeat会重复一个 HTML 元素,类似for循环,可用于数组或对象。
用法:ng-repeat=“x in arrs”
(6).directive 自定义指令。可以元素名、属性、类名、注释形式调用
<body ng-app="myApp">
<!--用分隔符-来调用-->
<runoob-directive></runoob-directive> <!--元素名-->
<div runoob-directive></div> <!--属性-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
//驼峰命名
return {
template : "<h1>自定义指令!</h1>"
};
});//使用驼峰法来命名一个指令,但在使用它时需要以-分割
</script>
</body>
<body ng-app="myApp">
<div class="runoob-directive"></div> <!--类名-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C", //必须设置restrict的值为 "C" 才能通过类名来调用指令
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
<body ng-app="myApp">
<!-- directive: runoob-directive --> <!--注释-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M", //必须设置restrict的值为 "M"
replace : true, //需要在该实例添加 replace 属性
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
上面四种调用方式效果均是下图:
restrict 限制使用,有如下值:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
(7)ng-show ng-show 属性返回 true 的情况下显示内容
<span ng-show="var">xxxx</span>
2.表达式
{{ expression }},可以包含文字、运算符和变量。功能与与ng-bind相似 。
AngularJS 表达式可以写在 HTML 中。
AngularJS 表达式不支持条件判断,循环及异常。
AngularJS 表达式支持过滤器。
{{ quantity * cost }}
与
<span ng-bind="quantity * cost"></span>
3.应用
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>