[ADF Tutorial] Chapter three: Baby steps
As a developer you need to prepare your environment to start working with Angular. I’d like to recommend use Microsoft’s Visual Studio Code _from now VSC_. It’s free and it’s really cool because you don’t need anything else to work with it. Let’s open our Alfresco Content App and start playing with it.
Hey, hey! Don’t rush. First of all, start up your Alfresco local instance. In other case, Alfresco Content App won’t be able to login.
So… Steps
- Start up Alfresco
- Once you have downloaded and installed VSC, open it
- Click on File > Open and select Alfresco Content App
- Click on View > Terminal integrated
- Write on Terminal npm start to launch the app
Just a simple test to check how works:
- On left side, click on index.html to open it
- On line 5, change
My Alfresco Content App
by
This will be my amazing alfresco content app based on angular
- Save it, and you should see something like this:
- Your browser also will be auto-reloaded:
Congrats! You just had your first contact with ADF! 🙂
Let’s move forward!
The sample content app looks like:
Next, what we’d like to achieve is add a new option on the left menu panel (the sidenav) to click on it and see a classic Hello World message.
Go ahead!
- First step: Assuming you have no idea where to add this new item. Let’s check with Firefox dev inpector tool (there are similar tools for Chrome, Edge, Safari, etc.. please use the one you like most). Place the mouse icon on left menu. Click right button on inspector and check what we have there:
- Then, go to VSC Editor and search by sidenav-menu (I’ve got this name from the Firefox inspector):
- On line 66, add these lines:
<div class="sidenav__section"> <ul class="sidenav-menu"> <li class="sidenav-menu__item"> Try me! </li> </ul> </div>
Note: I’ve just copied the div, ul and li tags from preview portion of code (line 52 till 65) and add a simple plain text
- Save and check the result:
Okey, I admit it: Looks really spooky. Let’s improve it. - To show some nice icon, use again Firefox inspector:
- Cool, now we need to search in our project by material-icons:
- Open the following file assets > fonts > material-icons > Materialicons-Regular.svg – In this file, we have all the name of the icons we can use:
Note: You can check which icons we have available here… Is more user friendly than trying to find a concrete name on this file 😉 - Add the icon name in our portion of code (between lines 67 and 77):
<div class="sidenav__section"> <ul class="sidenav-menu"> <li class="sidenav-menu__item"> <a class="sidenav-menu__item-link"> <mat-icon>fiber_new</mat-icon> Try me! </a> </li> </ul> </div>
This is the result:
Note: On the website I’ve mentioned previously, I choose NEW icon. I though it was the most appropriated 🙂
What we have now?
- An additional option on left menu
- It is fashion because has a class following app style 😎
- It has an icon super cool
What’s next? Move one step further: Create a simple function and call it. The idea is:
- Register our new function (we don’t know yet where)
- In our option we need to call our custom function (in sidenav.component.html)
Gotcha! Go, go, go!
In Angular, each component has the following files:
A ts file is the controller of this component (using typescript) and it’s the one in charge to initialize, between other options, our component. In our case, we need to find where it is the init method and include our function. With this, as soon as menu is loaded in the page, our function will be available.
- Open sidenav.component.ts
- Go to line 41, just after export class SidenavComponent implements OnInit, OnDestroy { and introduce our basic function:
//my custom amazing function mybuttonClick(event:any) { alert('Hello world :)'); event.preventDefault(); }
- Open sidenav.component.html and go to our new option, we need to call our function with (click)=”mybuttonClick()”:
<div class="sidenav__section"> <ul class="sidenav-menu"> <li class="sidenav-menu__item"> <a class="sidenav-menu__item-link" (click)="mybuttonClick()"> <mat-icon>fiber_new</mat-icon> Try me! </a> </li> </ul> </div>
- Save the project and check the result in your browser:
Congratulations! Well done!!
Recap, what we learnt:
- Understand how works Angular
- Angular layout at glance (header, footer, etc)
- Deal with common problems (where are the files located, how to trace the css style, etc)
- Include a custom item on sidenav menu
- Kids are happy if you’re success 🙂 (check the video!)
I hope this post helps you. Ping us on twitter if you have any comments 😉