在正文之前,先注意一点。
 对于 HTML 应用程序,通常建议把所有的脚本都放置在 元素的最底部。
 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
AngularJS表达式
| 指令 | 作用 | 
|---|---|
| ng-app | 定义一个 AngularJS 应用程序 | 
| ng-model | 把元素值(比如输入域的值)绑定到应用程序 | 
| ng-bind | 把应用程序数据绑定到 HTML 视图 | 
| ng-init | 初始化 AngularJS 应用程序变量 (通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它) | 
| ng-controller | 指明了控制器 | 
| ng-repeat | 对于集合中(数组中)的每个项会 克隆一次 HTML 元素 | 
| ng-show | 元素显示,参数值为true显示 | 
| ng-hide | 元素隐藏,参数值为true隐藏 | 
| ng-disabled | 元素禁用,参数值为true禁用 | 
| ng-click | 元素点击事件 | 
| ng-if | 条件事件 | 
| ng-switch | 多条件判断 | 
创建自定义指令
举一个菜鸟教程的例子:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
  注意:使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
 你可以通过元素名,属性,类名,注释来调用指令:
 元素名:
<runoob-directive></runoob-directive>
  属性:
<div runoob-directive></div>
  类名:
<div class="runoob-directive"></div>
  注释:
<!-- directive: runoob-directive -->
  限制使用:
你可以限制你的指令只能通过特定的方式来调用。
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
  restrict 值可以是以下几种:
 E 作为元素名使用
 A 作为属性使用
 C 作为类名使用
 M 作为注释使用
 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
ng-model
用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值,并且它可以根据表单域的状态添加/移除以下类:ng-empty,ng-not-empty,ng-touched,ng-untouched
 ,ng-valid,ng-invalid,ng-dirty,ng-pending,ng-pristine
ng-invalid:未通过验证的表单
 ng-valid:布尔型属性,它指示表单是否通过验证。如果表单当前通过验证,他将为true
 ng-dirty:布尔值属性,表示用户是否修改了表单。如果为 ture,表示有修改过;false 表示修没有修改过
 ng-touched:布尔值属性,表示用户是否和控件进行过交互
 ng-pristine:布尔值属性,表示用户是否修改了表单。如果为ture,表示没有修改过;false表示修改过
控制器
 <div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script> 
  过滤器
| 过滤器 | 描述 | 
|---|---|
| currency | 格式化数字为货币格式。 | 
| filter | 从数组项中选择一个子集。 | 
| lowercase | 格式化字符串为小写。 | 
| orderBy | 根据某个表达式排列数组。 | 
| uppercase | 格式化字符串为大写。 | 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="http://www.runoob.com/try/demo_source/namesController.js"></script>
</body>
</html>
  
京公网安备 11010502036488号