utworzyć pojedynczy widok HTML dla wielu widoków częściowych w angularjs

Chcę utworzyć pojedynczy plik HTML z wieloma tagami. Powinny one działać jako oddzielne pojedyncze widoki, które zwykle znajdują się w folderze partials. A następnie chcę je określić w kontrolerze routingu. Na razie robię następująco: app.jsutworzyć pojedynczy widok HTML dla wielu widoków częściowych w angularjs

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; 
}]);

index.html

<!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>

w folderze partials: mam 2 widoki html nazwanych edit.html i productlist.html

zamiast tworzyć te 2 pliki, chcę je połączyć w jeden w oddzielne i wywołać je (div) poprzez routing. Jak to zrobić?

Źródło

2012-09-25 z22

Proszę wyjaśnić. Czy chcesz dodać elementy div do index.html? –

no nie w pliku index.html, ale w innym pliku html – z22

dlaczego nie używać jquery? lub po prostu javascript, aby pokazać/ukryć divy, wszystkie w tym samym div. – nycynik

Możesz użyć przełącznika ng, aby warunkowo wyrenderować swoją listę produktów z załącznikiem, w zależności od parametrów trasy.

Spróbuj to w config:

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'});

A w kontrolerze:

function productsCtrl($scope, $routeParams) { 
     $scope.productId = $routeParams.productId; 
    }

I w HTML:

<...productListHtml...> 
    <div ng-switch="productId != null"> 
     <div ng-switch-when="true" ng-include="'partials/product.html'"> 
    </div>

Źródło

2012-09-25 14:10:17

miałem problem z gniazdowania poglądów i głębokiego linkowania w Angular jak $ routerProvide nie obsługuje wielu ng-view .. Ale znalazłem możliwe rozwiązanie, jak zrobić to happe n here. Jest to oparte na ręcznym przekazywaniu tras przy użyciu kontekstu żądania i kontekstu renderowania.

Źródło

2013-01-18 13:57:47

Miałem ten sam problem, teraz nie jest rozwiązaniem dla niego za pomocą: UI-Router

Zaletą korzystania z tego i nie ngRoute jest to, że można mieć wiele widoków w tej samej stronie za pomocą „UI-view " Konwencja nazewnictwa.

Źródło

2016-04-10 11:56:23

utworzyć pojedynczy widok HTML dla wielu widoków częściowych w angularjs

Odpowiedz

Powiązane problemy