AngularJS快速入门指南19:示例代码

时间:2022-09-07 19:04:56

  本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码。

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p> </div>

运行


AngularJS基础

我的第一个AngularJS指令

我的第一个AngularJS指令(带data-前缀)

我的第一个AngularJS表达式

我的第一个AngularJS控制器

AngularJS基础介绍


AngularJS表达式

一个简单的表达式示例

没有ng-app的表达式

带有数字的表达式

使用ng-bind指令代替数字表达式

带有字符串的表达式

使用ng-bind指令代替字符串表达式

带有Objects对象的表达式

使用ng-bind指令代替Objects对象表达式

带有数组的表达式

使用ng-bind指令代替数组表达式

AngularJS表达式概述


AngularJS指令

AngularJS指令

ng-model指令

ng-repeat指令(数组)

ng-repeat指令(Objects对象)

AngularJS指令概述


AngularJS控制器

AngularJS控制器

控制器属性

控制器方法

在JavaScript文件I中的控制器

在JavaScript文件II中的控制器

AngularJS控制器概述


AngularJS过滤器

表达式过滤器uppercase

表达式过滤器lowercase

表达式过滤器currency

指令过滤器orderby

对输入内容进行过滤

AngularJS过滤器概述


AngularJS XMLHttpRequest

读取一个静态JSON文件

AngularJS Http对象概述


AngularJS表格

显示一个简单的表格

显示一个带有CSS样式的表格

显示一个带有orderBy过滤器的表格

显示一个带有uppercase过滤器的表格

显示一个带有index行号的表格

显示一个带有even和odd样式的表格

AngularJS表格概述


AngularJS - 从SQL中读取数据

从MySQL数据库中读取数据

从SQL Server数据库中读取数据

AngularJS SQL概述


AngularJS DOM节点

ng-disabled指令

ng-show指令

ng-hide指令

AngularJS DOM节点概述


AngularJS事件

ng-click指令

ng-hide指令

ng-show指令

AngularJS事件概述


AngularJS模块

在body中的AngularJS模块

在文件中的AngularJS模块

AngularJS模块概述


AngularJS表单

AngularJS表单

AngularJS数据验证

AngularJS表单概述


AngularJS API

angular.lowercase()

angular.uppercase()

angular.isString()

angular.isNumber()

AngularJS API概述


AngularJS Bootstrap

使用Bootstrap的AngularJS

使用Bootstrap和Includes的AngularJS

AngularJS Bootstrap概述


AngularJS Application

AngularJS Note Application

AngularJS TODO Application

AngularJS Application概述