AngularJS 基础

Angular JS 基础

本文中的AngularJS是AngularJS 1.x

AngularJS是一个JavaScript框架。通过<script>标签添加到HTML页面。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

通过指令扩展html，通过表达式绑定数据到html。

AngularJS官网

AngularJS 官方API

菜鸟教程：AngularJS参考手册

简介

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
</head>
<body>
<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>
<script src="angular.min.js"></script>
</body>
</html>

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

什么是AngularJS

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
使用 ng-init 不是很常见。一般使用

【示例】

<div ng-app="" ng-init="firstName='John'"> 
    <p>姓名为 <span ng-bind="firstName"></span></p>
</div>

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

例如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

//显示10
<div ng-app=""> 
    <p><span >{{5+5}}</span></p>
</div>
//显示Danyang Zhang
<div ng-app="" ng-init="firstName='Danyang';lastName='Zhang'"> 
    <p><span >{{firstName+" "+ lastName}}</span></p>
</div>

AngularJS 应用

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>

Angular 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

添加指令

AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。

<div ng-app="myApp" zdy-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

Angular JS 表达式

数字

<div ng-app="" ng-init="quantity=1;cost=5">  
    <p>总价： {{ quantity * cost }}</p>
</div>

或者

<div ng-app="" ng-init="quantity=1;cost=5">
    <p>总价： <span ng-bind="quantity * cost"></span></p>
</div>

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名： {{ firstName + " " + lastName }}</p> 
</div>

或者

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓为 {{ person.lastName }}</p>
</div>

或者

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    <p>姓为 <span ng-bind="person.lastName"></span></p>
</div>

数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 {{ points[2] }}</p>
</div>

或者

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>

AngularJS 表达式与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS API

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString()  判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。

AngularJS指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。

AngularJS 指令

【示例】

<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>

ng-app

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init

ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。使用一个控制器或模块来代替它。

ng-model

ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

自定义指令

可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， zdyDirective, 但在使用它时需要以 - 分割, zdy-directive.

限制使用

restrict 值可以是以下几种:

E 作为元素名使用 Element
A 作为属性使用 Attribute
C 作为类名使用 Class
M 作为注释使用 Comment
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

元素名

<body ng-app="myApp">
<zdy-directive></zdy-directive>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "E",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

属性名

<body ng-app="myApp">
<div zdy-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "A",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

类名

<body ng-app="myApp">
<div class="zdy-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "C",
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

注释

<body ng-app="myApp">
<!-- directive:zdy-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("zdyDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>zdy的指令!</h1>"
    };
});
</script>
</body>

AngularJS 模型 ng-model

【示例】

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.name="Zdy"
    });
</script>

双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    {{name}}
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function($scope){
        $scope.name="Zdy"
    });
</script>

验证用户输入

提示信息会在 ng-show 属性返回 true 的情况下显示。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)。

<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>

CSS类

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid[-key]
ng-invalid[-key] 
ng-dirty  //是否和控件进行过交互
ng-pending
ng-pristine //是否修改过 true未修改，false修改

AngularJS Scope 作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

【示例】

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

Scope概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

如果你修改了视图，模型和控制器也会相应更新。

Scope 作用范围

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

【示例】

<div ng-app="myApp" >
<ul ng-controller="myCtrl">
    <input type="text" ng-model="name" />{{name}}
    <li ng-repeat="x in names">{{x}}</li>
</ul>
<ul ng-controller="zdyCtrl">
    <input type="text" ng-model="name"/>{{name}}
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
app.controller('zdyCtrl',function($scope,$rootScope){
    $scope.names = ["zdy","zzz","ddd"];
    $rootScope.name="ZDY";
})
</script>

AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

控制器方法

<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>

外部文件中的控制器

<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>

【personController.js】

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

过滤器	描述
currency	格式化为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

【示例】

{{lastName|uppercase}}
{{ (quantity * price) | currency }}

【orderBy排序实例】

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

【过滤输入】

<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>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>

AngularService

AngularJS 中你可以创建自己的服务，或使用内建服务。

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

$location

$http

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

XMLHttpRequest 实例

$timeout

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval

AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

自定义服务

【创建服务】

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

【使用服务】

app.controller('myCtrl', function($scope, hexafy) {  
    $scope.hex = hexafy.myFunc(255);
});

【过滤器适用自定义服务】

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

Select 选择框

【示例1：字符串数组】

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
    </select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

【示例2：对象数组】

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "Runoob", url : "http://www.runoob.com"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

【示例3：对象】

使用对象作为数据源, x 为键(key), y 为值(value)。

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

表格

