AngularJS - Múltiplas visualizações em um único modelo

132

Estou criando um aplicativo Web dinâmico usando o AngularJS. É possível ter vários ng-viewem um único modelo?

angularjs ng-view

— Jayram
fonte

2

parece haver uma solicitação de recebimento, ainda com alguns bugs: github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig escreve sobre o papel das diretivas no Angular. Não é uma resposta à sua pergunta, mas para alguns casos suas idéias poderia ser boa alternativa: jan.varwig.org/archive/angularjs-views-vs-directives/...

— Juha Palomäki

estava atravessando o tutorial angular e tinha essa mesma pergunta exata, eles não fazem isso muito claro, parece ser um conceito bastante profunda embora ..

— qwwqwwq

100

Você pode ter apenas um ng-view.

Você pode alterar seu conteúdo de várias maneiras: ng-include, ng-switchou mapeamento de diferentes controladores e modelos através do routeProvider.

— pasine
fonte

1

controladores e modelos de mapeamento substituirão todo o elemento ng-view, certo?

— Zx1986

9

Que tal mudar dinamicamente o conteúdo de um widget? Você não gostaria de criar uma visualização para o widget e um controlador para o widget e um modelo para o widget?

— Ray Suelzer

É recomendável usar visualizações? Não é melhor para definir divs com ng-showe ng-hidee controlar a sua visibilidade usando variáveis? Porque às vezes eu gostaria de ocultar / mostrar vários componentes

— SomethingSomething

39

O UI-Router é um projeto que pode ajudar: https://github.com/angular-ui/ui-router Um de seus recursos é o Multiple Named Views

O UI-Router possui muitos recursos e eu recomendo que você o use se estiver trabalhando em um aplicativo avançado.

Verifique a documentação de várias vistas nomeadas aqui .

— Morteza Ziyae
fonte

6

Infelizmente, como o readme do ui-router diz: Nota: O UI-Router está em desenvolvimento ativo. Como tal, embora esta biblioteca seja bem testada, a API pode mudar. Considere usá-lo em aplicativos de produção apenas se você estiver confortável seguindo um registro de alterações e atualizando seu uso de acordo.

— trainoasis

1

@trainoasis Utilizado para vários projetos, parece 'muito' estável e até agora não tive nenhum problema em alterar a API, na verdade não me lembro de nenhuma alteração importante na API.

— Morteza Ziyae

19

Eu acredito que você pode conseguir isso apenas tendo solteiro ng-view. No modelo principal, você pode ter ng-includeseções para sub-visualizações e, no controlador principal, definir propriedades do modelo para cada sub-modelo. Para que eles se vinculem automaticamente às ng-includeseções. É o mesmo que ter váriosng-view

Você pode verificar o exemplo dado na ng-include documentação

no exemplo, quando você altera o modelo da lista suspensa, ele altera o conteúdo. Aqui, suponha que você tenha um principal ng-viewe, em vez de selecionar manualmente o sub-conteúdo selecionando a lista suspensa, faça-o como quando a vista principal é carregada.

— Tekz
fonte

2

Na ausência de solução como o UI-Router, o ng-include é realmente uma alternativa viável, como você explicou. O que o ng-include não pode realizar são as várias visualizações conduzidas por URL (estado), $ route não pode renderizar diferentes visualizações dinamicamente com base na URL atual. Poderíamos torcer os braços do Angular e fazer isso acontecer usando lógica personalizada no controlador, como o exemplo na ng-include documentação , mas não é um padrão de arquitetura de aplicativo desejável, o UI-Router é o tipo certo de solução.

— Yiling

Uma vantagem para o comentário @Yiling. Usar ng-include é uma solução alternativa.

— Farshid Saberi 9/10/2015

13

Usando o ng-viewmódulo regular , você não pode ter mais de um modelo dinâmico.

No entanto, este projeto permite que você faça isso (procure ui-router).

— ŁukaszBachman
fonte

3

angular-ui parece ser uma boa escolha no futuro (próximo) mas ainda parece muito instável para uso em produção

— David Barreto

8

É possível ter várias visualizações ou aninhadas. Mas não por ng-view.

O módulo de roteamento primário em angular não suporta múltiplas visualizações. Mas você pode usar o ui-router. Este é um módulo de terceiros que você pode obter pelo Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Também está sendo desenvolvida uma nova versão do ngRouter (ngNewRouter). Não é estável no momento. Então, eu forneço um exemplo simples de inicialização com o ui-router. Usando-o, você pode nomear visualizações e especificar quais modelos e controladores devem ser usados para renderizá-las. Usando $ stateProvider, você deve especificar como os espaços reservados de exibição devem ser renderizados para um estado específico.

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

Você precisa fazer referência a angularjs e angular-ui.router para esta amostra.

$ bower install angular-ui-router

— Sabre Farshid
fonte

Obrigado Farshid isso é ótimo! Deve ser mencionado na angular-ui / ui-router Github repositório github.com/angular-ui/ui-router onde eu tenho o módulo

— totallytotallyamazing

Não sei por que você precisaria fazer isso. Por que não incluir ng o cabeçalho / rodapé e visualizar o conteúdo?

— user441521

ng-include funcionará se os arquivos estiverem hospedados, por exemplo. em nodejs. Se você trabalha com o diretório local, isso gera um erro entre domínios.

— Sid

0

Você não pode ter várias visualizações de ângulo. Abaixo está o meu caso de uso em que resolvi meu requisito. Eu queria ter um comportamento com guias na caixa de diálogo do modelo. Eu estava enfrentando um problema ao clicar nas guias com hiperlink que invocariam os links do roteador. Eu resolvi isso usando o botão e css para abas. Quando o usuário clica na guia, ele na verdade não chama nenhum hiperlink que sempre chama o ng-router. Quando o usuário clica na guia, ele chama um método, onde eu carrego dinamicamente html. Abaixo está a função no clique da guia

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Usuário $ templateRequest. Na página test_template.html, adicione seu conteúdo html. Esse conteúdo html será vinculado ao seu controlador.

— Aslam anwer
fonte