AngularJS 简介、指令、表达式

　　AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
　　AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

　　AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

　　AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

　　AngularJS 指令：

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

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

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

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

　　　　　　为应用程序数据提供类型验证（number、email、required）。

　　　　　　为应用程序数据提供状态（invalid、dirty、touched、error）。

　　　　　　为 HTML 元素提供 CSS 类。

　　　　　　绑定 HTML 元素到 HTML 表单。

　　　　实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>

<p>姓名: <input type="text" ng-model="firstName"></p>

<p>你输入的为: {{ firstName }}</p>

</div>

</body>

</html>

　　　　ng-app指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName" 进行同步。

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

　　　　实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">

  <p>使用 ng-repeat 来循环数组</p>

  <ul>

    <li data-ng-repeat="x in names">

      {{ x }}

    </li>

  </ul>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

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

</body>

</html>

　　　　创建自定义的指令

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

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

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

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

　　　　实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

</html>

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

　　　　　　元素名<runoob-directive></runoob-directive>

　　　　　　属性<div runoob-directive></div>

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

注释

　　AngularJS 表达式：

　　　　AngularJS 使用 表达式 把数据绑定到 HTML。

　　　　AngularJS 表达式写在双大括号内：{{ expression }}。

　　　　AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

　　　　AngularJS 将在表达式书写的位置"输出"数据。

　　　　AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

　　　　实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app>

<p>我的第一个表达式: {{ 5 + 5 }}</p>

</div>

</body>

</html>

　　　　AngularJS数字实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: {{ quantity * cost }}</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>总价: <span ng-bind="quantity * cost"></span></p>

</div>

</body>

</html>

　　　　AngularJS字符串实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名: {{ firstName + " " + lastName }}</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

</body>

</html>

　　　　AngularJS对象实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

</div>

</body>

</html>

　　　　AngularJS数组实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

</div>

</body>

</html>

　　　　AngularJS表达式与JavaScript表达式：

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

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

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

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

AngularJS 简介、指令、表达式的更多相关文章

AngularJS学习之旅—AngularJS 简介(一)
一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...
【03】AngularJS 简介
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML ...
Angularjs简介
很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法.应用.次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论. angularjs简介. angular ...
学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
AngularJS 1.x系列：AngularJS简介及第一个应用（2）
1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...
29.AngularJS 简介
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 H ...
AngularJS简介与四大特征
1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
AngularJS ng-model 指令
AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 代码示例如下: <!DOCTY ...
AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

随机推荐

HDU 5071 Chat(2014鞍山赛区现场赛B题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5071 解题报告:一个管理聊天窗口的程序,一共有八种操作,然后要注意的就是Top操作只是把编号为u的窗口 ...
thinkphp的CURD操作
增 //a字段是主键 $data['b'] = 'bbb'; $data['c'] = 'c'; $new_id = M('test')->data($data)->add(); //ec ...
cocos2dx 3.7中 AppDelegate.h的class TestController;这种写法的具体意思不太明白，只能猜是类似于外部定义的东西。
cocos2dx 3.7中 AppDelegate.h的class TestController;这种写法的具体意思不太明白,只能猜是类似于外部定义的东西.
剑指Offer 矩形覆盖
题目描述我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 解法,还是斐波那契数列 AC代码: class So ...
4.6---找二叉树中序后继（CC150）
因为,没有重复值,所以只需要做一个标记就OK了. public class Successor { static boolean flag = false; static int result = 0 ...
1.3---字符串重新排列后是否能够变成另一个字符串（CC150）
import java.util.*; public class Same { public boolean checkSam(String str1, String str2) { // write ...
django xadmin多个model的数据渲染在统一个template中
adminx.py demo class ModelAdmin(object): #.... def get_context(self): context = super(SimCardService ...
字符串、字符、字节以及bit位小结与疑问
字符串是由一个个字符组成的,每个字符又有一个或多个字节来表示,每个字节又由8个bit位来表示在C#里字符串通常由string来声明,字符由char来声明,字节由byte来表示,位由bit来表示,具 ...
Sum of Left Leaves
Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...
jquery单选框radio值改变change事件
2015年11月25日 13:39:03 $().ready(function(){ //默认显示#input_div if ($("input[name='type']:checked&q ...

AngularJS 简介、指令、表达式

AngularJS 简介、指令、表达式的更多相关文章

随机推荐

热门专题