角度ES6 - コントローラの編成方法は？

Question

私は、コードの一部があります

'use strict'; 
/*jshint esnext: true */ 
/*global angular: false */ 

import ModalCtrl from './controllers/ModalCtrl'; 
import ShowVersionCtrl from './controllers/ShowVersionCtrl'; 
import TodoListCtrl from './controllers/TodoListCtrl'; 


var app = angular.module('Todo', ['ngRoute']) 
    .controller('ModalCtrl', ModalCtrl) 
    .config(($routeProvider) => { 
     $routeProvider 
      .when('/', { 
       templateUrl : './templates/main.html', 
       controller: 'ShowVersionCtrl' 
      }) 
      .when('/list', { 
       templateUrl : './templates/list.html', 
       controller: 'TodoListCtrl' 
      }) 
      .when('/add', { 
       templateUrl : './templates/add.html', 
       controller: 'TodoListCtrl' 
      }) 
      .when('/search', { 
       templateUrl : './templates/search.html', 
       controller: 'TodoListCtrl' 
      }); 
    }); 

をそして、私はいくつかの質問があります：私は.controller('ModalCtrl', ModalCtrl)のように、config前にコントローラを割り当てると
1.それはグッドプラクティスに反しているの？
controller: ['ShowVersionCtrl', 'ModalCtrl']
のように、複数のコントローラをrouteProviderの中に割り当てることは可能ですか？3.グローバルコントローラを設定する最も良い方法は何ですか？そしてそれらのいくつかを設定することは可能ですか？
4. routeProvider configにコントローラを指定した後に、注入テンプレートにng-controllerを追加する必要はありますか？

Answer 1

1. 設定とコントローラを別々のファイルに分けたほうがいいと思います。あなたのアプリは小さく、あなたはそうしたくありません。configの後にコントローラを起動することをお勧めします。なぜなら、AngularJSのライフサイクル設定はすべてのコントローラの前に常に初期化されるからです。そのような命令を見るのが自然になります。
2. ここにはanswerがあります。しかし、答えは - いいえ、できません、解決策をリンクで試してみてください。
3. 私がこの質問を持っている限り、あなたは他のすべてのコンポーネントを包むために何かをしたいと思っています。アプリケーションを論理コンポーネントに分割し、それらを階層的に部分的に含める方が良いと思います。それで、あなたはあなたのアプリでデータがどのように流れるのか、そしてそれぞれのアプリケーション部品を担当するコンポーネントを理解できます。
4. ng-controllerは必要ありませんが、<ng-view>ディレクティブを置く必要があります。コントローラに関連する部分がコントローラに関連していると予想される場所を知るために使用します。

Answer 2

################################################################################### 
# My suggestion is that use 'Classes' if you are going the ES6 route. Separation is 
# necessary when using ES6. 

# You will need 'ng-controller' in your injected 'Template' 
# e.g. <div ng-controller="profileCtrl as profile"></div> 

# You cannot assign multiple 'Controllers' to a specific template. Separation is necessary. 

# You can have only 1 Global 'Controller' e.g. for a Landing page of an App, then have 
# separate 'Controllers' to handle different pages e.g. profileCtrl for profile page, 
# settingsCtrl for settings page etc. 

# Handle all your 'import' in a 'Module' file, handle data stuff in a 'Service' file, 
# handle all your template manipulation in a 'Controller' file. 
# For example i would create a totally separate folder to handle routing and 
# totally separate folders to handle login, profile, changePassword etc. e.g. 
# Folder 1 = 'Routing' folder which includes 'routing.module.js' and 'routing.svc.js'. 
# Folder 2 = 'Profile' folder which includes 'profile.html', 'profile.ctrl.js', 
# 'profile.module.js' and 'profile.svc.js'. 

# Note that naming does not matter ...'ctrl' = 'controller' ... 'svc' = 'service' 
# Refer to working example below. 
################################################################################### 

################################################################################### 
# Folder 1 : Routing 
# Main Folder = Foo ... Folder 1 and Folder 2 are inside Foo Folder 
# angular.module('foo.routing', []) ... Shows main folder is Foo Folder 
# Handle all your routing to different pages in this folder 
# 'routing.module.js' and 'routing.svc.js' 
################################################################################### 

# routing.module.js 

'use strict'; 

import { RoutingSvc } from './routing.svc'; 

let routingModule = angular.module('foo.routing', []) 
    .factory('routingSvc', RoutingSvc.factory) 
    .config(function(routingSvcProvider){ 
     //...etc 
    }); 

export default { routingModule }; 

