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

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

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

　　<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></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>

　　　　　　注释<!-- 指令: runoob-directive -->

　　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 简介、指令、表达式的更多相关文章

  1. AngularJS学习之旅—AngularJS 简介(一)

    一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...

  2. 【03】AngularJS 简介

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML ...

  3. Angularjs简介

    很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法.应用.次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论. angularjs简介. angular ...

  4. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  5. AngularJS 1.x系列：AngularJS简介及第一个应用（2）

    1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...

  6. 29.AngularJS 简介

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 H ...

  7. AngularJS简介与四大特征

    1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...

  8. AngularJS ng-model 指令

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 代码示例如下: <!DOCTY ...

  9. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

随机推荐

  1. Mac OS X 11以上系统的Rootless机制问题

    由于项目紧,系统一直停留在10版本,最近清闲之后,第一件事就是升级了系统,到11El Capitan版本. 本来想着随便升级了,可能有好玩的东东,结果好玩的木有看见,项目开发环境崩溃了,何其衰耶? 废 ...

  2. SpringBoot使用的心得记录

    security配置 import com.yineng.corpsysland.security.*; import com.yineng.corpsysland.web.filter.Author ...

  3. 客户端安全-xss-2解决方案

    1.需求 提供xss解决方案 2.方式 对需要显示在html中的用户代码进行编码 3.处理方案 1.用户的数据到后端前用下面的编码层代码进行编码. function htmlEncodeCharact ...

  4. header()相关

    header("Content-type: text/html; charset=utf-8"); header("refresh:3;url=biaodan.php?n ...

  5. 如何使用coding.net

        由于我有一位十分聪明能干的室友会使用coding.net,于是我决定奉献一下室友的智慧,告诉大家如何使用conding.net上交作业.(如有说错的地方希望大家可以指出来) 首先登陆codin ...

  6. OpenGL图元的颜色属性

    OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 1. RGBA颜色RGBA模式中,每一个像素会保存以下数据:R值(红色分量).G值(绿色分量).B值(蓝色分量)和A值(alpha分 ...

  7. ACM - a + b Problem

    前几天看了ACM的第一题,映入眼帘的是一个“简单”的题目: 输入两个数,a,b 输出他们的和. 本着,此乃ACM的原则,便有了如下的思考: ACM的题目肯定很难,a+b,怎么可能直接printf,不行 ...

  8. c_水程序

    * ** This program reads input lines from the standard input and prints ** each input line, followed ...

  9. 11.2---字符串数组排序，删除变位词（CC150）

    这道题主义的就是,要利用数组自带的sort函数. 此外,注意,利用hash来判断是否出现了. public static ArrayList<String> sortStrings(Str ...

  10. centos终端中mysql中文显示乱码的处理

    http://stackoverflow.com/questions/3513773/change-mysql-default-character-set-to-utf-8-in-my-cnfhttp ...