角度模型/控制器「層次結構」設置

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