(3)FPQuant JHipster_使用AngularJS1

最新推荐文章于 2020-07-04 16:47:31 发布

yfraquelle

最新推荐文章于 2020-07-04 16:47:31 发布

阅读量553

点赞数

分类专栏： FPQuant 文章标签： jhipster

FPQuant 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文是对JHipster开发文档的部分翻译，供个人学习之用。

原文链接：

https://jhipster.github.io/development/

https://jhipster.github.io/using-angularjs/

1.一起使用Java服务器和Gulp

推荐使用这一特性，可以实时重新加载客户端的代码。

你可以使用Gulp来启动客户端的JavaScript应用：gulp，这将会运行默认的Gulp任务：server。

这一操作会打开浏览器，并开启当场重载，通过http://localhost:9000来访问。

这种功能是因为BrowserSync，你可以在http://localhost:3001来访问管理页面。

它的特性有：

修改HTML/CSS/JavaScript文件实时自动刷新。
添加或移除一个javascript文件，它将会被加入到index.html中，你的浏览器会自动刷新。
当在不同的浏览器或设备上测试应用时，所有的点击/滚动都会自动在所有屏幕上同步执行。

Gulp任务有一个代理连接到刚刚运行的Java服务器上的REST终端（http://localhost:8080/api），所以能够对Java后台进行实时的REST请求。

如果你选择Sass来生成应用，你的模板也会被自动编译进CSS。

技巧：

有些浏览器（如Chrome），你的HTML/CSS/JS资源可以缓存，因此可能在实时重载上有些问题，为了强制重载，打开“developer console”选择"Disable cache(while DevTools is open)"

当Gulp服务器代理请求Java服务器时，如果Java服务器下线，所有的REST请求都会失败。所以如果你的Gulp服务器显示空白的页面，首先应该检查Java服务器在http://127.0.0.1:8080上运行。

2.其他的Gulp任务

我们使用eslint进行AngularJS javascript检查，你可以运行gulp eslint来检查你的AngularJS文件，也可以运行gulp eslint:fix使用eslint来检查一些小问题，例如格式等。

使用gulp install一次运行所有的bootstrap任务。

使用gulp build来为你的客户端文件build/www在目标文件夹下构建一个优化版本。

默认情况下，你可以获得gulp任务期间错误或失败的屏显注解，使用--no-notification来关闭注解。

3.使用Bower来安装和更新JavaScript、CSS和Sass依赖

使用bower更新JS、CSS、Sass依赖：bower update

安装新的JS、CSS、Sass依赖：bower install <package> --save

你的JS、CSS或Sass依赖会存储在src/main/webapp/bower_components文件夹下，我们推荐将其保存到你的Git仓库中，但并不强制。

如果已安装的依赖包含了JS文件，他们将会自动注入到你的index.html和karma.conf.js文件中。类似地，CSS文件也会注入到index.html文件中，SCSS文件注入到main.css中。

然而，这只在Gulp服务器运行时有效，如果不在运行，他们将会在下次运行gulp时注入。

或者，当你想要手动触发注入时，直接运行：gulp inject:dep。

4.运行Webpack

这一步骤对于看到你的TypeScript代码并实时重载客户端代码是必须的。

运行Webpack是package.json文件中的默认任务，你只需要执行：yarn start（对于NPM：npm start）

这有很有用的特性：

当修改了你的HTML/CSS/TypeScript文件时，你的浏览器将会自动刷新。
当你在几个不同的浏览器或设备上测试应用时，你所有的点击、滚动、输入都会在所有屏幕上自动同步。

启动：

一个Webpack任务会将TypeScript代码自动编译为JavaScript。
一个Webpack“热模块重载”服务器将会运行在http://localhost:9060，连接到http://127.0.0.1:8080/api的代理将访问Java后台。
一个BrowserSync任务将运行在http://localhost:9000/，连接到http://localhost:9060/（“热模块部署”）的代理会将用户的点击、滚动、输入同步
BrowserSync UI，可以在http://localhost:3001/上看到

5.其他的Yarn/NPM任务

这些任务无论是在使用Yarn或NPM时是相同的，我们使用“npm”命令作为例子，但完全可以用“yarn”来代替：

npm lint：检查TypeScript代码风格问题

npm lint:fix：尝试自动纠正TypeScript的检测问题

npm tsc：编译TypeScript代码

npm test：用Karma运行单元测试

npm test:watch：保持Karma单元测试在代码改变时一直运行并实时反馈

npm e2e：用Protractor运行“终端-终端”的测试（只有在生成项目时选择了Protractor才有效）

6.项目结构

JHipster客户端代码可以在src/main/webapp下找到。

对于AngularJS路由，我们使用短横分割的命名惯例，当生成一个实体时，路由名称、路由URLs、REST API终端URLs都根据这种惯例来生成，实体的名称也自动使用复数形式。

主要的项目结构：

