angularjs에서 여러 부분 보기에 대한 단일 html 보기 만들기
나는 태그가 여러 개인 html 파일 하나를 만들고 싶습니다.이러한 보기는 일반적으로 부분 폴더에 보관되는 개별 보기로 작동해야 합니다.그런 다음 라우팅 컨트롤러에 지정하고 싶습니다.지금 나는 다음과 같이 하고 있습니다: app.js
angular.module('productapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}).
when('/productapp/:productId', {templateUrl: 'partials/edit.html', controller: editCtrl}).
otherwise({redirectTo: '/productapp'});
}],
['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode = true;
}]);
색인을 보다
<!DOCTYPE html>
<html ng-app = "productapp">
<head>
<title>Search form with AngualrJS</title>
<script src="../angular-1.0.1.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/products.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
partials 폴더: edit. html 및 productlist라는 이름의 html view 2개가 있습니다.
이 두개의 파일을 만드는것 대신에 나는 그것들을 하나로 모아서 루팅을 통해 그것들을 (divs)라고 부르고 싶습니다.이거 어떻게 해요?
ng-switch를 사용하여 경로 매개변수에 따라 productList를 조건부로 include로 렌더링할 수 있습니다.
구성에서 시도해 보십시오.
angular.module('productapp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl})
.when('/productapp/:productId', {templateUrl: 'partials/productList.html', controller: productsCtrl})
.otherwise({redirectTo: '/productapp'});
컨트롤러에 저장할 수:
function productsCtrl($scope, $routeParams) {
$scope.productId = $routeParams.productId;
}
그리고 html에:
<...productListHtml...>
<div ng-switch="productId != null">
<div ng-switch-when="true" ng-include="'partials/product.html'">
</div>
$routerProvide가 여러 ng-view를 지원하지 않으므로 Angular에서 보기를 중첩하고 딥링크하는 데 문제가 있었습니다.하지만 여기서 어떻게 이런 일이 일어나는지 가능한 해결책을 찾았습니다.요청 컨텍스트 및 렌더링 컨텍스트를 사용하여 수동으로 경로를 처리하는 것을 기반으로 합니다.
저도 같은 문제가 있었는데 이제 UI-Router를 사용하여 해결책이 있습니다.
ngRoute가 아닌 이것을 사용하는 장점은 "ui-view" 명명 규칙을 사용하여 동일한 페이지에 여러 보기를 가질 수 있다는 것입니다.
언급URL : https://stackoverflow.com/questions/12577378/create-a-single-html-view-for-multiple-partial-views-in-angularjs
'programing' 카테고리의 다른 글
| angularjs에서 문자열을 다듬으려면 어떻게 해야 합니까? (0) | 2023.10.31 |
|---|---|
| mysql 열에 있는 모든 값을 변경합니다. (0) | 2023.10.31 |
| C/P 스레드 사용: 공유 변수가 변동성이 있어야 합니까? (0) | 2023.10.26 |
| angularjs에서 배열 푸시의 중복을 방지하는 방법 (0) | 2023.10.26 |
| Woocommerce: html 출력을 대체하는 데 도움 (0) | 2023.10.26 |