Case Web

Passo 1: Instale o Angular CLI, abra o terminal e use o comando abaixo:

ng new caseAngular

Aguarde o CLI terminar a criação do projeto.

Passo 2: entre na pasta do projeto gerado cd caseAngular, adicione o Beagle Angular ao seu repositório com um dos comandos abaixo de acordo com seu gerenciador de pacotes:

npm install --save @zup-it/beagle-angular

yarn add @zup-it/beagle-angular

Agora, aguarde a instalação.

Passo 3: digite um desses comandos e aperte o enter:

yarn beagle init

npx beagle init

• Na pergunta ‘Would you like to use yarn or npm?' Digite a opção que você escolheu para usar como gerenciador, no exemplo será o yarn, portanto digite yarne aperte enter.
• Na pergunta ‘Path to the beagle module (press enter to use default)’ - digite qual o caminho do módulo que será usado para o Beagle, como o projeto foi criado agora, não há módulos ainda, portanto aperte enter sem informar nada.
• Na pergunta ‘Path to the module with the components to use with beagle (press enter to use default)’ - digite qual o caminho do módulo que será usado para o Beagle, como o projeto foi criado agora, não há módulos ainda, portanto aperte enter sem informar nada.
• Na pergunta ‘What’s the base url of the backend providing your beagle JSONs? (press enter to use default)’ - digite qual será a URL base do backend que será utilizada para resgatar os JSONs, aqui será usada o mockyio, então digite https://www.mocky.io/v2/e aperte enter. Aguarde a configuração terminar:

• Foram criados dois arquivos em seu projeto beagle-components.module.ts e beagle.module.ts.

Abra o arquivo app.module.ts e importe o módulo Beagle que acabou de ser gerado:

...
import { Beagle } from './beagle.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Beagle
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Abra o arquivo beagle.module.ts e coloque o caminho baseUrl

import { BeagleModule } from '@zup-it/beagle-angular'
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    // Associate every beagle component to your angular component.
  },
})
export class Beagle {}

Abra o arquivo app.component.html e substitua todo o conteúdo pelo código abaixo. No route adicione o caminho relativo ao JSON remoto, será usado o: /welcome.

<beagle-remote-view route="/welcome"></beagle-remote-view>

route no código acima diz qual a rota será carregada. A URL especificada aqui é relativa à baseUrl declarada na configuração.

Se você usa o npm:

npm run serve

Se você usa o yarn:

yarn serve