Question

这是我的流程：主页面位于'/ main'网址，因此当用户访问该页面时，我的网络服务器返回一个静态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来设置我刚从数据库中获取的动态详细信息？这首先是一个糟糕的设计吗？因为我认为它与angular的单页应用程序基础不一致。

请帮忙。谢谢！

Answer 1

从服务器端渲染转换到Singe-Page-Application（SPA）客户端渲染世界时，您遇到了正常的概念上的困难。我将尝试总结基础知识，以帮助您入门：

在SPA中，您有一个独特的静态 index.html 文件，该文件会在第一次请求时加载，并且永远不会重新加载。它是唯一定义html和body标签的文件，包括所需的脚本和css文件，通常会创建网页的公共结构：页眉，页脚，菜单......
您应用的其余html文件名为＆＃34; partials＆＃34;。它们是html的静态部分，没有html和body标签，它们被插入到index.html文件中。要定义它们的插入位置，您必须使用客户端路由系统。看看ngRoute或ui-router（我推荐这个）。它们允许您在index.html中定义块（ngViews或ui-views），这些块将填充您的部分内容。
除了静态html之外，您还需要能够填充视图的动态数据（您的租户，您的建筑物......）。您将通过AJAX请求获取此数据，通常使用angular $ http服务或$ resource（如果您的后端有REST API）。这些请求不会返回Html，而是返回您将分配给范围的JSON对象，这将自动更新您在视图中定义的绑定。

基本上和简化：加载index.html，将部分加载到其中，与此部分关联的控制器和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加载到ui-view＆＃34; main＆＃34;您必须在index.html中定义。请注意，我们使用resolve属性从后端获取构建数据。加载部分后，将执行控制器，并将注入建筑物信息，以便您可以将其分配到范围：

.controller('BuildingController', function($scope, building){ $scope.building = building; });

现在，您的链接将是这样的：

<td><a ui-sref="building({id: element.id})">{{element.name}}</a></td>

我真的建议你看一下ui-router文档：

https://github.com/angular-ui/ui-router/wiki

如何根据ng-href中的数据返回动态html？

1 个答案: