使用Angular
来源: |
时间:2018-11-09
|
|

使用Angular

工装

Angular使用的是TypeScript而不是JavaScript,因此需要一些特定的工具才能有效地使用它。我们的Angular 2+应用程序的开发工作流程如下所示,如果您愿意,请使用npm而不是yarn

  1. 生成应用程序时,将创建文件,并在生成结束时npm install触发任务。

  2. 一旦npm install完成它调用postInstall脚本package.json,此步骤将触发webpack:build任务。

  3. 现在你应该有生成和编译到所有文件www夹内targetbuild文件夹根据选定的构建工具(Maven的或摇篮)。

  4. 现在运行./mvnw./gradlew启动应用程序服务器,它应该在localhost:8080上可用,这也提供从上述步骤编译的客户端代码。

  5. 现在运行npm startyarn start在新终端中使用BrowserSync启动Webpack dev-server。这将负责编译您的TypeScript代码,并自动重新加载您的浏览器。

如果您在没有npm startyarn start没有运行的情况下开始更改客户端代码,则不会反映任何内容,因为更改未编译,因此您需要npm run webpack:build在更改后运行npm startyarn start运行运行。

您也可以强制maven / gradle webpack:dev在开始时通过传递webpack配置文件来运行任务,./mvnw -Pdev,webpack./gradlew -Pdev -Pwebpack这在运行clean任务后特别有用

其他可用的yarn / npm命令可以在scripts项目package.json文件部分找到

  • 要在浏览器中处理代码,我们建议您使用Angular Augury,以便可以直观地显示路由并调试代码

项目结构

JHipster客户端代码可以src/main/webappJohn Papa Angular 2风格指南下找到并密切关注 如果您对我们的应用程序结构,文件名,TypeScript约定有任何疑问,请先阅读本指南。

此样式指南得到Angular团队的认可,并提供每个Angular项目应遵循的最佳实践。

对于Angular路由,我们遵循破折号命名约定,以便URL清晰且一致。生成实体时,将根据此约定生成路由名称,路由URL和REST API端点URL,实体名称也会根据需要自动复数。

这是主要的项目结构:

webapp├── app                               - Your application│   ├── account                       - User account management UI│   ├── admin                         - Administration UI│   ├── blocks                        - Common building blocks like configuration and interceptors│   ├── entities                      - Generated entities (more information below)│   ├── home                          - Home page│   ├── layouts                       - Common page layouts like navigation bar and error pages│   ├── shared                        - Common services like authentication and internationalization│   ├── app.main.ts                   - Main application class│   ├── app.module.ts                 - Application modules configuration│   ├── app.route.ts                  - Main application router├── content                           - Static content│   ├── css                           - CSS stylesheets│   ├── images                        - Images├── i18n                              - Translation files├── scss                              - Sass style sheet files will be here if you choose the option├── swagger-ui                        - Swagger UI front-end├── 404.html                          - 404 page├── favicon.ico                       - Fav icon├── index.html                        - Index page├── robots.txt                        - Configuration for bots and Web crawlers

使用实体子生成器创建一个名为的新实体,Foo生成以下前端文件src/main/webapp

webapp├── app│   ├── entities│       ├── foo                                    - CRUD front-end for the Foo entity│           ├── foo.component.html                 - HTML view for the list page│           ├── foo.component.ts                   - Controller for the list page│           ├── foo.model.ts                       - Model representing the Foo entity│           ├── foo.module.ts                      - Angular module for the Foo entity│           ├── foo.route.ts                       - Angular Router configuration│           ├── foo.service.ts                     - Service which access the Foo REST resource│           ├── foo-delete-dialog.component.html   - HTML view for deleting a Foo│           ├── foo-delete-dialog.component.ts     - Controller for deleting a Foo│           ├── foo-detail.component.html          - HTML view for displaying a Foo│           ├── foo-detail.component.ts            - Controller or displaying a Foo│           ├── foo-dialog.component.html          - HTML view for editing a Foo│           ├── foo-dialog.component.ts            - Controller for editing a Foo│           ├── foo-popup.service.ts               - Service for handling the create/update dialog pop-up│           ├── index.ts                           - Barrel for exporting everything├── i18n                                           - Translation files│   ├── en                                         - English translations│   │   ├── foo.json                               - English translation of Foo name, fields, ...│   ├── fr                                         - French translations│   │   ├── foo.json                               - French translation of Foo name, fields, ...

请注意,默认语言翻译将基于您在应用生成期间选择的内容。此处显示'en'和'fr'仅用于演示。

