服务器代码
以下列出了几种类型的服务器端代码:
使用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元素设置为可见。