How to create an AEM SPA component using Angular
Aug 15, 2023
How to create an AEM SPA component using Angular
If you want to create an AEM SPA app using Angular.js components and add them to a page, in this series, you will learn how.https://dlighthouse.teachable.com/cou …https://www.dlighthouse.co/2020/07/cr …https://www.youtube.com/c/ManuelGutie …https://www.buymeacoffee.com/ManuelGu …https://twitter.com/drginm )https://www.linkedin.com/in/drginm
Content
0.63 -> If you want to create an AEM app using Angular.js
components
6.21 -> So that they can be added into a page
9.76 -> In this series, you will learn how!
13.07 -> Keep watching!
14.769 -> Hi there!, I’m Manuel Gutierrez from dlighthouse.co
and I make videos that help you learn about
21.619 -> different programming topics like AEM, docker,
TensorFlow, unity, and more.
28.619 -> So, if you are new here hit the subscribe
and the bell notification buttons below so
35.59 -> that you don’t miss a thing!
36.59 -> So let’s start!!!
38.32 -> It’s really simple to create an aem app
with support for angular js components using
45.07 -> adobe’s archetype.
47.9 -> You will need aem 6.4 Service Pack 2 or newer
for this video.
53.85 -> I am going to use aem 6.5
57.829 -> So let’s create the app from scratch.
61.03 -> I am providing the most important properties
in a “single” line here, notice that the
66.67 -> version that I am using is the 23rd and that
the frontendModule property was set to angular
78.469 -> After that, the archetype creates a folder
called ui.frontend for our angular application.
86.74 -> I am going to focus on the src/apps/components
folder where all the angular components are
93.25 -> located
Change to the directory for our new AEM application
99.569 -> And let’s build and deploy our new app (make
sure that you have AEM up and running)
107.119 -> For creating an AEM component using angularjs
we need at least 4 things,
113.459 -> A skeleton AEM component with a dialog
An angular component
121.099 -> an entry importing the component inside the
app.module.ts file
127.67 -> And a sling model which I’ll be configuring
in the next video
133.02 -> I am going to use the yeoman generator for
creating the skeleton AEM component for me
140.2 -> with some additional example fields inside
the dialog.
144.92 -> I am calling it basic-component and I am making
sure that the names for the folders and component
152.79 -> group match my current application’s configuration
170.21 -> After that, we should end up with a component
inside angularjs-simple-example/components
177.07 -> called Basic Component, if you check the dialog’s
xml file you will find two example fields,
185.79 -> one for the text and another for the checkbox.
191.62 -> Given that we are using angular for this component
we will ignore the htl script.
197.82 -> Before creating the component make sure that
you have the Angular command-line interface
204.14 -> (CLI) by first installing it in your computer
207.43 -> Let’s use Angular’s CLI to create a simple
component for us, in your console or terminal
216.65 -> change to the ui.frontend folder inside our
application and use “ng generate component”
224.63 -> with the name of the component to be created
inside the components subfolder
231.1 -> This command will create the basic-component
folder, a couple of files for the css, html,
238.6 -> typescript and tests for the component, I
am going to remove the tests for this video.
245.14 -> The command also modified the app.module.ts
by adding the component into the declarations
253.96 -> property
If we open the typescript file we should see
260.4 -> a simple angularjs component already created.
264.66 -> Notice that given that I am naming it Basic
Component it has the word Component twice,
271.46 -> in a typical application you would not add
the word Component explicitly and this should
276.68 -> not be an issue but I am keeping it for this
example to have some consistency between the
282.24 -> AEM component inside apps and this one here.
285.68 -> Let’s first add the imports at the top for
the mapTo helper library from adobe and add
292.77 -> also “Input” to the list of imported objects
from the “@angular/core” module
301.63 -> Create an editconfig object which will be
used for displaying some text when the component
308.55 -> is empty,
In this case, given that the component’s
313.13 -> properties like the ones defined on the dialog
are available through the cqModel object,
318.41 -> we can just check if cqModel.text doesn’t
have a value so that we can mark this component
325.24 -> as empty
Then on the component add the properties for
332.9 -> “text” and “checkbox” using the @Input
annotation.
339.41 -> Finally, we call mapTo helper function that
maps the angular component to a particular
346.12 -> resourceType inside AEM so that aem knows
which angularjs component to use when rendering
353.71 -> our page
On the HTML we render the values for the text
359.3 -> and checkbox properties inside the component
Then inside the app.module.ts file, given
372.921 -> that the component has already been imported,
just add it into the entryComponents array
379.09 -> given that the components are added dynamically
into the page
385.58 -> Go to the root folder for the application
Build and deploy the application again
392.36 -> Open the homepage for your new angularjs-simple-example
site inside aem
401.12 -> If you don’t see the basic component in
the list,
404.61 -> Go to the page information button and click
on edit template, click on the layout container
412.21 -> and then on policy,
Scroll down and select the “Angularjs simple
418.52 -> example - Content” group and click on save
Go back to your page and refresh, you should
427.99 -> be able to see the basic component now
Add the component into the page, add some
436.29 -> text, check the checkbox, and click on save.
441.19 -> Finally, refresh the page to see the changes
In the next video, we will be configuring
447.92 -> the sling model also so that we no longer
have to refresh the page per each edition
453.69 -> Awesome!
455.64 -> Congratulations and thanks for watching!
458.68 -> You can join the free mini course associated with this video,
462.6 -> by clicking on the link in the description below
465.9 -> Share any comments or suggestions
468.52 -> about the series or future topics
471.26 -> And if you liked the video also hit the like button below!
Source: https://www.youtube.com/watch?v=Xd7fsbug24Q
