服务器代码
以下列出了几种类型的服务器端代码：使用 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 代码运行用于跨域访问的网站。
<?phpheader("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 元素设置为可见。
评论