admin 管理员组文章数量: 887021
2024年1月12日发(作者:goto鞋盒好吗)
W3School AngularJS教程来源:整理:飞龙日期:2014.10.1AngularJS 简介AngularJS 是一个 JavaScript 框架。它可通过 我们建议把脚本放在
元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngularJS 通过 ng-directives 扩展了 HTML。ng-app 指令定义一个 AngularJS 应用程序。ng-model 指令把元素值(比如输入域的值)绑定到应用程序。ng-bind 指令把应用程序数据绑定到 HTML 视图。AngularJS 实例在输入框中尝试输入:
姓名:
实例讲解:当网页加载完毕,AngularJS 自动开启。ng-app 指令告诉 AngularJS,
姓名为
AngularJS 实例
姓名为
我的第一个表达式: {{ 5 + 5 }}
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}AngularJS 数字AngularJS 数据就像 JavaScript 数字:AngularJS 实例
总价: {{ quantity * cost }}
总价:
姓名: {{ firstName + " " + lastName }}
姓名:
姓为 {{ me }}
姓为
第三个值为 {{ points[2] }}
第三个值为
AngularJS 指令AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把应用程序数据绑定到 HTML 元素。AngularJS 实例
在输入框中尝试输入:
姓名:
你输入的为: {{ firstName }}
价格计算器
数量: 价格:总价: {{ quantity * price }}
使用 ng-repeat 来循环数组
- {{ x }}
循环对象:
- {{ + ', ' + y }}
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。ng-init 指令ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。稍后您将学习更多有关控制器和模块的知识。ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touched、error)。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。ng-repeat 指令ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器AngularJS 应用程序被控制器控制。ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。控制器的 $scope 是控制器所指向的应用程序/HTML 元素。AngularJS 实例
姓:
姓名: {{ame + " " + me}}
姓:
姓名: {{me()}}
姓:
姓名: {{fullName()}}
- {{ + ', ' + y }}
lowercaseorderByuppercase格式化字符串为小写。根据某个表达式排列数组。格式化字符串为大写。向表达式添加过滤器过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。(下面的两个实例,我们将使用前面章节中提到的 person 控制器)uppercase 过滤器格式化字符串为大写:AngularJS 实例
姓名为 {{ me | uppercase }}
姓名为 {{ me | lowercase }}
总价 = {{ (quantity * price) | currency }}
向指令添加过滤器过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。orderBy 过滤器根据某个表达式排列数组:AngularJS 实例
循环对象:
- {{ + ', ' + y }}
输入过滤:
- {{ ( | uppercase) + ', ' + y }}
以下是存储在web服务器上的 JSON 文件:/try/angularjs/data/Customers_[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbk?p","City" : "Lule?","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "K?niglich Essen","City" : "Brandenburg","Country" : "Germany"},{"Name" : "Laughing Bacchus Wine Cellars","City" : "Vancouver","Country" : "Canada"},{
"Name" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},{"Name" : "North/South","City" : "London","Country" : "UK"},{"Name" : "Paris spécialités","City" : "Paris","Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "K?benhavn","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "?rhus","Country" : "Denmark"},{"Name" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}]AngularJS $httpAngularJS $http 是一个用于读取web服务器上数据的服务。$(url) 是用于读取服务器数据的函数。AngularJS 实例
- {{ + ', ' + y }}
{{ }} | {{ y }} |
AngularJS 实例
{{ }} | {{ y }} |
如果字母要转换为大写,可以添加 uppercase 过滤器:
AngularJS 实例
{{ }} | {{ y | uppercase}} |
{{ }} | {{ y }} |
{{ }} | {{ y }} |
}$outp .="]";$conn->close();echo($outp);?>PHP 读取 MS Access 代码open("PROVIDER=.4.0;Data Source=");$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
$outp = "[";while (!$rs->EOF) { if ($outp != "[") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}';
$rs->MoveNext();}$outp .= "]";$conn->close();echo ($outp);?>服务端 , VB 和 MS Access 代码<%@ Import Namespace=""%><%@ Import Namespace=""%><%@ Import Namespace=""%><%Header("Access-Control-Allow-Origin", "*")Dim conn As OleDbConnectionDim objAdapter As OleDbDataAdapterDim objTable As DataTableDim objRow As DataRowDim objDataSet As New DataSet()Dim outpDim cconn = New OledbConnection("Provider=.4.0;data source=")objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)(objDataSet, "myTable")objTable=("myTable")outp = "["c = chr(34)for each x in outp <> "[" then outp = outp & ","outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"nextoutp = outp & "]"(outp)%>服务端 , VB Razor 和 SQL Lite 代码
@{Header("Access-Control-Allow-Origin", "*")var db = ("Northwind");var query = ("SELECT CompanyName, City, Country FROM Customers");var outp ="["}@foreach(var row in query){if outp <> "[" then outp = outp + ","outp = outp + "{" + c + "Name" + c + ":" + c + @yName + c + ","outp = outp + c + "City" + c + ":" + c + @ + c + ","outp = outp + c + "Country" + c + ":" + c + @y + c + "}"}outp = outp + "]"@outpAngularJS HTML DOMAngularJS 有自己的 HTML 属性指令。ng-disabled 指令ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。AngularJS 实例
按钮
我是可见的。
我是不可见的。
{{ count }}
名:
姓:
姓名: {{ame + " " + me}}
名:
姓:
姓名: {{ame + " " + me}}
控制器污染了全局命名空间本教程中,截至目前为止的所有实例都使用了全局函数。在所有的应用程序中,都应该尽量避免使用全局变量和全局函数。全局值(变量或函数)可被其他脚本重写或破坏。为了解决这个问题,AngularJS 使用了模块。AngularJS 模块使用一个简单的 控制器:AngularJS 实例
AngularJS 应用程序文件现在您已经知道模块是什么以及它们是如何工作的,现在您可以尝试创建您自己的应用程序文件。您的应用程序至少应该有一个模块文件,一个控制器文件。首先,创建模块文件 "":var app = ("myApp", []);然后,创建控制器文件。本实例中是 "":ller("myCtrl", function($scope) { $ame = "John"; $me = "Doe";});最后,编辑您的 HTML 页面:AngularJS 实例
input 元素select 元素button 元素textarea 元素HTML 表单HTML 表单通常与 HTML 控件同时存在。AngularJS 表单实例First Name:JohnLast Name:DoeRESET
form = {"firstName":"John","lastName":"Doe"}master = {"firstName":"John","lastName":"Doe"}应用程序代码
form = {{user}}
master = {{master}}
HTML 属性 novalidate 用于禁用浏览器的默认验证。实例解析AngularJS ng-model 指令用于绑定 input 元素到模型中。模型对象 master 的值为 {"firstName" : "John", "lastName" : "Doe"}。模型函数 reset 设置了模型对象 user 等于 master。AngularJS 输入验证AngularJS 表单和控件可以验证输入的数据。输入验证在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。应用代码
Validation Example
HTML 表单属性 novalidate 用于禁用浏览器默认的验证。实例解析AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性: user 和 email。我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。AngularJS BootstrapAngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。查看 Bootstrap教程。Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 元素中添加如下代码:如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。HTML 代码
Users
Edit | First Name | Last Name |
---|---|---|
{{ }} | {{ }} |