0

ngboilerplate を使用して、基本的にすべてのサイトとその環境の管理パネルである角度付きアプリを構築しています。「子」コントローラー/モデルが「親」が設定されていないと機能しないように、関数とモデルデータの一種の階層をセットアップする必要があります。これが私が説明しようとしているものの内訳です。

モデル -> 環境 (製品、ステージ、開発) 環境が選択されると、サイトを選択できるようになります

モデル -> サイト (現在の環境のすべてのサイト) サイトが選択されると、サイト データを取得します。

モデル -> サイト (サイト データ json には、ページ構成値などが含まれます)

このような構造をセットアップする適切な方法は何ですか? 現在、ページ内のルートごとに個別のコントローラーとルート (ui-router) を使用しています。私が確認する必要がある主な機能は、サイトのデータが適切な環境からリロードされるように選択されたサイトで環境が変更された場合です。それを確実にするために $watch を使用すると思いますか？ベスト プラクティスに関する提案やヒントをいただければ幸いです。

更新：ここで明確にするために、いくつかの詳細があります：

「監視」する必要がある主なモデルは、環境モデルです。設定された環境に応じて、使用されている API URL を調整し、表示名を変更します。同様に、env に対応するサイト リストもロードします (現在は静的 json ファイルですが、代わりに api 呼び出しである可能性があります)。この質問をする前に私が書いたコードは次のとおりです。

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>
4

3 に答える 3

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;
})
于 2015-04-01T00:45:40.667 に答える
0

工場を調べたことはありますか？これらは基本的に、サービス レイヤーとして使用できるシングルトン パターンです。各コントローラは、そのデータを同じファクトリに依存してバインドすることができ、データが変更されると、変更が普遍的に更新されます

于 2015-03-31T23:14:12.787 に答える