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指令的世界 ...

随机推荐

linux 下安装tomcat
1.把安装包放到 tomcat的目录, 2.然后解压 tar -zxvf apache-tomcat-7.0.70.tar.gz 解压. 3.然后启动tomcat
下一代GNU/Linux显示服务Wayland 1.12正式发布
导读最近,Bryce Harrington很高兴地宣布了“面向GNU/Linux操作系统的Wayland 1.12.0显示服务已正式发布”的消息.与它一同到来的,还有Weston 1.12.0合成器 ...
php配置中的register_globals用法
开发的时候设置成register_globals=off,只能通过post或get得到前端数据．参考资料:http://blog.csdn.net/alex_best/article/details ...
Android学习之路书籍推荐
Android开发书籍推荐:从入门到精通系列学习路线书籍介绍 JAVA入门书籍: < Introduction to java programming > < Core java & ...
git 教程（9）-远程仓库
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Gi ...
am等adb命令小总结
本文的am部分参考了:http://www.cnblogs.com/dyllove98/archive/2013/07/08/3178094.html 的博客今天研究adb的时候发现在pc端也可以启 ...
java的ArrayList使用方法
在第N个数据后面添加一个数据用法: 在第1个元素后面添加E list.add(1, "E");
3.2---最小栈（CC150）
//思路:入栈时不是最小值,永远都没机会成为最小值. import java.util.Stack; class MinStack { private Stack<Integer> sta ...
使用socket方式连接Nginx优化php-fpm性能
Nginx连接fastcgi的方式有2种:TCP和unix domain socket 什么是Unix domain socket?-- 维基百科 Unix domain socket 或者 IPC ...
使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

AngularJS 简介、指令、表达式

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

随机推荐

热门专题