Using an Angular (Angular 4) Single Page Application as a Script Portlet

Overview

Open source JavaScript frameworks are becoming the de-facto platform for web or mobile development. There are several advantages of using a JavaScript framework for web or mobile development. However, the biggest advantage of using these JavaScript frameworks is that they make your web or mobile application completely platform agnostic. Until you can access your service over HTTP protocol and get your response data, you can build your entire application client side by using these open source JavaScript frameworks irrespective of your back-end platform.

IBM Script Portlet takes this platform agnostic approach to building web and mobile applications up a notch. With the Script Portlet, you can import any JavaScript framework application as a JSR-286 portlet and host it on WebSphere Portal. You can build your entire enterprise portal by building individual JavaScript framework applications and importing them as portlets with Script Portlet irrespective of your back-end platform. You can also use the same application in a mobile app and as a portlet. Therefore, you can reuse the same code for multiple devices and multiple platforms.

The following article describes the steps to import a simple Angular (Angular 4) Single Page Application in a Script Portlet to convert it into a JSR-286 portlet.

NOTE: If you are interested in using ReactJS, Backbone.js or AngularJS (Angular1), refer to the following articles:

• Using a ReactJS Single Page Application as a Script Portlet
• Using a Backbone.js Single Page Application as a Script Portlet
• Using an AngularJS (Angular1) Single Page Application as a Script Portlet

The ReactJS, Backbone.js, and AngularJS articles demonstrate how to build and deploy the same sample application with respective JavaScript Frameworks that is described in this Angular article. This adds credence to the argument that you can use Script Portlet to import Single Page Applications as portlets irrespective of what JavaScript framework is used to build the application.

Target Audience

This article is intended for developers and architects. It illustrates how a Single Page Application built in an open source JavaScript framework, like Angular, can be converted into a JSR-286 portlet with minimal effort. This article is not intended to be an introduction or tutorial for either Angular or IBM Script Portlet.

Application Overview

The sample Angular application that is built in this article demonstrates the functions of viewing and searching an Employee Directory in Script Portlet that is hosted on WebSphere Portal. As the portlet is rendered, it displays the entire employee list as shown in the following image.

The user can type in the search box to search by employee name. The search input is a type-ahead field and the employee list that is displayed is filtered as the user types in the search string.

Rest Services for Sample Application

The application uses the following two rest services to get its data.

The REST services that are listed return either a single or collection of following JSON object.

