当前位置: 首页 > 软件库 > Web应用开发 > >

celerio-angular-quickstart

授权协议 Apache-2.0 License
开发语言 Java
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 饶明亮
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Celerio Angular Quickstart

This Angular quickstart uses Angular Cli to create an application skeleton and Celerioto reverse your relational database schema and generate the Angular + Spring Boot codeto access your database content. The generated code covers much more areas than a simple Hello World app (search,pagination, validation, auto-complete, etc.)

To generate an application from our sample database, follow the instructions from the quickstart folder.

Take a look at the generated code for yourself. Out of thissample SQL schemaand thisCelerio configuration,we generate this code,thanks to these templates.

By default we use a sample H2 database schema. Using your own database schema and database engineis just a matter of configuration. Check as an example our instructions to use MySQL instead of H2.

What to expect?

To see it in action with no effort you may run our sample docker image or watch a screencast.Remember, this is just a generated sample, the idea is to generate your own application using a more realistic database schema.

Sample Docker image

To run the docker image of the sample generated webapp:

docker run -p 8080:8080 nromanetti/celerio-angular-quickstart

Then access it at localhost:8080

Screencast

The following screencast shows you what to expect.

About the project

Our goal is to provide solid code generation templates for advanced Angular CRUD web applications.

Code generation templates are written in Velocity and interpreted by Celerio, an Open Source code generatortool for data-oriented applications.

Here is the folder organization:

  • pack-angular folder contains the Celerio code generation templates that are interpreted/copied by Celerio.
  • quickstart-conf folder contains the minimal configuration that Celerio needs to generate this quickstart.
  • quickstart folder is where you can generate the quickstart.
  • quickstart-generated: folder is an already generated quickstart provided here so you can browse the source code even from your phone :)

About the generated code

The generated Angular CRUD web app uses the following technologies/frameworks:

  • Angular Cli a command line interface for Angular
  • Angular 5 web framework: we try to always use the most recent version
  • TypeScript: much easier than JavaScript...
  • PrimeNG: Angular components library, we leverage file upload, auto-complete, calendar, tri-state checkbox, server-side pagination, etc.
  • Angular Material: Material Design components for Angular apps
  • Spring Boot: Java app backend, made easy, we generate REST endpoints, etc.
  • Spring Security: basic security by default
  • Spring Data JPA: leverage query by example, etc.

Contribute

You may contribute in several ways:

  • By reviewing the generated code, are PrimeNG, Angular, Spring Data, Spring Boot, etc. properly used ?
  • By trying to generate a project using your own database schema
  • By using the generated app and trying to find its limits

You may of course report issues and/or submit pull requests.

 相关资料
  • Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护(两者的 GitHub 地址和项目主页皆不相同),所以就有了这个页面。传送门:Angular.js 特性 跨平台 渐进式 Web 应用 借助现代化 Web 平台的力量,交付 app

  • Cognito Quickstart Creator: Vladimir Budilov YouTube LinkedIn Medium Note: This repo is deprecated. It was created before the Amplify SDK was available which performs a lot of the plumbing for you. Pl

  • 即将到来的Angular 2框架是使用TypeScript开发的。 因此Angular和TypeScript一起使用非常简单方便。 Angular团队也在其文档里把TypeScript视为一等公民。 正因为这样,你总是可以在Angular 2官网(或Angular 2官网中文版)里查看到最新的结合使用Angular和TypeScript的参考文档。 在这里查看快速上手指南,现在就开始学习吧!

  • 从头开始创建项目 lint你的代码 运行您的单元测试和端到端测试。 Angular 2 CLI目前只在TypeScript中生成框架,稍后还会有其他版本。

  • 这小节内容是译者加的,因为我认为对于新手而言,学习一个框架是有成本的,特别是对于一个不算简单的技术来说,我希望这篇教程是对新手友好的,所以我首先要让你放心的将时间和精力投入到Angular2 中。那我们先不谈技术细节,先用数据说话。 这里我多说一句,最近看一些文章中谷歌趋势截图,大都没有把范围限定在“编程”上。图中可以看出Vue2非常少,所以在下面比较中不再单独统计。 教程数量 这里我选取的主要是

  • 我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 下面给出角度计图表的示例。 配置 (Configurations) 现在让我们看一下所采取的其他配置/步骤。 chart.type 将图表类型配置为基于计量。 将类型设置为“规格”。 var chart = { type: 'guage' }; pane 此类型仅适用于极坐标图和角度