ome*_*ach 1 html javascript jquery angularjs
这是我的流程:主页面位于'/ main'网址,因此当用户访问该页面时,我的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来设置我刚从数据库中获取的动态详细信息？这首先是一个糟糕的设计吗？因为我认为它与angular的单页应用程序基础不一致.
请帮忙.谢谢!
从服务器端渲染转换到Singe-Page-Application(SPA)客户端渲染世界时,您遇到了正常的概念上的困难.我将尝试总结基础知识,以帮助您入门:
在SPA中,您有一个唯一的静态index.html文件,该文件在第一次请求时加载,并且永远不会再次重新加载.它是唯一定义html和body标签的文件,包括所需的脚本和css文件,通常会创建网页的通用结构:页眉,页脚,菜单......
您应用的其余html文件称为"部分".它们是html的静态部分,没有html和body标签,它们被插入到index.html文件中.要定义它们的插入位置,您必须使用客户端路由系统.看看ngRoute或ui-router(我推荐这个).它们允许您在index.html中定义块(ngViews或ui-views),这些块将填充您的部分内容.
除了静态html之外,您还需要能够填充视图的动态数据(您的租户,您的建筑物......).您将通过AJAX请求获取此数据,通常使用angular $ http服务或$ resource(如果您的后端有REST API).这些请求不会返回Html,而是会返回您将分配给范围的JSON对象,这将自动更新您在视图中定义的绑定.
基本上,并简化:index.html被加载,部分加载到它和与此部分make和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('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