Create AEM Component using Angular 2 JS
Create AEM component using Angular 2 js is one of the most awaited tutorial. This tutorials is in series with Integrate AEM with Angular 2 js, it is advised to go through it first before starting this tutorial.
In this tutorial i am going to cover how to create a component using angular2 js, also i have tried to add most of the commonly used components like text field, checkbox, combo box , text area etc.
Create rendering component using angular 2:-
Lets create a rendering component that content author will drag and drop from side kick to newly created page, Follow below steps to create a component in angular 2
- Go to /apps/angular2-demo/components/content.
- Right click and create a new component and enter below details.
- Click next and add Allowed Parent as */*parsys.
- Click next and Finish.
- Open angular2-text-component.jsp and add below code.
<%--
Angular 2 Text Component .
this is demo component
--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
// TODO add you code here
%>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<cq:include path="par" resourceType="foundation/components/parsys"/>
<cq:includeClientLib categories="app.angular2-demo"/>
<head>
<title>Hello World</title>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': '/apps/angular2-demo/components/content/angular2-text-component/ts' }
});
System.import('app/environment_main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
Create client lib folder for this component:-
- Select /apps/angular2-demo/components/content/angular2-text-component and create a new node with name clientlibs and type cq:ClientLibraryFolder.
- Select clientlibs folder and add categories property to it
- Name:- categories
- type:- String[]
- value:- app.angular2-demo
- Select clientlibs folder and create a new folder inside clientlibs with name angularNativeJs {you can use any name}.
- Upload angular2.js that we have downloaded in above steps in js folder. For uploading either use webdav or vault. If you are not familiar with both just create a new file with name angular2.js under js folder and copy paste the code from downloaded angular2 js file to this file.
- Repeat the above steps for es6-shim.min.js, system-polyfills.js, angular2-polyfills.js, system.js, typescript.js, Rx.js.
- Create js.txt file parallel to js folder and add below line to it.
#base=js es6-shim.min.js system-polyfills.js angular2-polyfills.js system.js typescript.js Rx.js angular2.js
Create TS folder to store TypeScript Files for this Component:-
- Select /apps/angular2-demo/components/content/angular2-text-component and create a new folder by name ts.
- Select ts folder and create a new file environment_app.component.ts and enter below code into it.
import {Component, View} from "angular2/core";
@Component({
selector: 'my-app',
})
@View({
template: '<h1>Welcome to Angular 2 Demo</h1>'+
'<h1>Text ({{textValue}})</h1>'+
'<h3> Description ({{textDesc}})</h3>'+
'Name: <input #textbox type="text" [(ngModel)]="textValue" required><br><br>'+
'Element Type: "{{textbox.type}}"<br><br>'+
'Address : <textarea #textarea [(ngModel)]="textDesc" rows="4"></textarea><br><br>'+
'Element Type: "{{textarea.type}}"<br><br>'+
'Option : <input #cb1 type="checkbox" value="one"> One <input #cb2 type="checkbox" value="two"> Two<br><br>'+
'Element Type: "{{cb1.type}}"<br><br>'+
'Gender : <input #rb1 name="sex" type="radio" value="M"> Male <input #rb2 name="sex" type="radio" value="F"> Female<br><br>'+
'Element Type: "{{rb1.type}}"<br><br>'
})
export class AppComponent {
public textValue = "Default value";
public textDesc = "Default Description"
}
- The first line will import the Component and View package from angular2/core.
- The @Component is an Angular 2 decorator that allows you to associate metadata with the component class.
- The my-app can be used as HTML tag to injecting and can be used as a component, Means my view will render the component inside<my-app> tag in my jsp or html file..
- The @view contains a template that tells Angular how to render a view.
- The export specifies that, this component will be available outside the file. We can also initialize variables default values or can modify the values by calling a method from view and returning user values from method inside export class.
Select ts folder and create a new file environment_main.ts and enter below code into it.
import {Component} from 'angular2/core';
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"
bootstrap(AppComponent);
- The environment_main.ts file tells Angular how to load the component. To launch the application, we need to import both Angular’s browser bootstrap function and root component of the application.
- After importing, the bootstrap is called by passing the root component type i.e. AppComponent.
Create Template for rendering our component:-
Lets create a template which we are going to use to render our angular 2 component. Follow below steps to create Template in aem:-
- Go to /apps/angular2-demo/templates.
- Right click and create new template and enter below details.
- Enter AllowedPath as /content(/.*)?
- Click next and Finish.
- Click Save All.
Test Angular 2 AEM Component:-
- Go to Site Admin.
- Create new Page and select Home page Template.
- Double click on Angular2Demo Page.
Congratulations You have successfully create Angular 2 component in AEM. Click here to download code package.
Leave a Reply