The SAS platform is unparalleled in its capability to deliver analytics across the world's largest enterprises. The official out-of-the-box interfaces provide a drag and drop capability to build advanced reports on a wide variety of data sources, with access engines that ensure filtering and aggregation are done as close to the source as possible. But what if you have a particular need, or use case, that necessitates a completely bespoke user interface?

SAS平台在为全球最大的企业提供分析功能方面无与伦比。 官方的即用型界面提供了拖放功能，可在各种数据源上构建高级报告，并具有访问引擎，可确保尽可能在源附近进行过滤和聚合。 但是，如果您有特定的需求或用例，需要完全定制的用户界面，该怎么办？

That’s where SASjs comes in, an open-source framework with a range of seed apps to accelerate the development and deployment of SAS Powered apps on both SAS 9 and Viya. This article will break down the steps involved in building and deploying an Angular web application onto SAS Viya.

这就是SASjs的用意，它是一个开放源代码框架，带有一系列种子应用程序，可加快SAS 9和Viya上SAS Powered应用程序的开发和部署。 本文将分解在Angular Web应用程序上构建和部署Angular Web应用程序所涉及的步骤。

Prerequisites:

先决条件：

• Npm

  Npm

• Git

  吉特

• @angular/cli — requires a new terminal session after installing

  @ angular / cli-安装后需要新的终端会话

• FileZilla if you are using Windows

  如果使用Windows，则为FileZilla

让我们开始吧。 (Let’s get started.)

The first thing we’ll do is clone the Angular seed app repo.

我们要做的第一件事是克隆Angular种子应用程序仓库。

Open Terminal, or Command prompt (CMD) if you are on the Windows, and run:

如果您使用的是Windows，请打开终端或命令提示符(CMD)，然后运行：

git clone https://github.com/sasjs/angular-seed-app.git

and then

然后

cd angular-seed-appnpm install

Don’t close this instance of Terminal/CMD.

不要关闭此终端/ CMD实例。

Now open up in any file editor angular-seed-app/src/app/sas.service.ts .

现在，在任何文件编辑器angular-seed-app/src/app/sas.service.ts 。

Here you will find the config object being passed to the @sasjs/adapter instantiation, inside of a constructor. (Lines 14–17)

在这里，您将找到构造函数内部传递给@ sasjs / adapter实例化的配置对象。 (第14-17行)

Let’s go through the config:

让我们来看一下配置：

• serverUrl —This is the domain of your SAS server. eg: https://yoursasserver.com

  serverUrl这是SAS服务器的域。 例如： https ： //yoursasserver.com

  You can leave this blank if you will deploy the app on the same domain as your SAS services.

  如果将应用程序部署在与SAS服务相同的域上，则可以保留此空白。

• appLoc — This is the location where SAS services will live inside of SAS Viya folder tree. For this example, we will use/Public/app/angular .

  appLoc —这是SAS服务将驻留在SAS Viya文件夹树中的位置。 对于此示例，我们将使用/Public/app/angular 。

• serverType — This can be either SAS9 or SASVIYA . We will use SASVIYA .

  serverType -这可以是SAS9或SASVIYA 。 我们将使用SASVIYA 。

• debug — When it’s on, responses from SAS will include logs. As the name itself is telling, it is used for debugging SAS execution.

  debug — debug -来自SAS的响应将包括日志。 顾名思义，它用于调试SAS执行。

We are now going to extend the default seed app with a new Angular component/page. We’ll create the backend SAS service for this later.

现在，我们将使用新的Angular组件/页面扩展默认的种子应用程序。 稍后我们将为此创建后端SAS服务。

cd src/appng g c demo-service

We successfully created the page. Now we will add it to the router so we can display it.

我们成功创建了页面。 现在，我们将其添加到路由器，以便我们可以显示它。

Open file: angular-seed-app/src/app/app-routing.module.ts and add the following lines:

打开文件： angular-seed-app/src/app/app-routing.module.ts并添加以下行：

import { DemoServiceComponent } from './demo-service/demo-service.component';...{path: 'demo-service', component: DemoServiceComponent}

