简介
以 JavaScript 编写的库，是一个 JavaScript 框架
一、表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
- 表达式写在双大括号内：{{ expression }}。
- 表达式把数据绑定到 HTML，与 ng-bind 指令有异曲同工之妙。
- 将在表达式书写的位置"输出"数据。
- 它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }
二、指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
| ng-app | 初始化一个 AngularJS 应用程序（告诉 AngularJS，ng-app所在元素是 AngularJS 应用程序 的"所有者"。）
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {{ firstName }}</p> </div> |
| ng-init | 定义初始值 |
| ng-model |
把元素值（比如输入域的值）绑定到应用程序。用于表单元素的，支持双向绑定（在修改输入域的值时， AngularJS 属性的值也将修改：）。对普通元素无效（{数据绑定：{ firstName }} 是通过 ng-model="firstName" 进行同步。） 模型 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script>
<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form>
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>状态</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form>
|
| ng-repeat | 对于集合中（数组中）的每个项会 克隆一次 HTML 元素
<div data-ng-app="" data-ng-init="names=['Jani1','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li data-ng-repeat="x in names"> {{ x }} </li> </ul> </div> |
创建自定义指令：
- 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
- 元素<runoob-directive></runoob-directive>
- 只能通过属性的方式来调用，restrict : "E",
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
- 属性<div runoob-directive></div>
- 只能通过属性的方式来调用，restrict : "A",
<body ng-app="myApp"> <div runoob-directive></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script>
- 类名<div class="runoob-directive"></div>
- 只能通过属性的方式来调用，restrict : "C",
<body ng-app="myApp"> <div class="runoob-directive"></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "C", template : "<h1>自定义指令!</h1>" }; }); </script>
- 注释<!-- directive: runoob-directive -->
- 只能通过属性的方式来调用，restrict : "M",
<body ng-app="myApp"> <!-- directive: runoob-directive --> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "M", replace : true, template : "<h1>自定义指令!</h1>" }; }); </script>
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。