ng-repeat 指令可以完美的显示表格。

排序 orderBy

orderBy : 'Country'

过滤器

{{ x.Country | uppercase }}

序号 ($index)

{{ $index + 1 }}

奇数／偶数行 even／odd

<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
    <script src="angular.min.js"></script>
    <script src="jquery.min.js"></script>
    <style>
    table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }
    table tr:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
      <!-- 按照country名称排序-->
      <tr ng-repeat="x in names | orderBy : 'Country'">
        <!-- 显示序号 -->
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <!-- 过滤为大写字母 -->
        <td>{{ x.Country | uppercase }}</td>
      </tr>
    </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            var strVar="";
            strVar += "";
            strVar += " ";
            strVar += "";
            strVar += "{";
            strVar += "\"records\":[";
            strVar += "{\"Name\":\"Alfreds Futterkiste\",\"City\":\"Berlin\",\"Country\":\"Germany\"},";
            strVar += "{\"Name\":\"Ana Trujillo Emparedados y helados\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Antonio Moreno Taquería\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Around the Horn\",\"City\":\"London\",\"Country\":\"UK\"},";
            strVar += "{\"Name\":\"B's Beverages\",\"City\":\"London\",\"Country\":\"UK\"},";
            strVar += "{\"Name\":\"Berglunds snabbköp\",\"City\":\"Luleå\",\"Country\":\"Sweden\"},";
            strVar += "{\"Name\":\"Blauer See Delikatessen\",\"City\":\"Mannheim\",\"Country\":\"Germany\"},";
            strVar += "{\"Name\":\"Blondel père et fils\",\"City\":\"Strasbourg\",\"Country\":\"France\"},";
            strVar += "{\"Name\":\"Bólido Comidas preparadas\",\"City\":\"Madrid\",\"Country\":\"Spain\"},";
            strVar += "{\"Name\":\"Bon app'\",\"City\":\"Marseille\",\"Country\":\"France\"},";
            strVar += "{\"Name\":\"Bottom-Dollar Marketse\",\"City\":\"Tsawassen\",\"Country\":\"Canada\"},";
            strVar += "{\"Name\":\"Cactus Comidas para llevar\",\"City\":\"Buenos Aires\",\"Country\":\"Argentina\"},";
            strVar += "{\"Name\":\"Centro comercial Moctezuma\",\"City\":\"México D.F.\",\"Country\":\"Mexico\"},";
            strVar += "{\"Name\":\"Chop-suey Chinese\",\"City\":\"Bern\",\"Country\":\"Switzerland\"},";
            strVar += "{\"Name\":\"Comércio Mineiro\",\"City\":\"São Paulo\",\"Country\":\"Brazil\"}";
            strVar += "]";
            strVar += "}";
            console.log(strVar);
            var json =JSON.parse(strVar);
            console.log (json)
            $scope.names=json.records;
        });
    </script>
</body>
</html>

表单

【实例】

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        //直接赋值“=”，会使得二者绑定在一块，改变一个就会改变另一个
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

【表单验证实例】

<body>

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
</body>

DOM 与事件：ng-disabled,ng-show,ng-hide,ng-click

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
</div>

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>

ng-click

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

AngularJS 包含

<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>

AngularJS 动画

AngularJS动画-菜鸟教程

最后编辑于：2017.12.05 13:22:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270

AngularJS 基础

简介

AngularJS 扩展了 HTML

什么是AngularJS

AngularJS 指令

AngularJS 表达式

AngularJS 应用

Angular 模块

创建模块

添加控制器

添加指令

Angular JS 表达式

数字

字符串

对象

数组

AngularJS 表达式 与 JavaScript 表达式

AngularJS API

AngularJS指令

AngularJS 指令

ng-app

ng-init

ng-model

ng-repeat

自定义指令

限制使用

元素名

属性名

类名

注释

AngularJS 模型 ng-model

双向绑定

验证用户输入

应用状态

CSS类

AngularJS Scope 作用域

Scope概述

Scope 作用范围

根作用域

AngularJS 控制器

AngularJS 控制器

控制器方法

外部文件中的控制器

AngularJS 过滤器

AngularService

$location

$http

$timeout

$interval

自定义服务

Select 选择框

表格

排序 orderBy

过滤器

序号 ($index)

奇数／偶数行 even／odd

表单

DOM 与事件：ng-disabled,ng-show,ng-hide,ng-click

ng-disabled 指令

ng-show 指令

ng-hide 指令

ng-click

AngularJS 包含

AngularJS 动画

推荐阅读更多精彩内容

AngularJS 表达式与 JavaScript 表达式