{ “id”:”1″, “name”:”Samantha Daryn”, “title”:”Sr. Vice President”, “location”:”Chicago”, “email”:”daryn981029@xyzmail.com”, “phone”:”3456″, “image”:”http://{yourdomain}:{port}/images/SamanthaDaryn.jpg” }

Prerequisites

Make sure that you have the latest version of Node.js installed on your machine. You will use the Angular CLI to build the angular application in the later steps.

Setting up your Workspace

Open a command prompt window and go to the directory on your file system where you want to create the EmployeeDirectory application. Run the commands in the next section in the sequence that is mentioned to set up your workspace.

• npm install -g @angular/cli
• ng new EmployeeDirectory
• cd EmployeeDirectory
• ng eject
• ng g component employeeList
• ng g service employee-list/employeeList

Note: The commands that are listed implement the following:

• npm install -g @angular/cli – Installs Angular CLI globally on your system, which you will use to create the Angular application.
• ng new EmployeeDirectory – Creates a directory EmployeeDirectory on your file system and installs all the modules under it that you will need to create the Angular application.
• ng eject – Ejects the app and exposes the webpack.config.js file that you will customize in later steps to deploy the application.
• ng g component employeeList – Creates the empty shell for employeeList Angular component that you will use to build the application.
• ng g service employeeList – Creates the empty shell for employeeList Angular service that you will use in this angular application under the employee-list folder that is created by the previous step.

Creating the Angular Service

Add the following code to employee-list.service.ts file to create the Angular services.

Note: The TypeScript code shown implements the following:

• Creates getEmployeeList service to be consumed by an Angular component.
• Creates getEmployeeByName service to be consumed by an Angular component.

Creating the Angular Component

Add the following code to employee-list.component.ts file to create the Angular services.

Note: The TypeScript code shown implements the following:

• Creates the EmployeeList Component by defining the selector, templateURL, and providers.
• Imports the EmployeeListService created in previous step.
• Defines the constructor of the EmployeeList component, which calls the getEmployeeList service of the Angular Service.
• Defines a filterRecords function in the EmployeeList component that calls the getEmployeeByName service of the Angular Service.

Add the following code to employee-list.component.html file to create the UI for the component.

Note: The HTML code shown implements the following:

• Creates a search input box with which calls the filterRecords function of the component.
• Create a list of employees by using the *ngFor directive that iterates through the service results.

This completes the steps required to build the Angular component.

Putting it All Together

Modify app.module.ts to register and bootstrap the EmployeeList component.

Note: The TypeScript code shown implements the following:

• Imports the relevant modules required by the EmployeeList component.
• Define the URL routing for the EmployeeList component.
• BootStrap the EmployeeList component so that it is initialized by Angular.

Next, modify index.html to call the EmployeeList component. This completes all the steps to build your Angular application.

Building your Angular Application

Now that you completed developing your Angular application, it is time to build your application for deployment. Add the following code to webpack.config.js file before you build the application.

In the top section of the file, add:

const webpack = require('webpack');

Under the module export sections, add:

new webpack.optimize.UglifyJsPlugin({ output: { "ascii_only": true } }),

Note:These changes to webpack.config.js are required to preserve Unicode characters post minification of the JavaScript files during the build process. Refer to the Technote for more details.

Next, open a command prompt window and navigate to the EmployeeDirectory folder on your file system. To build the Angular app, from the command prompt, run the command:

• npm run build

This creates a folder dist under the EmployeeDirectory folder on your file system. This folder contains all the artifacts that you require to deploy your application to any server.

Running your Angular Application as a Portlet

Now that you have your Angular application built, the next step is to deploy this Single Page Application as a portlet on WebSphere Portal with Script portlet in one of the following two ways:

• Using Command Line Push Script to Deploy Script Portlet Applications – Command Line Push can be used for iterative editing during the development of your application and thus you do not need to wait until you complete your application development. You can see your changes in Script portlet as you push your changes.
• Importing your application as a zip file in Script Portlet – This approach is preferred when you have an application ready to go and all you need is to import in a Script portlet to host on WebSphere Portal. Zip the contents of you application folder that contains your html, js, css, and other relevant code and import it in an instance of Script portlet.

After you deploy your application in a Script Portlet, test your application as a portlet that runs on WebSphere Portal.

Conclusion

The above article illustrates that you can convert a JavaScript framework based Single Page Application into a JSR-286 portlet with minimal effort thus leveraging your JavaScript framework knowledge as well as leveraging WebSphere Portal as your enterprise platform.

Refer to the article “Using Single Page Applications with Script Portlet” to understand best practices, tips and limitations of importing JavaScript framework applications as portlets.

References

• Using an AngularJS (Angular1) Single Page Application as a Script Portlet
• Using a Backbone.js Single Page Application as a Script Portlet
• Using a ReactJS Single Page Application as a Script Portlet
• Using Command Line Push Script to Deploy Script Portlet Applications
• Using Single Page Applications with Script Portlet

About the Authors

Abhishek Singh (abhisheks@us.ibm.com) is a Senior Digital Experience Architect with IBM Watson Customer Engagement. He has over 17 years of IT experience specializing in delivery of Portal and Mobile Application development with focus on SOA, Analytics, Content Management Systems, Responsive UI design and enterprise Java/ JEE applications. His experience includes designing and developing software products, service- oriented architecture, information systems, telecom applications, and client/server applications.

Nischitha Rai (nyrai@us.ibm.com) is a Managing Consultant working with IBM Watson Customer Engagement. She has over 10 years of experience working on several WebSphere Portal and JAVA/JEE application development engagements. Her expertise is in WebSphere Portal, WebSphere Experience Factory and Content Management Systems.