The next step is to add a button for navigating our freshly created page.Open this file: angular-seed-app/src/app/app.components.html and add this line:

下一步是添加一个用于导航我们新创建的页面的按钮。打开此文件： angular-seed-app/src/app/app.components.html并添加以下行：

<a routerLinkActive="active" routerLink="/demo-service" class="nav-link nav-text">Demo service</a>

We successfully created a new Angular page.

我们成功创建了一个新的Angular页面。

Now we need to add some functionality to it. Remove everything from the following file:angular-seed-app/src/app/demo-service/demo-service.component.html

现在，我们需要为其添加一些功能。 从以下文件中删除所有内容： angular-seed-app/src/app/demo-service/demo-service.component.html

Then paste this code:

然后粘贴以下代码：

<div class="data-page"><div class="classes-select-wrapper"><button (click)="runDemoService()" class="btn btn-primary">Get data</button></div><span *ngIf="classesLoading" class="spinner spinner-md">Loading...</span><table *ngIf="classes.length > 0 && !classesLoading" class="table"><thead><tr><th>AGE</th><th>HEIGHT</th><th>NAME</th><th>SEX</th><th>WEIGHT</th></tr></thead><tbody><tr *ngFor="let class of classes"><td>{{class.AGE}}</td><td>{{class.HEIGHT}}</td><td>{{class.NAME}}</td><td>{{class.SEX}}</td><td>{{class.WEIGHT}}</td></tr></tbody></table>
</div>

Do the same for this file: angular-seed-app/src/app/demo-service/demo-service.component.ts and paste this code:

为此文件执行相同操作： angular-seed-app/src/app/demo-service/demo-service.component.ts并粘贴以下代码：

import { Component, OnInit } from '@angular/core';
import { SasService } from '../sas.service';@Component({selector: 'app-demo-service',templateUrl: './demo-service.component.html',styleUrls: ['./demo-service.component.scss']
})
export class DemoServiceComponent implements OnInit {public classes: any = [];public classesLoading: boolean = false;constructor(private sasService: SasService) { }ngOnInit(): void {}runDemoService() {this.classesLoading = true;this.sasService.request('/common/demoservice', null).then((res: any) => {this.classes = res.class;this.classesLoading = false;})}
}

We are ready to build an app:

我们准备构建一个应用程序：

ng build

Inside of the dist folder you will find a built app that is ready to be transferred to your web server.

在dist文件夹中，您会找到一个已构建的应用程序，可以将其转移到Web服务器。

If you are using Linux or Mac:

如果您使用的是Linux或Mac：

rsync -avhe ssh ./dist/* --delete {username}@yoursasserver.com:/var/www/html/yourAppName

Notice: you will need permission to write to the webserver.

注意：您将需要权限才能写入Web服务器。

If you are using Windows, you can use FileZilla to copy files to the webserver.

如果使用Windows，则可以使用FileZilla将文件复制到Web服务器。

SAS服务 (SAS services)

Now we will build the SAS services that will be used by our app.

现在，我们将构建将由我们的应用程序使用的SAS服务。

Copy and paste the below code into SAS Studio (https://YOURSASSERVER.com/SASStudioV) and modify the first line to point to your preferred app location (appLoc) — this is where the backend Job Execution services will be created.

将以下代码复制并粘贴到SAS Studio( https://YOURSASSERVER.com/SASStudioV )中，并修改第一行以指向您首选的应用程序位置(appLoc)-这将在其中创建后端Job Execution服务。

%let appLoc=/Public/app/angular;  /* Metadata or Viya root folder */
filename mc url "https://raw.githubusercontent.com/sasjs/core/main/all.sas";
%inc mc;  /* download and compile macro core library */
filename ft15f001 temp;
parmcards4;proc sql;create table areas as select distinct area from sashelp.springs;%webout(OPEN)%webout(OBJ,areas)%webout(CLOSE)
;;;;
%mp_createwebservice(path=&appLoc/common, name=appinit)
parmcards4;%webout(FETCH)proc sql;create table springs as select * from sashelp.springswhere area in (select area from areas);%webout(OPEN)%webout(OBJ,springs)%webout(CLOSE)
;;;;
%mp_createwebservice(path=&appLoc/common, name=getdata)

