使用Angular
工具
Angular使用TypeScript而不是JavaScript，因此需要一些特定的工具来有效地使用它。我们针对Angular 2+应用程序的开发工作流程如下所示，如果您愿意，可以使用npm代替yarn。
- 生成应用程序时，将创建新的文件，并在生成结束时触发
npm install任务。 - 一旦
npm install完成，它将在package.json中调用postInstall脚本，此步骤将触发webapp:build任务。 - 现在，基于您选择的生成工具（Maven或Gradle），所有的文件应该被生成并编译到
target或build文件夹内的www文件夹中。 - 现在运行
./mvnw或./gradlew来启动应用程序服务器，它应该在localhost:8080上可用，这也可以提供根据上述步骤编译的前端代码。 - 现在，在新终端中运行
npm start或yarn start，以使用BrowserSync启动Webpack开发服务器。这将负责编译您的TypeScript代码，并自动重新加载浏览器。
如果您在没有运行npm start或yarn start的情况下开始对前端代码进行更改，则不会反映任何内容，因为更改未被编译，因此您需要在更改后手动运行npm run webapp:build或运行npm start或yarn start运行。
您还可以通过开始时传递./mvnw -Pdev，webapp这样的webapp配置文件，强制Maven在运行时运行webapp：dev任务。
注意如果前端发生了变化，Gradle会在dev配置文件中自动运行webpack编译（仅在启动时，对于实时加载，请使用npm start或yarn start）。
其他可用的yarn/npm命令可以在您项目的package.json文件的scripts部分中找到。
- 要在浏览器中处理代码，我们建议使用Angular Augury，以便您可以查看路由并调试代码
项目结构
可以在src/main/webapp下找到JHipster前端代码，该代码与Angular样式指南密切相关。如果您对我们的应用程序结构，文件名，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-routing.module.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类中定义，并且从逻辑上讲，前端和服务器端权限应相同。
在下面的示例中，’sessions’路径设计为仅由具有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_ADMIN或ROLE_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的JhiAlertComponent和JhiAlertErrorComponent组件，这些组件可在整个生成的应用程序中使用。
默认情况下，当HTTP响应捕获到错误时，JHipster将显示错误通知。
要显示自定义通知或警报，请在将AlertService注入控制器，指令或服务后使用以下方法。
简化方法success、info、warning和error的默认超时为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应用程序。 但是，我们添加了一个自定义的webpack配置文件，以通过添加BrowserSync，ESLint（Angular CLI仍在TSLint上），合并JSON转换文件并在构建完成或失败时添加通知来改善开发人员的体验。
总览
Angular CLI是用于开发，构建和维护Angular应用程序的工具。JHipster生成Angular CLI配置文件，因此Angular CLI工作流程可与JHipster一起使用。
通过在应用程序根文件夹中生成angular.json文件，并将其依赖项添加到package.json文件中来完成此集成。
用法
ng help
构建
您可以使用ng build来构建前端，但是我们仍然建议使用提供的NPM脚本，例如npm start，npm run build等。查看我们的开发使用文档和生产使用文档。
生成组件，指令，管道和服务
您可以使用ng generate（或ng g）命令生成Angular组件：
ng generate component my-new-component
ng g component my-new-component # using the alias
# 组件支持相对路径生成
# 转到src/app/feature/并运行
ng g component new-cmp
# 您的组件将在src/app/feature/new-cmp中生成
# 但是如果你运行了
ng g component ../newer-cmp
# 您的组件将在src/app/newer-cmp中生成
您可以在下表中找到所有可能的蓝图：
| 脚手架 | 用法 |
|---|---|
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Guard | ng g guard my-new-guard |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-module |
测试
为了考虑JHipster应用程序上的一致性，可以通过npm命令执行测试：
npm test
i18n
JHipster使用ngx-translate依赖项进行翻译。Angular CLI i18n基于默认的Angular i18n支持，该支持与JHipster不兼容。
运行服务
如果您更喜欢使用Angular CLI开发应用程序，则可以使用其专用命令直接运行服务器。
ng serve
结论
有关Angular CLI的更多信息，请访问官方网站https://cli.angular.io/