授权

JHipster使用Angular路由器来组织客户端应用程序的不同部分。

对于每个状态,所需权限列在状态数据中,当权限列表为空时,表示可以匿名访问状态。

权限也在类的服务器端定义AuthoritiesConstants.java,逻辑上客户端和服务器端权限应该相同。

在下面的示例中,“会话”状态仅供具有ROLE_USER权限的经过身份验证的用户访问

export const sessionsRoute: Route = {
    path: 'sessions',
    component: SessionsComponent,
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: 'global.menu.account.sessions'
    },
    canActivate: [UserRouteAccessService]};

一旦在路由器中定义了这些权限,就可以jhiHasAnyAuthority根据参数类型通过其2个变体中的指令使用它们

  • 对于单个字符串,如果用户具有所需的权限,则该指令仅显示HTML组件

  • 对于字符串数组,如果用户具有列出的权限之一,则该指令显示HTML组件

例如,以下文本仅显示给具有ROLE_ADMIN权限的用户

<h1 *jhiHasAnyAuthority="'ROLE_ADMIN'">Hello, admin user</h1>

例如,下面的文本将只显示具有一个用户ROLE_ADMINROLE_USER部门:

<h1 *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_USER']">Hello, dear user</h1>

请注意,这些指令仅在客户端显示或隐藏HTML组件,并且还需要在服务器端保护代码!

ng-jhipster库

ng-jhipster库是免费的OSS,可在https://github.com/jhipster/ng-jhipster上找到

ng-jhipster库包含Angular 2+应用程序使用的实用程序功能和常用组件。他们包括:

  • 验证指令

  • 国际化组件

  • 常用的管道,如大写,排序和截断

  • Base64,日期和分页处理服务

  • 通知系统(见下文)

通知系统

JHipster使用自定义通知系统将事件从服务器端发送到客户端,并具有i18n功能JhiAlertComponentJhiAlertErrorComponent可在整个生成的应用程序中使用的组件。

默认情况下,当HTTP响应中发生错误时,JHipster将显示错误通知。

要显示自定义通知或警报,请在注入AlertService控制器,指令或服务后使用以下方法

速记方法successinfowarningerror将具有5秒,它可以被配置为在默认超时:

this.alerts.push(
    this.alertService.addAlert(
        {
            type: 'danger',
            msg: 'you should not have pressed this button!',
            timeout: 5000,
            toast: false,
            scoped: true
        },
        this.alerts
    ));

使用Angular CLI

信息: Angular CLI和JHipster可以并行用于开发,并且都有自己的配置文件。默认情况下,JHipster在部署应用程序或使用CI-CD子生成器时使用自己的配置。

概观

Angular CLI是一个开发,支架和维护Angular应用程序的工具。JHipster生成Angular CLI配置文件,因此Angular CLI工作流程与JHipster一起使用。

通过.angular-cli.json在应用程序根文件夹中生成文件并在文件中添加其依赖项来完成此集成package.json

用法

ng help

建造

您不应该使用ng build构建前端,因为JHipster有自己的脚本。查看我们的“使用开发”文档“使用生产”文档

生成组件,指令,管道和服务

您可以使用ng generate(或只是ng g)命令生成Angular组件:

ng generate component my-new-componentng g component my-new-component # using the alias# Components support relative path generation# Go to src/app/feature/ and runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmp

您可以在下表中找到所有可能的蓝图:

脚手架用法
零件ng g component my-new-component
指示ng g directive my-new-directive
ng g pipe my-new-pipe
服务ng g service my-new-service
ng g class my-new-class
守护ng g guard my-new-guard
接口ng g interface my-new-interface
枚举ng g enum my-new-enum
ng g module my-module

测试

为了JHipster应用程序的一致性,只能通过以下npm命令执行测试执行

npm test

国际化

JHipster正在使用ng2-translate依赖项进行翻译。Angular CLI i18n基于默认的Angular i18n支持,与JHipster不兼容。

运行服务器

如果您更喜欢使用Angular CLI开发应用程序,则可以使用其专用命令直接运行服务器。

ng serve

通过使用它,它将编译您的Angular应用程序并允许您访问它http://localhost:4200但是,默认情况下,您的后端将无法使用。

要使用本地后端服务器,请使用:

ng serve --proxy-conf proxy.conf.json

然后,您就可以访问您的API。

结论

有关Angular CLI的更多信息,请访问官方网站https://cli.angular.io/


J


提交
查看更多评论
没有更多评论