Angular也是一个非常流行的前端开发框架,它是使用TypeScript作为开发语言,再通过编译器编译为浏览器可执行的Javascript,所以我们无法在O2平台的门户中直接通过脚本方式使用,必须通过在本地搭建基于Node.js的Angular开发环境和工作空间,然后再编译和部署到服务器的方式。
版本要求
本文适用于如下版本:
- O2OA版本要求:5.1及以上版本;
- Angular版本:本文撰写时,Angular版本是9.1.11。
- Angular CLI版本:本文撰写时,Angular CLI版本是9.1.9。
实现效果
本例中,我们要实现前几章中React和Vue实现的两个效果,实现一个简单门户,显示当前用户的最新待办、通过O2视图展现信息类文档,以及启动指定流程和发布文档功能。效果如下:
环境搭建
我们使用 Angular CLI 工具搭建 Angular 开发环境,首先我们需要安装Node.js和npm包管理器,然后我们通过以下命令安装 Angular CLI :
npm install -g @angular/cli
此方法全局安装了Angular CLI,然后通过以下命令查看相关版本信息:
ng version
可以通过以下命令,查看Angular CLI 的更多命令:
ng help
创建Angular应用
要创建一个新的工作空间和初始入门应用:
运行 CLI 命令 ng new 并提供 my-app 名称作为参数,如下所示:
ng new angular-app
ng new 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。
Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。
此时我峨嵋你创建了一个名为angular-app的应用。
创建完成后生成目录如下:
添加O2脚本引入
在src/index.html的head中添加O2脚本引入:
<script src="../o2_core/bundle.js">script>
为了方便后续引入,我们在src下创建一个o2.js,添加以下代码:
let o2 = window.o2;
let layout = window.layout;
export {o2, layout};
修改src/main.ts文件如下:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
//引入o2的layout对象
import { layout } from './o2';
if (environment.production) {
enableProdMode();
}
//当o2载入完成后启动Angular Module
layout.addReady(() => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
}
);
添加组件(component)
我们要实现展现待办和展现信息两部分内容,所以我们需要添加两个组件。通过以下CLI命令,我们可以让Angular-CLI自动帮我们创建好组件。
ng generate component o2-task
ng generate component o2-info
以上两条命令创建了两个组件:
o2-task:用于展现待办,并通过一个按钮启动指定流程;
o2-info:用于通过O2视图展现信息,并通过一个按钮创建新文档。
创建完组件,我们可以看到在app目录下,新建了两个目录:o2-task和o2-info。每个目录下分别有以下文件:
*.component.css | 组件样式文件 |
---|---|
*.component.html | 组件模板文件 |
*.component.spec.ts | 组件的单元测试文件 |
*.component.ts | 组件脚本文件 |
我们再打开src/app.module.ts文件,发现Angular已经为我们添加了新建组件的引用:
在app.component组件中使用o2-task和o2-info
现在我们需要修改app.component组件来使用我们新创建的组件,修改src/app/app.component.ts为如下内容:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//仅修改了此处的title
title = 'Angular With O2OA';
}
修改src/app/app.component.html为如下内容:
<div class="toolbar">{{title}}div>
<div class="content">
<app-o2-task>app-o2-task>
<app-o2-info>app-o2-info>
div>
此处我们删除了原来的所有内容,并增加了
修改src/app/app.component.css为如下内容:
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
line-height: 60px;
align-items: center;
text-align: center;
background-color: #1976d2;
color: white;
font-weight: 600;
font-size: 32px;
}
.content {
margin: 80px auto 0 auto;
width: 90%;
overflow: hidden;
}
修改o2-task组件
接着我们修改o2-task组件,修改src/app/o2-task/o2-task.component.css文件如下:
.taskContent{
height: 500px;
width: 48%;
float: left;
padding: 10px;
border: 1px solid #eeeeee;
}
.taskItem {
height: 40px;
line-height: 40px;
color: #666666;
cursor: pointer;
border-bottom: 1px solid #eeeeee;
}
.taskTitle {
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 18px;
color: #333333;
padding: 0 10px;
background-color: #eeeeee;
margin-bottom: 5px;
}
button {
padding: 3px 20px;
text-align: center;
background: #0f81cc;
border: 1px solid #ffffff;
margin-top: 8px;
color: #ffffff;
font-size: 18px;
float: right;
cursor: pointer;
}
修改src/app/o2-task/o2-task.component.html文件如下:
<div class="taskContent">
<div class="taskTitle">
<span>{{title}}span>
<button (click)="startProcess()">发起流程button>
div>
<div *ngFor="let task of tasks">
<div class="taskItem" (click)="openTask(task.work)">
<a [title]="task.title">
{{ task.title || "无标题" }}
a>
div>
div>
div>
修改src/app/o2-task/o2-task.component.ts文件如下:
import { Component, OnInit } from '@angular/core';
//引入o2对象
import {o2} from "../../o2";
@Component({
//组件的选择器,对应我们在app.component.html模板中的
selector: 'app-o2-task',
templateUrl: './o2-task.component.html',
styleUrls: ['./o2-task.component.css']
})
export class O2TaskComponent implements OnInit {
tasks = [];
title = "我的待办";
constructor() {}
ngOnInit(): void {
//通过调用O2平台的服务,获取当前用户的前20条待办
o2.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1,20, {}, (json)=>{
this.tasks = json.data;
});
}
startProcess() {
//通过o2.env对象启动流程
//o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
//请将“application-name”和“process-name”修改为您的流程应用名称和流程名
o2.env.page.startProcess("application-name", "process-name");
}
openTask(id) {
//通过o2.env对象打开待办
o2.env.page.openWork(id);
}
}
以上代码中,有关Angular的内容,请参考Angular的官方文档。
修改o2-info组件
接着我们修改o2-task组件,修改src/app/o2-task/o2-info.component.css文件如下:
.viewContent{
height: 500px;
width: 48%;
float: right;
padding: 10px;
border: 1px solid #eeeeee;
}
.view {
height: 460px;
}
.viewTitle {
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 18px;
color: #333333;
padding: 0 10px;
background-color: #eeeeee;
margin-bottom: 5px;
}
button {
padding: 3px 20px;
text-align: center;
background: #0f81cc;
border: 1px solid #ffffff;
margin-top: 8px;
color: #ffffff;
font-size: 18px;
float: right;
cursor: pointer;
}
修改src/app/o2-task/o2-task.component.html文件如下:
<div class="viewContent">
<div class="viewTitle">
<span>{{title}}span>
<button (click)="createDocument()">新建信息button>
div>
<div #viewContent class="view">div>
div>
修改src/app/o2-task/o2-task.component.ts文件如下:
import {Component, ElementRef, OnInit,ViewChild} from '@angular/core';
//引入o2对象
import {o2} from "../../o2";
@Component({
//组件的选择器,对应我们在app.component.html模板中的
selector: 'app-o2-info',
templateUrl: './o2-info.component.html',
styleUrls: ['./o2-info.component.css']
})
export class O2InfoComponent implements OnInit {
//要展现的视图信息,我们必须在O2平台创建好名为“内容管理数据”的数据应用和“所有信息”视图
//修改此值,可显示不同的视图
viewApp="内容管理数据";
viewName="所有信息";
//获取展现视图的原生Dom对象
@ViewChild("viewContent") content: ElementRef;
title = "最新信息";
constructor() {
//新建一个Viewer对象,用于展现指定的视图
//将Viewer展现挂载到viewContentst的原生DOM对象上,就是模板中的
o2.xDesktop.requireApp("query.Query", "Viewer", function(){
new o2.xApplication.query.Query.Viewer(this.content.nativeElement, {
"application": this.viewApp,
"viewName": this.viewName,
});
}.bind(this));
}
ngOnInit(): void {
}
createDocument(){
//通过o2.env对象新建内容管理文档
//o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
//createDocument方法创建内容管理文档,可传入栏目和分类参数,请参考API文档
o2.env.page.createDocument();
}
}
以上代码中,有关Angular的内容,请参考Angular的官方文档。
编译并运行
我们完成了上述开发工作,就可以编译并运行我们的应用了。
由于我们要将Angular应用放到O2的web服务器的目录下,而非根路径下,我们还需要删除src/index.html中的:
在当前项目路径下,使用以下任意一条命令编译项目:
ng build
# OR
npm run build
编译完成后,Angular将在路径下,生成编译后的文件。接着将dist目录部署到O2服务器的webServer下,并重命名为“angular-app”。然后通过浏览器访问:http://your-server/angular-app。
如果您未登录到服务器,会出现登录页面,登录后就可以看到实现的效果了。
登陆后:
开发模式优化
可参照React和Vue相同的方式。