角度模型/控制器“层次结构”设置

Question

我正在构建一个角度应用程序，它基本上是我的所有站点的管理面板使用ngboilerplate的他们的环境&。我需要设置一种功能层次结构，以便在没有设置“父”的情况下，任何“子”控制器/模型都不起作用。这里是我试图解释的细节。

模型 - >环境（PROD，舞台，DEV） 一旦选择了ENV你会那么可以选择现场

模型 - >网站（所有网站从 当前ENV）一次的网站是选定你再拿到现场数据

模型 - >网站（网站数据JSON包含的东西像页面配置 值和这样）

什么是设置有道结构这样的事情？我目前只是使用单个控制器&路由（ui-router）为路由内的每个页面内。我需要确保的主要功能是，如果选择的站点更改了环境，以便从正确的环境重新加载站点的数据。我想我会用$ watch来确保？任何关于最佳实践的建议/提示赞赏！

UPDATE：在这里澄清一些细节：

我所需要的主要模式“观看”是环境模型。根据设置的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> 

Answer 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; 
}) 

Answer 2

你看过工厂吗？它们基本上是一个单例模式，可以用作服务层。每个控制器可以依赖于同一工厂的数据并绑定到它，当数据发生变化时，通用更新

Answer 3

对于您要做什么仍然有点模糊。这里有一些代码可以让你开始：

.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; 
})