# Angular R6 模板


（技术引用链接）

- [Angular官方文档](https://www.angular.cn/)
- [TypeScript官方文档](http://www.typescriptlang.org/docs/home.html)
- [iBizSys模型api文档](https://modelapi.ibizlab.cn/)

## 介绍

Angular R6是iBiz6平台提供的一套PC端解决方案（以下简称前端模板）。该模板主要是为开发人员提供一套模板基础结构，开发人员可以克隆该模板进行扩展使用。

## 文档

可以通过[Angular R6文档](http://172.16.180.231/wx/angular_r6/)来了解Angular R6。

## 搭建Demo

我们将通过搭建一个简单的Demo来描述Angular R6模板的使用。

### 创建模块

创建一个对实体或视图进行功能分类的独立命名单位。

![produce](img/create_module.png)

### 建立实体

建立一个测试数据模型来实现业务交互的逻辑展现。

![produce](img/create_entity.png)

实体建立完成以后可以在此查看实体模型的一些默认属性等信息。

![produce](img/entity_info.png)

### 设置前端应用发布模板

IBizSys 平台提供了多套前端技术模板，在此我们选择 ANGULAR_R6 作为前端技术模板，选择 angular_r6_templ 分支作为前端应用样式。

![produce](img/set_template.png)

### 创建菜单

1. 建立一个应用程序的顶级菜单栏。

![produce](img/create_appmenu.png)

2. 建立以后，打开菜单设计界面。添加菜单项成员。

![produce](img/add_menuitem.png)

3. 为菜单项添加应用功能（选择报销单(BXD)实体的实体表格视图作为打开的应用视图）。

![produce](img/add_func.png)

4. 保存

### 创建首页视图

1. 建立应用默认首页视图（应用默认顶级打开视图）。

![produce](img/create_indexview.png)

2. 打开首页视图设计界面，在“配置”里面设置应用菜单。

![produce](img/set_indexview.png)

3. 保存

### 一键发布

以上就是一个简单的demo应用的配置，然后执行一键发布，将 IBizSys 平台所配置的数据模型按照 Angular R6 模板的结构生成代码文件。

![produce](img/publish.png)

## 预览成果物

iBizSys 提供了即时预览，可以让您在编写模板的同时预览到最终成果物 [查看更多模板编写小技巧](http://bbs.ibizlab.cn/)

![produce](img/preview_result.png)

### 应用顶级路由
 
![produce](img/root_router.png)

### 部件模型

表格部件：

![produce](img/grid_mode.png)

表单部件：

![produce](img/form_mode.png)

### 实体服务类

![produce](img/de_service.png)