Tôi muốn có nhiều bố cục (1-col, 2-col, 3-col) mà tôi muốn chuyển sang các tuyến khác nhau dựa trên bố cục cần thiết.Bộ định tuyến giao diện người dùng góc - Các quốc gia lồng nhau có nhiều bố cục
Tôi hiện đang có một trạng thái gốc mặc định là sử dụng một bố cục nhất định và sau đó trong cách bố trí có chứa tên ui-view chỉ thị cho các phần như header, footer, sidebar, vv
Tôi chỉ tự hỏi nếu nó có thể thay đổi bố trí cho các trạng thái lồng nhau, vì nó hiện không hoạt động và không có lỗi nào trong console hoặc linter xuất hiện.
Tôi hiện không nhận được kết quả đầu ra nào trong trình duyệt, điều này khiến tôi nghĩ rằng mình đã triển khai phương pháp sai, vì tất cả các tuyến đường không được kế thừa từ trạng thái tuyến đường.
Dưới đây là các mã:
My-module.js
'use strict';
angular.module('my-module', ['ngResource', 'ui.router'])
// Routing for the app.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
.state('root.home', {
url: '/'
})
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb': {
templateUrl: 'partials/signup/step-breadcrumb.html'
}
}
})
;
$urlRouterProvider.otherwise('/');
})
;
index.html
<!doctype html>
<html class="no-js" ng-app="my-module">
<head>
<meta charset="utf-8">
<title>My Test App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div ui-view="layout">
</div>
<!-- build:js({app,.tmp}) scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<script src="scripts/config.js"></script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/my-module.js"></script>
<!-- inject:partials -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
1-column.html
<div class="one-column">
<!-- page header -->
<div ui-view="header">
</div>
<!--/page header -->
<!-- state breadcrumb (optional) -->
<div ui-view="step-breadcrumb">
</div>
<!--/state breadcrumb -->
<!-- page-container -->
<div class="page-container">
<!-- main content -->
<div ui-view="main-content">
</div>
<!--/main content -->
</div>
<!--/page-container -->
<!-- page footer -->
<div ui-view="footer">
</div>
<!--/page footer -->
</div>
Đánh giá cao sự giúp đỡ
Cảm ơn Radim. Xin lỗi về việc không cung cấp một ví dụ trong Plunkr. –
Vui mừng nếu điều đó giúp ích gì! Nếu plunker tôi gửi giúp ... sau đó tuyệt vời;) Thưởng thức ui-router, sir;) –
Cảm ơn rất nhiều vì điều này. Cùng với một câu trả lời khác, tôi đã có thể tạo ra một giải pháp hoàn hảo với bố cục công cộng và riêng tư cho các tuyến đường. Xem giải pháp của tôi: http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state/32196068#32196068 – Mattijs