webapp
├── app                               - 应用
│   ├── account                       - 用户账户管理 UI
│   ├── admin                         - 管理员 UI
│   ├── blocks                        - 普通构建模块如配置文件和拦截器
│   ├── components                    - 普通组件如警告提示和验证
│   ├── entities                      - 产生的实体
│   ├── home                          - 主页
│   ├── layouts                       - 普通页面布局如导航条和错误页面
│   ├── services                      - 普通服务如验证和用户管理
│   ├── app.constants.js              - 应用常量
│   ├── app.module.js                 - 应用模块配置
│   ├── app.state.js                  - 主要的应用路由
├── bower_components                  - Bower安装的依赖
├── content                           - 静态内容
│   ├── images                        - 图像
│   ├── styles                        - CSS样式文件
│   ├── fonts                         - 字体文件拷贝在这里
├── i18n                              - 翻译文件
├── scss                              - Sass样式表
├── swagger-ui                        - Swagger UI的前端和后端
├── 404.html                          - 404 页面
├── favicon.ico                       - Fav 图标
├── index.html                        - 首页
├── robots.txt                        - 爬虫的配置

使用实体生成器创建一个新实体名为Foo，在src/main/webapp下生成以下前端和后端的文件：

webapp
├── app
│   ├── entities
│       ├── foo                                    - Foo实体的CRUD前后端
│           ├── foo.controller.js                  - 列表页面的控制器
│           ├── foo.service.js                     - 访问Foo REST资源的服务
│           ├── foo.state.js                       - AngularUI路由，管理实体的路由
│           ├── foo-delete-dialog.controller.js    - 删除对话框弹出控制器
│           ├── foo-delete-dialog.html             - 删除对话框弹出页面视图
│           ├── foo-detail.controller.js           - 实体细节页面控制器
│           ├── foo-detail.html                    - 实体细节页面视图
│           ├── foo-dialog.controller.js           - 创建/更新对话框弹出控制器
│           ├── foo-dialog.html                    - 创建/更新对话框弹出视图
│           ├── foos.html                          - 列表页面视图
├── i18n                                           - 翻译文件
│   ├── en                                         - 英文翻译
│   │   ├── foo.json                               - 英文翻译Foo的名称、域……
│   ├── fr                                         - 法文翻译
│   │   ├── foo.json                               - 法文翻译Foo的名称、域……

注意默认的语言翻译是基于你在app创建时的选择。

7.验证：

JHipster使用angular-ui-router来组织客户应用的不同部分。

对于每种状态，必要的验证列在状态的数据中，当验证列表为空时，意味着状态可以被匿名访问。

权限也可以定义在服务器端的AuthoritiesConstants.java中，逻辑上客户端和服务器端验证应该是一样的。

在上面的例子中，sessions状态只能被验证过的用户（有ROLE_USER权限）访问。

(function() {
    'use strict';

    angular
        .module('tmpApp')
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

    function stateConfig($stateProvider) {
        $stateProvider.state('sessions', {
            parent: 'account',
            url: '/sessions',
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: 'global.menu.account.sessions'
            },
            views: {
                'content@': {
                    templateUrl: 'app/account/sessions/sessions.html',
                    controller: 'SessionsController',
                    controllerAs: 'vm'
                }
            },
            resolve: {
                translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
                    $translatePartialLoader.addPart('sessions');
                    return $translate.refresh();
                }]
            }
        });
    }
})();

8.注解系统

JHipster使用ui-bootstrap alerts来形成注解系统，并且支持i18n的AlertService可以在整个生成的应用中使用。

默认情况下，当实体创建/更新/删除时JHipster可以显示成功的注解，当在响应中有错误时使用错误注解。

为了显示一个自定义的注解或警告，在注入AlertService后对你的控制器或服务使用下面的方法。

这些快速方法success、info、warning、error将有5秒的时间，对于其他的配置，实用add方法。

(function() {
    'use strict';

    angular
        .module('tmpApp')
        .controller('FooController', FooController);

    FooController.$inject = ['$scope', '$state', 'Foo', 'AlertService'];

    function FooController ($scope, $state, Foo, AlertService) {

        AlertService.success("This is a success message, it is green");

        AlertService.info("This is an info message, it is blue");

        AlertService.warning("This is a warning message, it is amber");

        AlertService.error("This is an error message, it is red");

        AlertService.success("i.will.be.translated");
        // where key i.will.be.translated needs to be in global.json

        AlertService.success("i.will.be.translated", {param: someParam});
        // where key i.will.be.translated needs to be in global.json and can have a  which will be replaced by `someParam`

        AlertService.add({
            type: "success", // can be success, info, warning and error
            msg: msg,
            params: params, // parameters to pass for translation
            timeout: timeout // how long to show the alert in milliseconds
        });

        AlertService.clear();  // clear all alerts

        AlertService.get(); // get all open alerts

    }
})();

如果你想要注解看上去像toasts（很快闪过），你可以在src/main/webapp/app/blocks/config/alert.config.js设置AlertServiceProvider.showAsToast(true)，默认情况下是false。

yfraquelle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
(3)FPQuant JHipster_使用AngularJS1

本文是对JHipster开发文档的部分翻译，供个人学习之用。原文链接：https://jhipster.github.io/development/1.一起使用Java服务器和Gulp推荐使用这一特性，可以实时重新加载客户端的代码。你可以使用Gulp来启动客户端的JavaScript应用：gulp，这将会运行默认的Gulp任务：server。这一操作会打开浏览器，并开启
复制链接

扫一扫