angularjs

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。
<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 }}
<!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="">
     <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
 
</body>
</html>

AngularJS应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。
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>

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。
AngularJS数字
<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>

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

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind		绑定
ng-model	双向绑定


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

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=“myModule”）连接到代码模块。
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 元素。
创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

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

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

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
AngularJS 实例
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

可以通过以下方式来调用指令

元素名

<runoob-directive></runoob-directive>


属性

<div runoob-directive></div>


类名

 <div class="runoob-directive"></div>


注释

<div class="runoob-directive"></div>

限制使用

你可以限制你的指令只能通过特定的方式来调用。
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
AngularJS模型
双向绑定
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

验证用户输入
<!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>

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

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>
</html>


应用状态

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>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

CSS类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
</head>
<body>

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

<p>编辑文本域，不同状态背景颜色会发生变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

</body>
</html>

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

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

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

Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
<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 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据。

Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
如果你修改了视图，模型和控制器也会相应更新：
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

Scope作用范围

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

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

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

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为：{{ lastName | uppercase}}</p>

</div>

货币样式
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | curr

</div>

向指令添加过滤器

orderBy过滤器根据表达式排列数组
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：
<div ng-app="myApp" ng-controller="namesCtrl">

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

自定义过滤器
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">


姓名: {{ msg | reverse }}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "HELLO";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

</body>
</html>

AngularJS 服务(Service)
什么是服务？

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

AngularJS 内建了30 多个服务。
$location服务

$location 服务，它可以返回当前页面的 URL 地址。

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>


var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location){
	$scope.myUrl = $location.absUrl();
})

$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;
})
})

$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);
});

AngularJS事件
ng-click指令
<div ng-app='' ng-controller='myCtrl'>
<button ng-click='count = count + 1 '>点我!</button>
<p>{{count}}</p>
</div>

隐藏HTML元素

ng-hide指令用于设置应用部分是否可见

ng-hide=“true” 设置 HTML 元素不可见。

ng-hide=“false” 设置 HTML 元素可见。
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',function($scope){
	$scope.firstName = 'John',
	$scope.lastName = 'Doe'
	$scope.myVar = false;
	$scope.toggle = function(){
		$scope.myVar = !$scope.myVar;
}
})
</script>
收起
AngularJs

AngularJS模型

AngularJS Scope(作用域)

AngularJS 过滤器

AngularJS 服务(Service)

AngularJS事件

angularjs

Angularjs

AngularJS是什么?

特性

核心特征

AngularJS的优点

AngulaJS的缺点

angularjs
