우리는 하나의 우산 아래에 여러 개의 응용 프로그램을 가질 수 있습니까

Question

나는 하나의 부모 응용 프로그램을 갖고있는 응용 프로그램을 설계해야하고 그 응용 프로그램에는 5 개 이상의 응용 프로그램이 더 있어야합니다.

예 :

부모 - 자식 1 - 자식 2 - child3

와 나는 사용자가 가입 한 경우에만 해당 응용 프로그램을 활성화해야 사용자의 가입에 따라.

각 하위 응용 프로그램에는 사용자 선택에 따라 고유 한 UI/UX가 있습니다 (예 : 테마 아이콘, 로고 등).

Answer 1

Angular는 항상 한 번에 하나의 앱을 실행하는 것이 바람직하기 때문에 "앱"또는 "애플리케이션"이라는 개념이 없습니다. docs에서 인용 :

페이지 당 하나 이상의 AngularJS 응용 프로그램을 부트 스트랩하는 것이 가능하지만이 시나리오에 대해서는 적극적으로 테스트하지 않습니다. 특히 복잡한 앱의 경우 문제가 발생할 가능성이 있으므로주의가 필요합니다.

하지만 그 각도가 다른 여러 가지 방법을 통해 추상화를 제공하기 때문에 사용자가 앱을 사용자 정의 할 수 없습니다 것을 의미하지 않는다.

하나의 좋은 방법은 애플리케이션을 여러 모듈로 모델링하고 편리한 Depedency Injection 패턴을 사용하는 것입니다. 시나리오를 예로 들면, 응용 프로그램을 부트 스트랩하기위한 전체 관리 모듈 인 Parent 모듈과 사용자 구성에 따라 Parent 모듈에 주입 가능한 Child1, Child2 및 Child3 모듈이 있습니다. 이런 식으로 뭔가 :

(function() { 

    //declare the child modules: 
    angular.module('child1', []); 
    angular.module('child2', []); 
    angular.module('child3', []); 

    //User Settings, set by server configuartion . 
    var userSettings = { 
    "userId": 1, 
    "modules": ['child1', 'child3'] 
    }; 

    //bootstrapping the Parent module, where only child1 and child3 module is injected 
    angular.module('Parent',[userSettings.modules]) 

})(); 

위의 방법을 위해, 당신은 주입 내용을 추적하기 위해서 정말 좋은 건축 구조를 필요하고 개발 작업이 안심하고 할 수 있도록, 당신은 무엇을 안되지 $injector:unpr 오류로 계속 실행하십시오.

구성 설정을 수행하는 또 다른 좋은 방법은 config 단계입니다. providers을 모두 주입하는 config 단계에서 말 그대로 앱을 구성하는 자유 의지를 완전히 가질 수 있습니다. 유일한 어려운 부분은 구성 가능한 방식으로 모듈과 제공자를 작성해야한다는 것입니다. 제 3 자 앵귤러 모듈은 이러한 유연성을 제공합니다. UI 부트 스트랩이 그 중 하나입니다. 예를 들어 사용자에게 ui.bootstrap의 캘린더에 "몇 주간 표시"하거나 숨길 수있는 유연성을 부여 할 수 있습니다. 나는 아래 내 코드를 작성 할 수 :

//User Settings, set by server configuartion . 
var userSettings = { 
    "userId": 1, 
    "modules": ['child1', 'child3'], 
    "showWeeks": false 
}; 

angular.module('Parent') 
    .config(['datepickerConfig', function(datepickerConfig) { 
    datepickerConfig.showWeeks = userSettings.showWeeks; 
    }]); 

오, 당신은 UI/UX 변경 사항에 대한 언급?

나를 위해, 나는 정말로 필요하지 않는 한, CSS에서 그것을하고 싶지 않을 것이다. CSS 사전 처리기를 사용하십시오. SASS 또는 LESS이 좋으므로, 프로그래밍 방식으로 CSS를 작성할 수 있습니다. 사용자 정의 가능한 .scss 또는 .less 파일을 작성한 다음 @import를 호출하면 갈 수 있습니다. 물론 preproccesor와 Angular의 config 단계의 힘을 결합 할 수 있습니다.예를 들어 Angular Material, 그들의 제공 기능을 통해 사용자가 파레트 색상을 선택하자 :

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
    .primaryPalette('pink') //choose the primary color as pink! 
    .accentPalette('orange'); //choose the accent color to be orange! 
}); 

당신이 볼 수 있듯이, 정말 당신이 건축가로 코드베이스를하려는 방법에 종기, 어느 정도는 유연성을 제공 싶어하는 사용자가 앱을 맞춤 설정할 수있게 해줍니다. 서버 측 구성 (사용자 자격 증명, DB 연결 문자열 등)도 잊지 마십시오! 여기에는 옳고 그른 해답이 없습니다. 어느 쪽이 더 편안합니까?