Zero lógica! Nosso blog ainda não tem nenhuma lógica para recuperar posts. Por hora, é apenas uma aplicação Angular tipicamente roteada. Entretanto, justamente por ser roteada, temos a base estável suficiente para adicionar o suporte ao Blog através do Scully. Para funcionar, o Scully precisa de ao menos uma rota definida em nossa aplicação para funcionar corretamente.
Instalação do Scully
ng add @scullyio/init@2.0.0Não instalei a última versão, para mim, funcionou bem a 2.0.0. Além de instalar, o comando acima, modifica a estrutura do projeto Angular para que este atenda as especificações necessárias. Dê uma olhada em package.json…
"dependencies": {
"@angular/animations": "~12.0.5",
"@angular/common": "~12.0.5",
"@angular/compiler": "~12.0.5",
"@angular/core": "~12.0.5",
"@angular/forms": "~12.0.5",
"@angular/platform-browser": "~12.0.5",
"@angular/platform-browser-dynamic": "~12.0.5",
"@angular/router": "~12.0.5",
"@scullyio/init": "^2.0.0",
"@scullyio/ng-lib": "^1.0.0",
"@scullyio/scully": "^1.0.0",
"bootstrap": "^5.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},Faça a importação do módulo ScullyLibModule no módulo principal, lembra como faz neah!?
...
import { ScullyLibModule } from '@scullyio/ng-lib';
...
imports: [
...
ScullyLibModuleScullyLibModule é o módulo principal da biblioteca Scully que contém vários serviços e diretivas Angular que Scully precisara. Ele também cria um arquivo de configuração para a biblioteca Scully na raiz do projeto.
import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
projectRoot: "./src",
projectName: "meu-blog",
outDir: './dist/static',
routes: {
}
};O arquivo de configuração contém informações sobre nosso aplicativo Angular que Scully precisará ao longo do caminho:
- projectRoot: O caminho que contém o código-fonte do aplicativo Angular
- projectName: O nome do aplicativo Angular
- outDir: O caminho de saída dos arquivos gerados pelo Scully
- routes: Ele contém a configuração de rota que será usada para acessar nossas postagens no blog. Scully irá preenchê-lo automaticamente, como veremos na próxima seção.
O caminho de saída do Scully deve ser diferente do caminho pelo qual a CLI do Angular gera o pacote do seu aplicativo Angular. Este último pode ser configurado a partir do arquivo angular.json
Inicializando nosso blog
Scully fornece um esquema CLI específico do Angular para inicializar um aplicativo Angular, como um blog, usando arquivos Markdown (.md):
ng generate @scullyio/init:markdownApós a execução do comando, 4 perguntas serão feitas (apenas…. espero).
- ? What name do you want to use for the module? (blog) Digite posts e dê Enter
- ? What slug do you want for the markdown file? (id) Enter
- ? Where do you want to store your markdown files? Digite mdfiles e dê Enter
- ? Under which route do you want your files to be requested? Digite posts e dê Enter
Nota: Primeiro criamos o módulo Posts no Angular, na segunda, criamos um identificador único – slug – para cada post, para assim ser possível cada rota. Terceiro, criamos a pasta mdfiles na raiz do projeto. Por padrão, os posts serão criados lá. Quarto, definimos post como rota aos posts.
Okay, o Scully realiza várias ações ao executar os comandos anteriores, incluindo a criação da configuração de roteamento do módulo posts, passa o olho em posts-rounting.module.ts. Mas nada posts ainda…
Scully trabalha criando rotas para cada postagem no blog. Ele usa a configuração de rotas do módulo posts e do módulo principal para construir a propriedade routes no arquivo de configuração. Passa o olho em scully.meu-blog.config.ts
PostsComponent é um componente Angular usado para renderizar os detalhes de cada post. O arquivo de template do componente – posts.component.html pode ser personalizado de acordo com a sua necessidade. Faça isso com Bootstrap 5.
Até este ponto, nós completamos a instalação e configuração do Scully em nossa aplicação. Chegou a hora de terminar o projeto. Na próxima seção vamos fazer o Angular e o Scully trabalharem juntos para mostrar os posts.