And then hit run .

然后点击run 。

We are ready to test our progress so far.

我们准备测试到目前为止的进展。

Open up the Angular app you previously deployed, and go to data page.In there you will see a dropdown with areas.Select area, and click submit.

打开之前部署的Angular应用程序，然后转到data页面，在其中将看到一个包含区域的下拉列表。选择区域，然后单击提交。

You should see a table appearing.

您应该看到一个表格出现。

We made the page in the app for our new demo-service, but we don’t yet have that service added to SAS. So, let’s do that.

我们在应用程序中为新的演示服务创建了页面，但尚未将该服务添加到SAS。 所以，让我们这样做。

Let’s open the SAS Studio again https://your_sas_server.com/SASStudioV Create a new program, paste the code from below and hit run:

让我们再次打开SAS Studio https://your_sas_server.com/SASStudioV创建一个新程序，从下面粘贴代码并运行：

%let appLoc=/Public/app/angular;  /* Metadata or Viya root folder */
filename mc url "https://raw.githubusercontent.com/sasjs/core/main/all.sas";
%inc mc;  /* download and compile macro core library */
filename ft15f001 temp;
parmcards4;data class;set sashelp.class;run;%webout(OPEN)%webout(OBJ,class)%webout(CLOSE)
;;;;
%mp_createwebservice(path=&appLoc/common, name=demoservice)

Now we are ready to test our new demoservice.Go to the app, and click in the navigation bar Demo service menu link.Then click the Get data button. The table should appear like on the image below.

现在我们可以测试新的demoservice了，转到应用程序，然后单击导航栏中的Demo service菜单链接，然后单击Get data按钮。 该表应如下图所示。

Nice isn’t it?

很好，不是吗？

While we are here, there is another cool feature that this Angular app has.

当我们在这里时，此Angular应用程序还有另一个很酷的功能。

Click on username icon and then Requests .

点击用户名图标，然后点击Requests 。

Modal with pop up, here you can see all of the requests that were sent to the SAS. If you expand one of them, you will see multiple tabs.

弹出式模态，在这里您可以看到所有发送到SAS的请求。 如果您展开其中一个，则将看到多个选项卡。

This feature allows us to debug requests sent to SAS. We can see the following:

此功能使我们可以调试发送到SAS的请求。 我们可以看到以下内容：

• Log记录
• Source code源代码
• Generated code生成的代码
• Temporary Work tables临时工作台

The cool thing about this feature is that it will detect errors and warnings in the SAS Log and make links to them, so you can easily click and jump to the desired one.

此功能的妙处在于，它将检测SAS Log中的错误和警告并建立链接，因此您可以轻松地单击并跳转到所需的错误和警告。

摘要 (Summary)

In this article, we covered basic steps of building an Angular app on SAS, and those are:

在本文中，我们介绍了在SAS上构建Angular应用程序的基本步骤，这些步骤是：

• Setup the Angular seed app for your environment.为您的环境设置Angular种子应用程序。
• Create a new Angular component/page that is used for the new service we added. (That included configuring the router module and adding the link in the navigation to access it).创建一个新的Angular组件/页面，用于我们添加的新服务。 (这包括配置路由器模块并在导航中添加链接以访问它)。
• Creating SAS services using SAS code, running it in SAS Studio.使用SAS代码创建SAS服务，然后在SAS Studio中运行它。
• Creating a new SAS service on top of the already existing services.在现有服务之上创建新的SAS服务。

• Using the @sasjs/adapter to connect and communicate with SAS services.

  使用@ sasjs / adapter连接SAS服务并与之通信。

To learn more you can go to https://sasjs.io.

要了解更多信息，请访问https://sasjs.io 。

Feel free to raise a GitHub issue if you encounter any problems.

如果遇到任何问题，请随时提出GitHub问题。

Would be awesome if you could slap one small star on the adapter GitHub repo.

如果您可以在适配器GitHub存储库上拍一颗小星星，那就太棒了。

Happy coding! :)

编码愉快！ :)