This part lays the foundation for the tutorial. Each subsequent part builds upon this, adding features to create a custom inbox interface powered by ProcessMaker.
After completing this part, the updated app confirms that you and your IDE are ready to begin creating an Angular inbox, powered via the ProcessMaker REST API.
Step 1: Setting Up
In this step, you'll set up a basic hello world Angular app, ensuring your development environment is ready for the upcoming sections.
Application Structure
We are going to build out a very simple app structure, bare bones, and then add to it. This is what the project should look like for this part:
NPM
Let's get started by creating the folder that will house the app we are going to build. You can name it angular4pm which is what we will be using as the default name as we go through the tutorial.
Inside your root directory of your project, create your package.json as seen in the screenshot above and add the following, making sure to fill in the blank fields as you desire:
If you plan to use version control, you will want to add a gitignore file for your environment.ts file since it will contain sensitive information like oauth secrets and such. Here is one you can start with and tweak as you like.
.gitignore
.DS_STORE
.vscode
/dist/
*.log
node_modules
# Include when developing application packages.
pubspec.lock
.c9
.idea/
.devcontainer/*
!.devcontainer/README.md
!.devcontainer/recommended-devcontainer.json
!.devcontainer/recommended-Dockerfile
.settings/
.vscode/launch.json
.vscode/settings.json
.vscode/tasks.json
.angular
*.swo
*.swp
modules/.settings
modules/.vscode
.vimrc
.nvimrc
# Don't check in secret files
*secret.js
# Ignore npm/yarn debug log
npm-debug.log
yarn-error.log
# build-analytics
.build-analytics
# rollup-test output
/modules/rollup-test/dist/
# User specific bazel settings
.bazelrc.user
# User specific ng-dev settings
.ng-dev.user*
.notes.md
baseline.json
# Ignore .history for the xyz.local-history VSCode extension
.history
# Husky
.husky/
environments/environment.ts
These are the main configuration files that are needed for the app to run properly. Feel free to modify as needed if you are comfortable with Angular and Typescript.
Now that you have setup the basic configuration files, you can begin executing some commands in the terminal.
npm install
In order to run the application, you can use this command which is an Angular command and includes hot reloads for ease of development.
ng serve
Step 2: The src Directory
Custom CSS
The application comes with some optional CSS that you may include if you want the look and feel of the app as we have made it.
Depending on where and how you deploy your application, you will probably want to be able to have different settings or configurations for dev vs prod, such as more verbose logging, extra dependencies in your package.json for better debugging, unit testing, etc.
The default environment file is located within the src directory, at src/environments/environment.example.ts
Here is the contents:
environment.example.ts
// This file can be replaced during build by using the `fileReplacements` array.// `ng build` replaces `environment.ts` with `environment.prod.ts`.// The list of file replacements can be found in `angular.json`.//Below is the hard coded Endpoint URL for the PM4 instance we are wanting to connect to.//Eventually we will create a text box to enter this on the login form//This is then used in the auth.service.ts - this.httpClient.post(environment.apiUrlexportconstenvironment= { production:false, apiDomain:'', apiPath:'/api/1.0', apiProtocol:'https://', clientId:'', clientSecret:'', oauthUrl:'', redirectUri:'', oauthAuthorizeUrl:'', customCss:false, calcProps:true,};/* * For easier debugging in development mode, you can import the following file * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. * * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
Assets Directory
This contains things like images, logos, apache .htaccess files, etc.
App Directory
This contains the majority of the code. At this stage of the application, it is very bare bones. But, as we continue to add new features and functionality to the application, it will grow.
AppModule
app.component.ts is the source file that describes the app-root component. This is the top-level Angular component in the app. A component is the basic building block of an Angular application. The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
This is the current contents of the app.module.ts. However, as we continue, we will add more to this file.
As this is the hello world first part, we only have 1 component that is very simple. All it does is print out a greeting. You can see below how we are using interpolation to dynamically insert the name, in this case, John.
app.component.ts
import { Component } from'@angular/core';@Component({ selector:'app-root', template:`<h1>Hello, {{ name }}</h1>`,})exportclassAppComponent { name ='John';}
Step 3: Test your hello world app
In a Web browser, open http://localhost:4200. Confirm that the default Web site appears in the browser. You should see a page just like below.
You can leave ng serve running as you complete the next steps, since it is configured with live/hot reload.
If the page in your browser stops working, make sure to check that you still have your terminal open with the ng serve command running and not displaying any errors.
If ng serve is working and there are no errors at compilation time, you should see something like this in your terminal.
However, if you made a typo or something and your app broke, it would look something like this. I deleted the line where we set the property name just to show what it would look like in your terminal.
And on your Web page you would see something like this.
Review
In this section, you set up a basic Angular app displaying Hello John. You also became familiar with the ng serve command, allowing local testing with ease.
