저는 1 개의 대형 모듈이있는 대형 AngularJS 애플리케이션으로 작업하고 있으며,이를보다 쉽게 관리되는 모듈로 나누려고합니다.
메인 페이지에는 메뉴, 바닥 글, 콘텐츠, 사이드 바 등을위한 몇 가지 UI보기가 있습니다.
현재 각 $ stateProvider.state는 모든 상태 변경시 이러한 각 ui-view를 채 웁니다. 좀 더 계층 적으로 만 변경하고 루트 상태 만 변경하도록하고 싶습니다. 할 수 있습니다.
그러나 응용 프로그램을 모듈로 분할 할 때 문제가 있습니다. 시연하기 위해 Plunker 를 만들었습니다 .
(function() {
angular
.module("acme", ["ui.bootstrap", "ui.router", "acme.admin", "acme.stock"]);
angular
.module("acme")
.config(MainModuleConfig);
MainModuleConfig.$inject = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];
function MainModuleConfig($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
var root = {
name: "root",
url: "/",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/mainTemplate.html",
controller: "MainController",
controllerAs: "vm",
}
}
};
$stateProvider
.state("root", root);
$urlRouterProvider
.otherwise("/");
}
})();
(function() {
angular
.module("acme.admin", ["ui.router"]);
angular
.module("acme.admin")
.config(AdminConfig);
AdminConfig.$inject = ["$stateProvider", "$locationProvider"];
function AdminConfig($stateProvider, $locationProvider) {
var admin = {
name: "admin",
url: "/Admin",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/admin/adminTemplate.html",
}
}
};
var countries = {
name: "admin.Countries",
url: "/Admin/Countries",
views: {
"adminView": {
templateUrl: "app/admin/adminCountriesTemplate.html",
controller: "AdminCountriesController",
controllerAs: "vm"
}
}
}
var people = {
name: "admin.People",
url: "/Admin/People",
views: {
"adminView": {
templateUrl: "app/admin/adminPeopleTemplate.html",
controller: "AdminPeopleController",
controllerAs: "vm"
}
}
}
$stateProvider
.state("admin", admin)
.state("admin.Countries", countries)
.state("admin.People", people);
}
})();관리 모듈 및 기타에서 "menuView"를 다시 설정하고 싶지 않지만 부모를 참조하는 방법을 볼 수 없습니다.
문제를 해결했습니다.
먼저 메인 모듈에서 루트 상태를 설정했습니다.
var root = {
name: "root",
url:"/",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/mainTemplate.html",
controller: "MainController",
controllerAs: "vm",
}
}
};그런 다음 자식 모듈에서 기본 노드를 루트의 자식으로 변경하고 ui-view 이름에 @를 붙였습니다.
var admin = {
name: "root.admin",
url: "/Admin",
views: {
"mainView@": {
templateUrl: "app/admin/adminTemplate.html",
}
}
};plunker은 작업 예 업데이트되었습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다