angularjs ui-router-앱 전체에서 전역 인 마스터 상태를 빌드하는 방법
<html ng-app="app">
<head>
...
</head>
<body>
<div id="header"></div>
<div id="notification"></div>
<div id="container"></div>
<div id="footer"></div>
</body>
</html>
주어진 앱 구조 (angular-app에서 파생) :
- 헤더 : 여기에 사이트 탐색, 로그인 / 아웃 도구 모음 등이 있습니다. 이것은 동적이며 자체 컨트롤러가 있습니다.
- 알림 : 전역 알림 컨테이너입니다.
- 컨테이너 : 이것은 내
<ng-view>. 그래서 이것은 다른 모든 모듈이로드되는 곳입니다. - footer : 전역 바닥 글.
상태 계층 구조는 어떻게 생겼습니까? 단일 모듈 (연락처)을 보여주는 예제를 살펴 보았지만 일반적으로 앱은 전역 (루트) 상태를 가지며 루트 상태 내부에 다른 모듈 상태가 렌더링됩니다.
내가 생각하고 나의입니다 app모듈은 아마도이 root상태를 다음 각 모듈이 자신의 상태를 가지고 있어야 난에있는 상속 에서 root상태. 내가 맞아?
또한에서 ui-state예를 들어, 그들은 모두 사용한 $routeProvider및 $urlRouterProvider뿐만 아니라 $stateProviderURL을 정의하고있다. 내 이해는 $stateProvide라우팅도 처리 한다는 것 입니다. 내가 틀렸다면 어떤 공급자를 라우팅에 사용해야합니까?
편집 : http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview
감사!
플 런커에서 취한 접근 방식은 가깝습니다. @ ben-schwartz의 솔루션은 기본적으로 정적 인 세 가지 뷰에 대해 루트 상태에서 기본값을 설정하는 방법을 보여줍니다. 플 런커에서 빠진 점은 자식 상태가 여전히 상위 컨테이너 뷰를 참조해야한다는 것입니다.
.state('root',{
url: '',
views: {
'header': {
templateUrl: 'header.html',
controller: 'HeaderCtrl'
},
'footer':{
templateUrl: 'footer.html'
}
}
})
.state('root.about', {
url: '/about',
views: {
'container@': {
templateUrl: 'about.html'
}
}
});
참고 views: { 'container@': ...}대신 단지 templateUrl: ...에서'root.about'
또한 질문 할 수있는 것은 모듈이 자체 상태 집합을 정의한 다음 앱의 상태 계층에 연결할 수 있는지 여부입니다. 각 모듈이 제공하는 경로 / 상태에 대한 일종의 플러그 앤 플레이입니다.
이를 위해 모듈을 메인 앱에 단단히 연결해야합니다.
모듈에서 :
angular.module('contact', ['ui.router'])
.constant('statesContact', [
{ name: 'root.contact',
options: {
url: 'contact',
views: {
'container@': {
templateUrl: 'contacts.html'
}
},
controller:'ContactController'
}}
])
.config(['$stateProvider', function($stateProvider){
}])
그런 다음 앱에서 :
var app = angular.module('plunker', ['ui.router', 'contact']);
app.config( ['$stateProvider', 'statesContact',
function($stateProvider, statesContact){
$stateProvider
.state('root',{ ... })
.state('root.home', { ... })
.state('root.about', { ... })
angular.forEach(statesContact, function(state) {
$stateProvider.state(state.name, state.options);
})
}]);
즉, 모든 모듈이 앱에 설정된이 패턴과 호환되어야합니다. 그러나이 제약 조건을 수락하면 모듈 조합을 포함하도록 선택할 수 있으며 해당 상태는 마법처럼 앱에 추가됩니다. 더 멋지게 만들고 싶다면 예를 들어 모듈의 URL 구조에 접두사를 붙이도록 루프 state.options.url에서 수정할 수 있습니다 statesModuleName.
Also note that the module ui.compat is only necessary when you are transitioning from $routeProvider to $stateProvider. You should normally use ui.state instead.
Also don't forget to adjust in header.html $state.includes('root.contact'))
Although confusing, the FAQ in the ui-router wiki seems to say that this isn't possible: ui-router/wiki/faq
One approach is to allow each feature to define it's own root state (as in this example: AngularJS State Management with ui-router)
Another would be to define the entire state hierarchy in your "myApp" module and just leverage controllers etc. from the dependent modules. This works especially well when you are maintaining a mobile and desktop site; define each site's state hierarchy in a mobileApp and desktopApp module, and have the functionality (e.g. controllers, services, etc.) shared in separate modules.
It depends how you prefer to approach it.
All scopes inherit from rootScope so you may place global state there. The NG literature specifically mentions that you should only put global state there, and not functionality. Functionality required across the system belongs in services, and specifically you should not implement services whose sole purpose is to retain state. All the advice seems to be implicitly shared in the context of how it either facilitates or hampers your ability to easily do end to end testing.
'IT박스' 카테고리의 다른 글
| Javac : 경고를 오류로 처리 (0) | 2020.12.13 |
|---|---|
| JUnit 테스트 케이스에 대해 MySQL 메모리 내에서 실행하는 방법이 있습니까? (0) | 2020.12.13 |
| 오버레이를위한 FrameLayout 대 RelativeLayout (0) | 2020.12.13 |
| Javascript ES6 계산 / 시간 복잡성 (0) | 2020.12.13 |
| 데이터베이스에 채팅 메시지를 저장하는 가장 좋은 방법은 무엇입니까? (0) | 2020.12.13 |