Criar seu primeiro Angular SPA no AEM introduction
Bem-vindo a um tutorial em várias partes projetado para desenvolvedores novos no Editor de SPA recurso no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um aplicativo do Angular para uma marca fictícia de estilo de vida, a WKND. O aplicativo Angular é desenvolvido e projetado para ser implantado com o editor SPA do AEM, que mapeia componentes do Angular AEM para componentes do. O SPA completo, implantado no AEM, pode ser criado dinamicamente com as ferramentas tradicionais de edição em linha do AEM.
Implementação do WKND SPA
Sobre
O objetivo deste tutorial em várias partes é ensinar um desenvolvedor a implementar um aplicativo do Angular para funcionar com o recurso Editor de SPA do AEM. Em um cenário do mundo real, as atividades de desenvolvimento são divididas por persona, muitas vezes envolvendo um Desenvolvedor de front-end e uma Desenvolvedor de back-end. AEM Acreditamos que é benéfico que qualquer desenvolvedor envolvido em um projeto SPA Editor conclua este tutorial.
O tutorial foi projetado para funcionar com AEM as a Cloud Service e é compatível com versões anteriores com AEM 6.5.4+ e AEM 6.4.8+. O SPA é implementado usando:
Estime de 1 a 2 horas para passar por cada parte do tutorial.
Código mais recente
Todo o código do tutorial pode ser encontrado em GitHub.
A variável base de código mais recente O está disponível como Pacotes AEM para download.
Pré-requisitos
Antes de iniciar este tutorial, você precisará do seguinte:
- Conhecimento básico do HTML, CSS e JavaScript
- Familiaridade básica com o Angular
- SDK AS A CLOUD SERVICE AEM, AEM 6.5.4+ ou AEM 6.4.8+
- Java
- Apache Maven (3.3.9 ou mais recente)
- Node.js e npm
Embora não seja obrigatório, é benéfico ter uma compreensão desenvolvimento de componentes tradicionais do AEM Sites.
Ambiente de desenvolvimento local local-dev-environment
Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeos são capturados usando o SDK as a Cloud Service do AEM em execução em um ambiente de sistema operacional Mac com Código do Visual Studio como o IDE. Os comandos e o código devem ser independentes do sistema operacional local, a menos que indicado de outra forma.
Próximas etapas next-steps
O que você está esperando?! Inicie o tutorial navegando até o Projeto do Editor de SPA e saiba como gerar um projeto habilitado para o Editor de SPA usando o Arquétipo de projeto AEM.
Compatibilidade com versões anteriores compatibility
O código de projeto deste tutorial foi criado para o AEM as a Cloud Service. Para tornar o código do projeto compatível com versões anteriores para 6.5.4+ e 6.4.8+ várias modificações foram feitas.
A variável UberJar v6.4.4 foi incluído como uma dependência:
<!-- Adobe AEM 6.x Dependencies -->
<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.4.4</version>
<classifier>apis</classifier>
<scope>provided</scope>
</dependency>
Um perfil Maven adicional, chamado classic
foi adicionado para modificar a criação para ambientes AEM 6.x do target:
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
A variável classic
O perfil do está desativado por padrão. Se estiver seguindo o tutorial com AEM 6.x, adicione a variável classic
perfil sempre que instruído a executar uma compilação Maven:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Ao gerar um novo projeto para uma implementação do AEM, sempre use a versão mais recente do Arquétipo de projeto AEM e atualize o aemVersion
para direcionar a versão pretendida do AEM.