Desejo criar um único arquivo html com várias tags. Estes devem atuar como visões individuais separadas que normalmente são mantidas em pastas parciais. E então eu gostaria de especificá-los no controlador de roteamento. Por enquanto estou fazendo o seguinte: 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; }]); index.html
Search form with AngualrJS
na pasta parciais: eu tenho 2 exibições de html chamadas edit.html e productlist.html
em vez de criar esses 2 arquivos, desejo combiná-los em um em separado e chamá-los (os divs) por meio de roteamento. Como eu faço isso?
Você poderia usar ng-switch para renderizar condicionalmente sua productList com um include, dependendo dos parâmetros da rota.
Tente isso na sua configuração:
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'});
E no seu controlador:
function productsCtrl($scope, $routeParams) { $scope.productId = $routeParams.productId; }
E no seu html:
<...productListHtml...>
Eu tive problema com vistas de aninhamento e links profundos em Angular como $ routerProvide não suporta múltiplos ng-view .. Mas eu encontrei uma solução possível como fazer isso acontecer aqui . Sua base na entrega de rotas manualmente usando contexto de solicitação e contexto de renderização.
Eu tive o mesmo problema, agora há uma solução para isso usando: UI-Router
A vantagem de usar isso e não o ngRoute é que você pode ter várias visualizações na mesma página usando a convenção de nomenclatura “ui-view”.