Angular

Here, you’ll find how to configure Beagle’s library for Angular.

Usage configurations

After you finished the installation, you need to make Beagle’s usage configuration for Angular’s framework. To do so, you just have to follow these steps:

Step 1: Configure using an automatic configuration

Type one of the commands below to generate the files that will be used on Beagle’s library. It’s possible to run the command according to your package manager:

yarn beagle init
npx beagle init

Once you made it, Beagle will return some questions. To answer them, follow the orientations below:

Question 1: Would you like to use yarn or npm?
In this case, type the option that will be used as manager. In our example, we will use yarn, so type yarn and press enter.

Question 2: Path to beagle’s module (press enter to use default)
In this case, type the module path that will be used for Beagle. Considering we’re creating this project from zero and there is no module, you just have to press enter without informing anything.

Question 3: Path to the module with the components to use with beagle (press enter to use default)
In this case, type the module path that will be used for Beagle’s components. Considering we don’t have any module yet, you just have to press enter without informing anything.

Question 4: What’s the base url of the backend providing your beagle JSONs? (press enter to use default)
In this case, type the backend’s basis URL that will be used to rescue JSON files. For the example use a JSON, so just type: http://localhost:4200/assets

At the end of this process, two files will be generate on your project:

  • beagle-components.module.ts
  • beagle.module.ts.

Open the file app.module.ts and, then, import Beagle’s module that was just generated:

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

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

Step 2: Create a JSON to be rendered

Now, you just have to create a JSON to render the components. Usually, this process would be made by an external server that would return de JSON, but for this example you’ll create a local file to be accessed for the test.

On your angular project, navigate to the src/assets file and create a new file named payload.json. Open this new created file and copy the content below:

{
    "_beagleComponent_": "beagle:container",
    "children": [
        {
            "_beagleComponent_":"beagle:text",
            "text":"Hello Beagle"
        },
       {
            "_beagleComponent_":"beagle:text",
            "style":{
              "padding":{
                "top":{
                  "value":10,
                  "type": "REAL"
                }
              }
            },
            "text": "Beagle is a cross-platform framework which provides usage of the server Driven UI concept,natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code"
        }
    ]
}

After you have created your JSON, open the generated file beagle.module.ts in the previous step and add as a baseUrl to the path: http://localhost:4200/assets

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

@BeagleModule({
  baseUrl: 'http://localhost:4200/assets',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    // Associate every beagle component to your angular component.
  },
})
export class Beagle {}

Well done, your configuration is ready! Now, see how to render mapped components on JSON.

Step 3: Use beagle-remote-view

After creating the JSON, you need to tell Angular where to render Beagle’s components. To do this, our lib provides the component <beagle-remote-view>.

Open app.component.html file and replace all the content with this code:

<beagle-remote-view route="/payload.json"></beagle-remote-view>

route in the code above states which route will be loaded. The URL specified here is relative to the baseUrl declared in the configuration.

Example

Testing the application

Before we test if the configuration worked, you have to run one of the commands below to initialize the application.

If you use npm:

npm run serve

If you use yarn:

yarn serve

After you have finished using these commands, access the local: http://localhost:4200
You will see this screen:


Last modified February 12, 2021: Fix/migrate images to aws (#299) (a7bb5457)