//--------------------------------------------------------------------------------- 

# routing.svc.js 

'use strict'; 

class RoutingSvc { 
    constructor(){ 
    } 

    createRoutes($stateProvider, config){ 
     $stateProvider 
      .state('login', { 
       url: '/login', 
       templateUrl: `app/features/login/login.html?v=${config.version}` 
      }) 
      .state('forgotPassword', { 
       url: '/forgotPassword', 
       templateUrl: `app/features/forgotPassword/forgotPassword.html?v=${config.version}` 
      }) 
      .state('resetPassword', { 
       url: '/resetPassword/{token}', 
       templateUrl: `app/features/resetPassword/resetPassword.html?v=${config.version}` 
      }) 
      .state('profile', { 
       url: '/profile', 
       templateUrl: `app/features/profile/profile.html?v=${config.version}` 
      }); 
    } 

    static factory(){ 
     return new RoutingSvc(); 
    } 
}; 

export { RoutingSvc } 

################################################################################### 
# Folder 2 : Profile Page 
# Main Folder = Foo ... Folder 1 and Folder 2 are inside Foo Folder 
# angular.module('foo.profile', []) ... Shows main folder is Foo Folder 
# Handle all profile stuff in this folder 
# 'profile.html', 'profile.ctrl.js', 'profile.module.js' and 'profile.svc.js'. 
################################################################################### 

# profile.html 

<div ng-controller="profileCtrl as profile"> 
    <div layout="row"> 
     <md-subheader>Profile</md-subheader> 
    </div> 
    <div layout="row"> 
     <md-card class="md-whiteframe-z2" flex> 
      <md-card-content layout="column"> 
       <md-input-container> 
       <ng-md-icon icon="person" flex="10" size="16" ></ng-md-icon>Name : {{profile.getName()}} 
       </md-input-container> 

       <md-input-container> 
       <ng-md-icon icon="place" flex="10" size="16" ></ng-md-icon>Location : {{profile.getLocation()}} 
       </md-input-container> 

       <md-input-container> 
       <ng-md-icon icon="contacts" flex="10" size="16" ></ng-md-icon>Title : {{profile.getTitle()}} 
       </md-input-container> 

       <md-input-container> 
       <ng-md-icon icon="email" flex="10" size="16" ></ng-md-icon>Email : {{profile.getEmail()}} 
       </md-input-container> 
      </md-card-content> 
     </md-card> 
    </div> 
</div> 

//--------------------------------------------------------------------------------- 

# profile.ctrl.js 

'use strict'; 

class ProfileCtrl { 
    constructor(sessionSvc, profileSvc, $scope, $state) { 
     this.sessionSvc = sessionSvc; 
     this.profileSvc = profileSvc; 
     this.$scope = $scope; 
     this.$state = $state 
     this.init(); 
    } 

    init(){ 

    } 

    getName(){ 
     return `${this.sessionSvc.firstName} ${this.sessionSvc.lastName}`; 
    } 

    getLocation(){ 
     return `${this.sessionSvc.location}`; 
    } 

    getTitle(){ 
     return `${this.sessionSvc.title}`; 
    } 

    getEmail(){ 
     return `${this.sessionSvc.email}`; 
    } 
} 

ProfileCtrl.$inject = ['sessionSvc', 'profileSvc', '$scope', '$state']; 

export { ProfileCtrl } 

//--------------------------------------------------------------------------------- 

# profile.module.js 

'use strict'; 

import { ProfileCtrl } from './profile.ctrl' 
import { ProfileSvc } from './profile.svc'; 

let profileModule = angular.module('foo.profile', []) 
    .factory('profileSvc', ProfileSvc.factory) 
    .controller('profileCtrl', ProfileCtrl); 

export default {profileModule}; 

//--------------------------------------------------------------------------------- 

# profile.svc.js 

'use strict'; 

class ProfileSvc { 
    constructor($http, $log, config){ 
     this.$http = $http; 
     this.$log = $log; 
     this.config = config; 
    } 

    getProfile(){ 
     const baseUrl = this.config.legacyApiBaseUrl; 
     let serviceSuffix = 'userProfile'; 
     let fullUrl = `${baseUrl}${serviceSuffix}`; 

     return this.$http.get(fullUrl).then(r => 
      { return r.data; } 
      , r=> { return r.data; } 
     ); 
    } 

    static factory($http, $log, config){ 
     return new ProfileSvc($http, $log, config); 
    } 
}; 

ProfileSvc.factory.$inject = ['$http', '$log', 'config']; 

export { ProfileSvc } 

//---------------------------------------------------------------------------------