我正在构建一个角度应用程序，它本质上是我所有网站的管理面板。他们的环境使用ngboilerplate。我需要设置一种功能层次结构。模型数据使得任何“子”控制器/模型在没有设置“父”的情况下不起作用。以下是我要解释的内容的细分。
模型 - ＆gt;环境（prod，stage，dev） 一旦选择了env，您就可以选择网站
模型 - ＆gt;网站（所有网站来自 当前环境）一旦选择了一个站点，您就可以获得站点数据
模型 - ＆gt; site（站点数据json包含页面配置等内容 价值观等）
为此类设置结构的正确方法是什么？我目前只使用个人控制器和页面内路径内的每个路由（ui-router）。我需要确保的主要功能是，如果通过选择的站点更改环境，则从适当的环境重新加载站点的数据。我想我会用$ watch来确保吗？关于赞赏的最佳实践的任何建议/提示！
更新：澄清一些具体细节：
我需要“观看”的主要模型是环境模型。根据设置的env，我会调整使用的api url以及更改显示名称。同时它还会加载env的相应站点列表（当前是静态json文件，但它可能是api调用）。这是我在提出这个问题之前编写的代码，当我得到SitesCtrl时，我意识到我可能做错了（或者说不是最佳）。
Tools.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 = '';
});
Tools.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>
Sites.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>
答案 0 :(得分：1)
你想要做什么仍然有点模糊。以下是一些可以帮助您入门的代码：
.constant('site_configuration', {
'greeting' : 'Hello User'
});
.factory('environment', function ($window, $q, $http, $log, $rootScope, secondary_service, site_configuration) {
// this way your child functions can call each other within the factory
var environment = {};
environment.prod = function() {
};
environment.dev = function(credentials) {
secondary_service.login(credentials).then(function(){
$log.log('hello')
site_configuration.greeting = 'Hello Dev Environment User!'
})
};
environment.stage = function(credentials) {
// do something
}
return environment;
})
.service('secondary_service', function ($window, $q, $log, $rootScope, $http) {
var myservice = {};
secondary_service.login = function() {
var deferred = $q.defer();
// some http call
deferred.resolve(true)
return deferred.promise;
};
return myservice;
})
答案 1 :(得分：1)
我不使用ui.router，所以我会非常通用，你可以根据需要申请。
此外，我还没有测试过这个确切的代码，因此请将其作为指南。
// setup constants to refer to and change when needed
.constant('site_config', {
'api_path' : '//prod.example.com',
'name' : 'Production',
'collection' : '/production'
});
.controller( 'homepage_controller', function($scope, $location, $log, site_config, environment){
var load_site = function() {
$scope.title = site_config.name;
environment.get().then(function(data){
$log.log('Do something with this ',data)
})
}
// looking for sandbox.example.com
if(window.location.host.indexOf('sandbox') > -1 ) {
environment.set('prod').then(function(){
$log.log('sandbox is loaded')
load_site()
})
// looking for qa.example.com
} else if (window.location.host.indexOf('qa') > -1) {
environment.set('qa').then(function(){
$log.log('qa is loaded')
load_site()
})
// looking for www.example.com
} else {
environment.set('prod').then(function(){
$log.log('production is loaded')
load_site()
})
}
})
.factory('environment', function ($window, $q, $http, $log, $rootScope, site_config) {
var environment = {};
environment.set = function(type) {
var deferred = $q.defer();
if(type == 'sandbox') {
site_config.api_path = '//sandbox.example.com';
site_config.name = 'Sandbox';
site_config.collection = '/development';
deferred.resolve(true)
}
if(type == 'qa') {
site_config.api_path = '//qa.example.com';
site_config.name = 'QA';
site_config.collection = '/qa';
deferred.resolve(true)
}
if(type == 'production') {
site_config.api_path = '//prod.example.com';
site_config.name = 'Production';
site_config.collection = '/production';
deferred.resolve(true)
}
return deferred.promise;
};
// just showing this as an example
environment.get = function() {
var deferred = $q.defer();
$http({
method:'GET',
url: site_config.api_path+site_config.collection
})
.success(function(data) {
deferred.resolve(data);
})
.error(function(status, headers, config) {
deferred.reject(false);
});
return deferred.promise;
}
return environment;
})
答案 2 :(得分：0)