这是我的流程: 主页位于 '/main' url，因此当用户转到该页面时，我的 Web 服务器返回一个静态 html:
<!DOCTYPE html>
<html ng-app="sam">
<head>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="BuildingsController as buildings">
<button ng-click="RefreshBuildings()">Refresh</button>
<h1>{{buildings.elements.length}}</h1>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>last_updated</th>
<th>based_on_file</th>
</tr>
<tr ng-repeat="element in buildings.elements | orderBy:'-id'">
<td>{{element.id}}</td>
<td><a ng-href="/getTenants?buildingId={{element.id}}">{{element.name}}</a></td>
<td>{{element.last_updated | date}}</td>
<td>{{element.based_on_file}}</td>
<td><button ng-click="buildings.UpdateDataBase(element.id)">Refresh</button></td>
</tr>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
这是js文件:
(function(){
var app = angular.module('sam', []);
app.controller('BuildingsController', ['$http','$log', function($http, $log){
//Update scope pramaters
this.RefreshGui = function(elements){
this.elements = elements
};
//call server to get all builgings' info
this.GetBuildingsData = function(){
//'this' inside the scope of success function will point to $http, so we store the controller pointer into tmp
tmp = this;
$http.get('/fetchBuildings').success(function(data) {
//$log.log(data);
tmp.RefreshGui(data);
});
};
//call server to update building's database
this.UpdateDataBase = function(element_id){
//'this' inside the scope of success function will point to $http, so we store the controller pointer into tmp
tmp = this;
//need to serialize data in angular (http://stackoverflow.com/questions/12190166/angularjs-any-way-for-http-post-to-send-request-parameters-instead-of-json)
//as a best practice do it also when sending ajax requests via jquery
// or To globally override the default transforms, override the $httpProvider.defaults.transformRequest and $httpProvider.defaults.transformResponse properties of the $httpProvider. as suggested in http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/
$http.post('/updateBuildings', $.param({'element_id': element_id})).success(function(data) {
//$log.log(data);
tmp.RefreshGui(data);
});
};
//on launch call UpdateBuildings with no paramters, this will build the database from scratch
this.GetBuildingsData();
}]);
})();
当用户点击建筑物名称的链接时，我很难理解如何继续流程:
<td><a ng-href="/getTenants?buildingId={{element.id}}">{{element.name}}</a></td>
我的意图是向用户呈现一个新的 html 页面，他可以在其中看到相关建筑物的租户数据表。我在服务器端获取建筑物 ID 并从数据库中获取这些详细信息没有问题，但问题是我要返回给客户端什么？静态 html ？如何使用 Angular 在该 html 中植入我刚刚从数据库中获取的动态详细信息？这首先是一个糟糕的设计吗？因为我认为它不符合 Angular 的单页应用程序基础。
请帮忙。 谢谢!
最佳答案
从服务器端呈现过渡到单页应用程序 (SPA) 客户端呈现世界时，您会遇到正常的概念困难。我将尝试总结一些基础知识以帮助您入门:
在 SPA 中，您有一个独特的静态 index.html 文件，它会在第一次请求时加载，并且永远不会再次加载。它是唯一定义 html 和 body 标签的文件，包括所需的脚本和 css 文件，通常创建网页的通用结构:页眉、页脚、菜单...
您的应用程序的其余 html 文件称为“部分文件”。它们是 html 的静态片段，没有 html 和 body 标签，它们被插入到 index.html 文件中。 要定义它们的插入位置，您必须使用客户端路由系统。看看 ngRoute 或 ui-router(我推荐这个)。它们允许您在 index.html 中定义 block (ngViews 或 ui-views)，这些 block 将填充您的部分内容。
除了静态 html 之外，您还需要动态数据来填充您的 View (您的租户、您的建筑物...)。您将通过 AJAX 请求获取此数据，如果您的后端有 REST API，通常使用 Angular $http 服务或 $resource。 这些请求不会返回 Html，相反，它们将返回您将分配给您的范围的 JSON 对象，这将自动更新您在 View 中定义的绑定(bind)。
基本上，简化:加载 index.html，将部分加载到其中，与此部分相关联的 Controller 进行 AJAX 调用以获取将填充此部分的 JSON 格式的数据。
编辑
对于 ui-router，给你一个想法，你会做这样的事情:
首先定义构建状态:
.config(function ($stateProvider) {
$stateProvider.state('building', {
url : "/building/:id",
views: {
"main": {
controller: 'BuildingController',
templateUrl: 'partials/building.tpl.html'
}
},
resolve : {
building : function($stateParams, $http) { //get the building via AJAX, $stateParams.id is the id of your building
return $http('/api/building/:id', {id: $stateParams.id}).success(function(res){
return res;
});
}
}
});
});
这会将 building.tpl.html 部分加载到您必须在 index.html 中定义的 ui-view“main”。请注意，我们正在使用 resolve 属性从后端获取建筑数据。 加载部分后，将执行 Controller ，并注入(inject)构建信息，以便您可以将其分配给范围:
.controller('BuildingController', function($scope, building){
$scope.building = building;
});
那么现在，您的链接将是这样的:
<td><a ui-sref="building({id: element.id})">{{element.name}}</a></td>
我真的建议你看一下 ui-router 文档:
关于javascript - 如何根据 ng-href 的数据返回动态 html？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24485019/