我正在使用 ngboilerplate 构建一个 Angular 应用程序,它本质上是我所有网站及其环境的管理面板。我需要设置一种功能和模型数据的层次结构,这样任何“子”控制器/模型在没有设置“父”的情况下都无法工作。这是我要解释的内容的细分。
模型 -> 环境(产品、阶段、开发)一旦选择了环境,您就可以选择站点
模型->站点(当前环境中的所有站点)一旦选择了站点,您就可以获取站点数据
模型 -> 站点(站点数据 json 包含页面配置值等内容)
为这样的事情设置结构的正确方法是什么?我目前只是为页面内的每个路由使用单独的控制器和路由(ui-router)。我需要确保的主要功能是,如果选择的站点更改了环境,则该站点的数据将从适当的环境中重新加载。我想我会使用 $watch 来确保这一点?任何关于最佳实践的建议/提示都表示赞赏!
更新:为了澄清这里有一些细节:
我需要“关注”的主要模型是环境模型。根据设置的环境,我会调整正在使用的 api url 以及更改显示名称。它还将为 env 加载相应的站点列表(当前是一个静态 json 文件,但它可能是一个 api 调用)。这是我在问这个问题之前写的代码,当我得到 SitesCtrl 时,我意识到我可能做错了(或者无论如何都不是最佳的)。
工具.js
angular.module( 'SupportBase.tools', [
'ui.router',
'placeholders',
'ui.bootstrap',
'SupportBase.tools.sites'
])
.config(function config( $stateProvider ) {
$stateProvider.state( 'tools', {
url: '/tools',
views: {
"main": {
controller: 'ToolsCtrl',
templateUrl: 'tools/tools.tpl.html'
},
"sites": {
controller: 'SitesCtrl',
templateUrl: 'tools/sites/sites.tpl.html'
}
},
data:{ pageTitle: 'Site Tools' }
});
})
.controller( 'ToolsCtrl', function ToolCtrl( $scope ) {
$scope.envModel = '';
});
工具.tpl.hmtl
<div class="row">
<h1 class="page-header">
Site Tools
<small>For the lazy and impatient. {or the smart & productive}</small>
</h1>
</div>
<div class="row">
<div class="well col-md-5">
<h4>Current Working Environment:
<code class="env">{{envModel || 'null'}}</code></h4>
<div class="btn-group col-md-10 col-md-offset-2">
<label class="btn btn-primary" ui-sref="tools.sites({env: envModel})" ng-model="envModel" btn-radio="'Production'">Production</label>
<label class="btn btn-primary" ui-sref="tools.sites({env: envModel})" ng-model="envModel" btn-radio="'Stage'">Stage</label>
<label class="btn btn-primary" ui-sref="tools.sites({env: envModel})" ng-model="envModel" btn-radio="'QA'">QA</label>
<label class="btn btn-primary" ui-sref="tools.sites({env: envModel})" ng-model="envModel" btn-radio="'Dev'">Dev</label>
</div>
</div>
<div class="col-md-6" ui-view="sites"></div>
</div>
站点.js
angular.module('SupportBase.tools.sites', [
'ui.router',
'placeholders',
'ui.bootstrap',
'SupportBase.tools'
])
.config(function config($stateProvider) {
$stateProvider.state('tools.sites', {
url: '/{env:[a-z]{1,10}}/sites',
views: {
"sites": {
controller: 'SitesCtrl',
templateUrl: 'tools/sites/sites.tpl.html'
}
},
data: {
pageTitle: 'Site Tools | SupportBase'
}
});
})
.controller('SitesCtrl', function SitesCtrl($scope, $stateParams, $http) {
$scope.env = $stateParams.env.toLowerCase();
$scope.disabled = $stateParams.env !== '' ? false : true;
if ($stateParams.env.toLowerCase() === 'production') {
$http.get('./src/app/sites/sites.json').success(function(data) {
$scope.sitesModel = data;
});
} else {
$scope.sitesModel = [$stateParams.env, 'something', 'face'];
}
});
Sites.tpl.html
<div class="well" collapse="disabled">
<h1>Site Selector</h1>
<h2>{{sitesModel}}</h2>
</div>