AngularJS对于SQL的操作心得以及DOM的研究

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: AngularJS对于SQL的操作心得以及DOM的研究

服务器代码

在这里插入图片描述

以下列出了几种类型的服务器端代码:
使用PHP和mysql。返回JSON。
使用PHP和MS访问。返回JSON。
使用ASP.Net、VB和MS Access。返回JSON。
使用ASP.Net、razor和SQL Lite。返回JSON。

<div ng-app="myApp" ng-controller="customersCtrl">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("https://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

在这里插入图片描述

跨域HTTP请求

如果需要从不同的服务器(不同的域名)获取数据,则需要使用跨域HTTP请求。
跨域请求在网页上非常常见。许多网页从不同的服务器加载CSS、图像、JS脚本等。
在现代浏览器中,为了数据安全,所有请求都严格限制在同一域名内。如果需要从不同的站点调用数据,则需要通过跨域解决。
以下PHP代码运行用于跨域访问的网站。

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>
header("Access-Control-Allow-Origin: *");

Angularjs提供了为HTML DOM元素的属性绑定应用程序数据的说明。

Ng禁用指令

ng disabled指令直接将应用程序数据绑定到HTML的disabled属性。

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">点我!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>

<p>
{{ mySwitch }}
</p>

</div>

在这里插入图片描述
在这里插入图片描述
示例说明:
ng disabled指令将应用程序数据“myswitch”绑定到HTML的disabled属性。
ng模型指令将“myswitch”绑定到HTML输入复选框元素的内容(值)。
如果myswitch为true,则按钮将不可用:

<p>
<button disabled>点我!</button>
</p>

如果 mySwitch 为false, 按钮则可用:

<p>
<button>点我!</button>
</p>

Ng显示命令

ng show指令隐藏或显示HTML元素。

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

在这里插入图片描述
ng show指令根据value的值显示(隐藏)HTML元素。
可以使用表达式计算布尔值(true或false):

<div ng-app="" ng-init="hour=13">
 
<p ng-show="hour > 12">我是可见的。</p>
 
</div>

Ng隐藏指令

ng hide指令用于隐藏或显示HTML元素。

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

隐藏HTML元素
ng hide指令用于设置应用程序部分是否可见。
Ng hide=“true”将HTML元素设置为不可见。
Ng hide=“false”是一组可见的HTML元素。
personcontroller的第一部分类似于controller一章。
应用程序有一个默认属性:$scope.myVar=false;
ng hide指令设置<p>元素和两个输入字段是否可见,并根据myvar的值设置它们是否可见(true或false)。
toggle()函数用于切换myvar变量的值(true和false)。
Ng hide=“true”使元素不可见。

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

ng show指令可用于设置应用程序的一部分是否可见。
Ng show=“false”可以将HTML元素设置为不可见。
Ng show=“true”可以将HTML元素设置为可见。

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
6月前
|
SQL 分布式计算 DataWorks
DataWorks操作报错合集之SQL错误[0A000],通常是什么造成的
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
60 1
|
6月前
|
SQL 关系型数据库 MySQL
go 通过sql操作mysql
go 通过sql操作mysql
35 1
|
5月前
|
SQL 分布式计算 MaxCompute
SQL开发问题之对于ODPS中的UNION操作,执行计划的问题如何解决
SQL开发问题之对于ODPS中的UNION操作,执行计划的问题如何解决
|
5月前
|
SQL 分布式计算 DataWorks
MaxCompute操作报错合集之使用sql查询一个表的分区数据时遇到报错,该如何解决
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
|
5月前
|
SQL 分布式计算 DataWorks
DataWorks操作报错合集之在执行SQL查询时遇到报错,代码为[XX000],该怎么解决
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
5月前
|
SQL 分布式计算 资源调度
MaxCompute操作报错合集之执行SQL Union All操作时,数据类型产生报错,该怎么解决
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
146 1
|
5月前
|
SQL 分布式计算 大数据
MaxCompute操作报错合集之执行多条SQL语句时,使用同一个实例来运行,遇到报错,该如何解决
MaxCompute是阿里云提供的大规模离线数据处理服务,用于大数据分析、挖掘和报表生成等场景。在使用MaxCompute进行数据处理时,可能会遇到各种操作报错。以下是一些常见的MaxCompute操作报错及其可能的原因与解决措施的合集。
|
5月前
|
SQL DataWorks NoSQL
DataWorks操作报错合集之在执行带with语句的SQL查询时出现了错误,是什么原因
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
5月前
|
SQL 分布式计算 DataWorks
DataWorks操作报错合集之重新上传后只有SQL无法运行,而Python可以正常运行,是什么导致的
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
5月前
|
SQL Java 数据库连接
深入理解SQL中的LEFT JOIN操作
深入理解SQL中的LEFT JOIN操作
下一篇
DataWorks