In this article, I am going to cover how to integrate Angular 4 with AEM 6.2, it does not cover much about angular or AEM but, if you want to know more about angular then I suggest you refer my other article’s which are posted on Angular 2, at high level the angular will be used to build client-side web application’s
Angular 2 with AEM integration
The integration which I am going to showcase you is very simple and this is very useful when you want to execute everything from Angular side like making a request to REST Api’s and render it on front-end, if you want to know how to pass angular 2 authoring dialog values from AEM component to Angular 2 component then check below link
here, I am going to use my angular 2 registration application which was built for my other article, before integrating this with AEM, the first thing which we should know is what angular application will generate when we build the angular 2 application by using “ng build” command?
I am using Visual Studio Code IDE to develop angularjs application, to build the application you can go to the View -> Integrated Terminal -> run “ng build” command
Now, in the body tag call below angular js selectors
In the header section, we need to call below base tag
Finally, create a new page and open it in the browser, or download the code and install it using package manager then open http://localhost:4504/content/aemtoolkit/aemhome.html you should see something like below
On click of Sign up button, the application will act as Single page application and redirects to thank you page
A technology enthusiast and a professional blogger from India. Through out my IT career, I have had the pleasure of working on various new technologies and built products like www.ziprides.com and some other products. Unfortunately, my attempts have not given me the desired results and as a result, I have finally decided to build a professional blog where I would like to share all my learnings and hoping to learn from other enthusiasts around the world.