angularjs ui-module - 앱 전체에서 글로벌한 마스터 상태를 구축하는 방법
<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에서 파생됨):
- header: 사이트 네비게이션, 로그인/아웃 툴바 등이 표시됩니다.이것은 동적이고 독자적인 컨트롤러가 있습니다.
- 통지:글로벌 알림 컨테이너
- 컨테이너:이건 원래 제 거예요.
<ng-view>기른 - footer: 글로벌 바닥글.
주(州) 계층은 어떻게 생겼습니까?단일 모듈(연락처)을 보여주는 예제를 살펴보았는데, 일반적으로 앱은 글로벌(루트) 상태를 가지며 루트 상태 내에서는 다른 모듈 상태가 렌더링됩니다.
가 하는 것은 app에는 ""가 있을 수 .root각 모듈이 자체 상태를 가져야 합니다.또한 이 상태로부터 상속을 받아야 합니다.root내내???
, ★★★★★★★★★★★★★★★★★~ui-state를 들면, 예들,, 은은은 both both both both both both이다를 모두 요.$routeProvider ★★★★★★★★★★★★★★★★★」$urlRouterProvider만 아니라$stateProvider에는 urldefined.url이 .로 한 것은 my my my my my my my my 。$stateProvide을 사용하다잘못된 경우 라우팅에 어떤 프로바이더를 사용해야 합니까?
편집: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview
감사합니다!
당신이 플런커에서 취한 접근법은 비슷합니다.@ben-schwartz의 솔루션은 기본적으로 정적인 3가지 뷰에 대해 루트 상태에서 기본값을 설정하는 방법을 보여줍니다.플런커에 누락된 점은 자녀 상태가 여전히 상단 컨테이너 뷰를 참조해야 한다는 것입니다.
.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);
})
}]);
즉, 모든 모듈이 앱에 설정된 이 패턴과 호환되어야 합니다.그러나 이 제약을 받아들이면 모듈 조합을 포함하도록 선택할 수 있으며 모듈 상태는 마법처럼 앱에 추가됩니다.더 멋지고 싶다면 수정할 수 있습니다.state.options.url 안에서statesModuleNameURL 입니다.
, 모듈 「」도 해 주세요.ui.compat에서 이행하는 경우에만 필요합니다.$routeProvider로로 합니다.$stateProvider은 을 합니다.ui.state★★★★★★ 。
header.html을 조정하는 것도 잊지 $state.includes('root.contact'))
혼란스럽지만 UI 라우터 Wiki의 FAQ에서는 이것이 불가능하다고 합니다.ui-router/wiki/faq
한 가지 방법은 각 기능이 자체 루트 상태를 정의할 수 있도록 하는 것입니다(다음 예시와 같습니다).각진UI 라우터를 사용한 JS 상태 관리)
또 다른 방법은 "myApp" 모듈에서 전체 상태 계층을 정의하고 종속 모듈의 컨트롤러 등을 활용하는 것입니다.이 기능은 모바일 사이트와 데스크톱 사이트를 유지보수할 때 특히 효과적입니다. 즉, mobileApp 및 desktopApp 모듈에서 각 사이트의 상태 계층을 정의하고 별도의 모듈에서 기능(예: 컨트롤러, 서비스 등)을 공유합니다.
당신이 어떻게 접근하느냐에 달렸어요.
모든 범위는 rootScope에서 상속되므로 글로벌 상태를 rootScope에 배치할 수 있습니다.NG 문헌에는 글로벌 상태만 기재하고 기능성은 기재하지 않는 것이 특히 기재되어 있습니다.시스템 전체에서 필요한 기능은 서비스에 속하며, 특히 상태를 유지하는 것이 유일한 목적인 서비스를 구현해서는 안 됩니다.모든 조언은 엔드 투 엔드 테스트를 쉽게 수행할 수 있도록 지원하거나 방해하는 상황에서 암묵적으로 공유되는 것 같습니다.
언급URL : https://stackoverflow.com/questions/16473952/angularjs-ui-router-how-to-build-master-state-which-is-global-across-app
'programing' 카테고리의 다른 글
| gs protocol의 의미는 무엇입니까? (0) | 2023.03.14 |
|---|---|
| 마크다운 파일을 리액트 컴포넌트에 로드하려면 어떻게 해야 합니까? (0) | 2023.03.14 |
| 캔 각도외부 앱에 의해 영구 모델(서버 데이터베이스)이 변경된 경우 JS에서 보기를 자동으로 업데이트하시겠습니까? (0) | 2023.03.14 |
| Oracle: 특정 범위에 걸쳐 "그룹화"하는 방법 (0) | 2023.03.14 |
| spring-web 용 스프링 부트 자동 설정을 방지하는 방법 (0) | 2023.03.14 |