How to create an angular 2.0 application in liferay dxp to fetch the ootb advantages

How to Create an Angular 2.0 Application in Liferay DXP to Fetch the
OOTB Advantages?

Intro
There have been years since technology has been instigating innovations for
the civilizations. That’s what we have been relating to something called
development. And we are now in a century where technology has reached to
an extent with such inventions that were unthinkable before. Virtual Reality
for instance is one of the aspects in this case. This is the science which deals
with the facets that actually do not exist!

AngularJS had already been much popular among developers and
enhancements of Angular 2.0 have made it even more preferred to create
speedy, rich and effective applications. As we know, Angular 2.0 also requires
third party tools to leverage security features, Authorization/Authentication
etc. With its OOTB functionalities, Liferay DXP can be proved an ideal solution
to be used with Angular 2.0 because of many reasons. Few are listed below:
• Liferay comes with more powerful security features as portal setup in
terms of creating SPA website using Angular
• Authorization/Authentication will be managed by Liferay, no need to
consider that part in Angular
• You can use any RESTful API to load data
• Write RESTful API in portlet and utilize it in angular services to serve CRUD
data operations

In this blog, step by step we will create a simple “Hello World” Angular 2.0 App
in Liferay DXP Theme. We have classified the blog in three easy steps for
simplified understanding.
Prerequisite
• Creation of Liferay theme
• Adding Angular files to Liferay theme
Prerequisite:
• You need to have the basic idea about creating a simple Angular application
• If you are too new to Angular, please find the basic
understanding https://angular.io/docs/js/latest/quickstart.html
• You need to have primary knowledge about creating a theme for Liferay
DXP

If you are not familiar with Liferay theme creation, please
find the primary knowledge at Step by Step Guide to Create Theme for
Liferay DXP.
Once you are ready with essential information, we are ready to start our
actual work.

Creation of Liferay theme
Create new Liferay Theme “hello-world-theme” and deploy it
• Create blank website “my-website” and create a public page “home”.
• Apply newly created “hello-world-theme” to “home” page.
• If you observe your code, you will have following structure for your newly
created “hello-world-theme”:

Adding Angular to Liferay theme
1. Now, let’s add Angular files to Liferay theme
• Create new folder “templates” in “src” folder.
• Go to “build” folder and copy “portal_normal.ftl” file and place it in src >
templates folder.
Your “src” folder will look like image shown below.

2. Load Node Modules for Angular dependencies
• Go to your “src” folder and create “package.json” file. Paste following code:

• If you want to use latest packages, go to Angular.io, and grab latest
package.json file. Go to directory D:wsthemeshello-world-themesrc in
CMD and run command “npm install”

Now you able to see “node_modules” folder created inside “src” folder.
You have all dependent modules installed in your theme > src > node_modules
folder.

• 3. Create “App” folder inside “src” folder and create two
files app.component.js and app.module.js.

And put below code in app.module.js file:

4. Now we have some files in “App” and “node_modules” folder and the
complexity is how to call files from the folders because by default Liferay
provides access only to CSS, JS and Images folder.
• As a solution, we have to create freemarker variables to load files
from “App” and “node_modules” folder.
• Open “portal_normal.ftl” from “templates” folder and put below code
inside <head> section.

Now we have ${appPath} and ${nodeModules} path available to access files
inside these folders.
5. Load libraries and app files into theme. Search for <!– inject:js–><!–
endinject –>text in portal_normal.ftl.
• Put the below given code between <!– inject:js–><!– endinject –
> comments.

• You will be able to see the files being loaded
from ${nodeModules} and ${appPath}folder.
6. It is time to load your angular app now
• Go to <section id=”content”> in portal_normal.ftl and then insert <my-
app>Loading…</my-app>
If you observe, your complete portal_normal.ftl code will look as shown
below.

Once all above actions are completed, it’s time to build theme and run your
App.
• “build” your theme
• “deploy” your theme
• Refresh your browser
And that’s done. Your first Angular 2.0 App in Liferay DXP is ready now.

Liferay DXP can make your Angular 2.0 application much secured. Its OOTB
features and functionalities save you from lot of code work and they easily
can be integrated with Angular 2.0 app. It will offer quick and rich user
experience to the user. As a matter of fact, Liferay DXP has got potential to
offer robust and highly scalable technology solutions. If researched and
executed well, it can empower other technologies as well.
If you longing to learn more, please mail us your query.

Original Source :
http://www.azilen.com/blog/create-an-angular-2-application-in-liferay-dxp/

Thanks You
www.azilen.com
Let us know if you have any Question!
info@azilen.com | +1-972-325-2243

How to create an angular 2.0 application in liferay dxp to fetch the ootb advantages

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How to create an angular 2.0 application in liferay dxp to fetch the ootb advantages

Similar to How to create an angular 2.0 application in liferay dxp to fetch the ootb advantages (20)

More from Azilen Technologies Pvt. Ltd.

More from Azilen Technologies Pvt. Ltd. (20)

Recently uploaded

Recently uploaded (20)

How to create an angular 2.0 application in liferay dxp to fetch the ootb advantages