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. uMlet建模工具

    下载:http://www.umlet.com/ 无意中发现的一款建模工具,能快速搭建数据库模型,前置安装条件是java环境. 这是我建的user模型表,2个字段name和age,2个方法getAge ...

  2. 迷之this？（转）

    1. 迷之this 对于刚开始进行 JavaScript 编程的开发者来说,this 具有强大的魔力,它像谜团一样需要工程师们花大量的精力去真正理解它. 在后端的一些编程语言中,例如 Java.PHP ...

  3. 用int类型表示最大公倍数

    代码 #include<stdio.h> #include<stdlib.h> #include<limits.h> int main(void) { int m, ...

  4. Linux之Shell的算术运算

    在Bash的算术运算中有以下几种方法:名称                语法                    范例算术扩展            $((算术式))              r ...

  5. 【转】UML类图几种关系的总结

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  6. js之作用域和面向对象

    作用域 JavaScript以函数为作用域 函数的作用域在函数未被调用之前,已经创建 函数的作用域存在作用域链,并且也是在被调用之前创建 示例一 xo = "alex"; func ...

  7. LinearLayout

    概念: LinearLayout是一种线性布局,他会将控件在水平和垂直方向做线性排列 官方文档: http://developer.android.com/guide/topics/ui/layout ...

  8. $.extend() 或 jQuery.extend() 与 $.fn.Xxx 或 jQuery.fn.extend(object) 之jQuery插件开发

    jQuery为开发插件提拱了两个方法 语法现象1:$.extend() 或 jQuery.extend() 或 jQuery.extend(object)//可以理解为为jQuery类添加类方法或静态 ...

  9. sublime-text3设置浏览器预览html

    选择:Tools - Build System - New Build Syatem... 或者:工具 - 编译系统 - 新编译系统 然后粘贴代码 { "cmd": [" ...

  10. 【GoLang】GoLang 的流程与函数

    003.GO流程与函数 1 概述 1.1 Go中流程控制分三大类:条件判断,循环控制和无条件跳转 2 流程 2.1 if 2.1.1 if条件判断语句中不需要括号 2.1.2 条件判断语句里面允许声明 ...