Copyright: copyright reserved by the authors, are reproduced in any form, please indicate the source. https://blog.csdn.net/xiaokui9/article/details/82227052
For example carding process to siteList.html page
1 , page called from main.html
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\partials\integration\main.html
<li ng-class="{active: getState().indexOf('integration.site') !== -1}"><a href="#/integration/siteList">站点</a></li>2 , app.js defined url, html page and control, etc.
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\app.js
In the second paragraph concernsurl: "siteList",templateUrl: "partials/integration/siteList.html，controller: "integrationSiteListCtrl",
// ==================================================================
// = Initialization =
// ==================================================================
var eagleApp = angular.module('eagleApp', ['ngRoute', 'ngAnimate', 'ui.router', 'eagleControllers', 'eagle.service'].concat(register.appList));eagleApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider, $animateProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('integration.siteList', {
url: "siteList",
templateUrl: "partials/integration/siteList.html?_=" + window._TRS(),
controller: "integrationSiteListCtrl",
resolve: routeResolve({ application: false })
})
;// ===================================================================
// = Main Controller =
// ===================================================================
eagleApp.controller('MainCtrl', function (
$scope, $wrapState, $urlRouter, $notification, $authHttp,
Server, PageConfig, Portal, Widget, Entity, CompatibleEntity,
Site, Application, UI, Time, Policy, Alert, Auth) {
window._WrapState = $scope.$wrapState = $wrapState;
window._Server = $scope.Server = Server;
window._PageConfig = $scope.PageConfig = PageConfig;
window._Portal = $scope.Portal = Portal;
window._Widget = $scope.Widget = Widget;
window._Entity = $scope.Entity = Entity;
window._CompatibleEntity = $scope.CompatibleEntity = CompatibleEntity;
window._Site = $scope.Site = Site;
window._Application = $scope.Application = Application;
window._UI = $scope.UI = UI;
window._Time = $scope.Time = Time;
window._Policy = $scope.Policy = Policy;
window._Notification = $scope.$notification = $notification;
window._Alert = $scope.Alert = Alert;
window._Auth = $scope.Auth = Auth;
window._AuthHttp = $scope.$authHttp = $authHttp;
$scope.common = common;
$scope._TRS = window._TRS();
Object.defineProperty(window, "scope", {
get: function () {
var ele = $("#content .nav-tabs-custom.ng-scope .ng-scope[ui-view], #content .ng-scope[ui-view]").last();
return angular.element(ele).scope();
}
});control is defined integrationSiteListCtrl
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\ctrls\integrationCtrl.js
eagleControllers.controller('integrationSiteListCtrl', function ($scope, $wrapState, PageConfig, UI, Entity, Site) {
PageConfig.title = "系统配置";
PageConfig.subTitle = "站点";
$scope.deleteSite = function (site) {
UI.deleteConfirm(site.siteId)
(function (entity, closeFunc, unlock) {
Entity.delete("sites", site.uuid)._then(function (res) {
Site.reload();
closeFunc();
}, function (res) {
$.dialog({
title: "提示！",
content: common.getValueByPath(res, ["data", "message"])
});
unlock();
});
});
};
3 , siteList.html a packed list of sites Site.list variables
<tr ng-repeat ="site in Site.list track by $index">
<td>
<a ui-sref="integration.site({id: site.siteId})">
{{site.siteId}}
<span ng-if="site.siteName">({{site.siteName}})</span>
</a>
</td>
<td>{{site.description}}</td>
<td>
<span class="text-muted" ng-if="site.applicationList.length === 0">(尚未安装监控程序...)</span>
<ul class="list-inline no-margin">
<li ng-repeat="app in site.applicationList track by $index">
<span class="label label-primary">
{{app.descriptor.name}}
</span>
</li>
</ul>
</td>
<td class="text-center">
<div class="btn-group btn-group-xs">
<a class="btn btn-default btn-sm" ui-sref="integration.site({id: site.siteId})">编辑</a>
<button class="btn btn-danger btn-sm" ng-click="deleteSite(site)">删除</button>
</div>
</td>
</tr>
Site.list define and initialize the database data acquisition function Site.reload
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\siteSrv.js
Key part underlined
var serviceModule = angular.module('eagle.service');
serviceModule.service('Site', function($q, $wrapState, Entity, Application) {
var Site = {};
var reloadListenerList = [];
Site.list = [];
// Link with application
function linkApplications(siteList, ApplicationList) {
…………省略
}
// Load sites
function notifyListener() {
$.each(reloadListenerList, function (i, listener) {
listener(Site);
});
}
Site.reload = function () {
var list = Site.list = Entity.query('sites');
list._promise.then(function () {
linkApplications(list, Application.list);
notifyListener();
});
return Site;
};
Site.onReload = function (func) {
reloadListenerList.push(func);
};
// Find Site
Site.find = function (siteId) {
return common.array.find(siteId, Site.list, 'siteId');
};
Site.current = function () {
return Site.find($wrapState.param.siteId);
};
Site.switchSite = function (site) {
var param = $wrapState.param;
if(!site) {
$wrapState.go("home");
} else if(param.siteId) {
$wrapState.go($wrapState.current.name, $.extend({}, param, {siteId: site.siteId}));
} else {
$wrapState.go("site", {siteId: site.siteId});
}
};
Site.getPromise = function (config) {
var siteList = Site.list;
return $q.all([siteList._promise, Application.getPromise()]).then(function() {
// Site check
if(config && config.site !== false && siteList.length === 0) {
$wrapState.go('setup', 1);
return $q.reject(Site);
}
// Application check
if(config && config.application !== false && Application.list.length === 0) {
$wrapState.go('integration.site', {id: siteList[0].siteId}, 1);
return $q.reject(Site);
}
return Site;
});
};
// Initialization
Site.reload();
(function () {
Application.getPromise().then(function () {
Application.onReload(function () {
Site.reload();
});
});
// Call listener at first time when site & application is ready
var siteList = Site.list;
$q.all([siteList._promise, Application.getPromise()]).then(function() {
linkApplications(siteList, Application.list);
notifyListener();
});
})();
return Site;
});
Database data call Entity
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\entitySrv.js
Key part underlined
serviceModule.service('Entity', function($authHttp[c6] , $q) {
function Entity() {}
function wrapList(list, promise) {
…………省略
}
function withThen(list) {
list._then = list._promise.then.bind(list._promise);
return list;
}
// Dev usage. Set rest api source
Entity._host = function (host) {
console.warn("This function only used for development usage.");
if(host) {
_host = host.replace(/[\\\/]+$/, "");
if(localStorage) {
localStorage.setItem("host", _host);
}
}
return _host;
};
Entity.query = function (url, param) {
var list = [];
list._refresh = function () {
var config = {};
if(param) config.params = param;
return wrapList(list, $authHttp.get(_host + "/rest/" + url, config));
};
return list._refresh();
};
Entity.create = Entity.post = function (url, entity) {
var list = [];
return wrapList(list, $authHttp({
method: 'POST',
url: _host + "/rest/" + url,
headers: {
"Content-Type": "application/json"
},
data: entity
}));
};
Entity.delete = function (url, uuid) {
var list = [];
return wrapList(list, $authHttp({
method: 'DELETE',
url: _host + "/rest/" + url,
headers: {
"Content-Type": "application/json"
},
data: {uuid: uuid}
}));
};
/**
* Merge 2 array into one. Will return origin list before target list is ready. Then fill with target list.
* @param oriList
* @param tgtList
* @return {[]}
*/
Entity.merge = function (oriList, tgtList) {
…………省略
};
// TODO: metadata will be removed
Entity.queryMetadata = function (url, param) {
var metaList = Entity.query('metadata/' + url, param);
var _refresh = metaList._refresh;
function process() {
metaList._then(function (res) {
var data = res.data;
if(!$.isArray(data)) {
data = [data];
}
metaList.splice(0);
Array.prototype.push.apply(metaList, data);
});
}
metaList._refresh = function () {
_refresh();
process();
};
process();
return metaList;
};
Entity.deleteMetadata = function (url) {
return {
_promise: $authHttp.delete(_host + "/rest/metadata/" + url)
};
};
return Entity;
});
http interface call service $ authHttp
E:\code\eagle\eagle-master-0.5.0-SNAPSHOT\eagle-server\src\main\webapp\app\dev\public\js\services\authSrv.js
serviceModule.service('$authHttp', function ($http, Auth) {
function mergeConfig(config) {
config = config || {};
if (Auth.hash) {
config.headers = config.headers || {};
config.headers.Authorization = "Basic " + Auth.hash;
}
return config;
}
var $authHttp = function (config) {
return $http(mergeConfig(config));
};
$authHttp.get = function (url, config) {
return $http.get(url, mergeConfig(config));
};
$authHttp.post = function (url, data, config) {
return $http.post(url, data, mergeConfig(config));
};
$authHttp.delete = function (url, config) {
return $http.delete(url, mergeConfig(config));
};
return $authHttp;
});[c3]site in Site.list
[c6] $ authHttp back-end server to interact with the service