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. css固定元素位置(fixed)

    来源:http://www.cnblogs.com/lecaf/archive/2011/03/25/fixed.html fixed是一种特殊的absolute,同样不占文档流,特殊的地方在于fix ...

  2. 联不上网 Unable to initialize Windows Sockets interface. General failure.

    电脑莫名联不上网 Unable to initialize Windows Sockets interface. General failure. Unable to initialize the W ...

  3. Codeforces 260 B. Fedya and Maths

    题目链接:http://codeforces.com/contest/456/problem/B 解题报告:输入一个n,让你判断(1n + 2n + 3n + 4n) mod 5的结果是多少?注意n的 ...

  4. BZOJ4514——[Sdoi2016]数字配对

    有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci×cj 的 ...

  5. Java代码注释XXX TODO FIXME 的意义

    特殊注释: 1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是性能差等原因 3 FIXME 代码是错误的,不能工作,需要修复 TODO: + 说明:如果代码中有该标识,说 ...

  6. JDBC连接MySQL数据库的方法和实例

    import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java. ...

  7. 百度网盘爬虫Python

    ": for i in range((shares["total_count"]-1)/ONESHAREPAGE): try: dbcurr.execute('INSER ...

  8. 1.1---判断字符串是否所有字符都不相同（CC150）

    import java.util.*; public class Different { public boolean checkDifferent(String str) { // write co ...

  9. 9. JEB 1.5插件编写一

    2.0之后好像新增加了很多API,有所区别 本文采用Java+Eclipse作为开发环境 插件支持的语言  文档: jeb-1.5/doc/index.html 一.Hello World工程 1. ...

  10. htpasswd命令

    htpasswd命令是Apache的Web服务器内置工具,用于创建和更新储存用户名.域和用户基本认证的密码文件. 语法 htpasswd(选项)(参数) 选项 -c:创建一个加密文件:-n:不更新加密 ...