本文是对JHipster开发文档的部分翻译，供个人学习之用。
原文链接：
https://jhipster.github.io/development/
https://jhipster.github.io/using-angularjs/
推荐使用这一特性，可以实时重新加载客户端的代码。
你可以使用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上运行。
我们使用eslint进行AngularJS javascript检查，你可以运行gulp eslint来检查你的AngularJS文件，也可以运行gulp eslint:fix使用eslint来检查一些小问题，例如格式等。
使用gulp install一次运行所有的bootstrap任务。
使用gulp build来为你的客户端文件build/www在目标文件夹下构建一个优化版本。
默认情况下，你可以获得gulp任务期间错误或失败的屏显注解，使用--no-notification来关闭注解。
使用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。
这一步骤对于看到你的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/上看到这些任务无论是在使用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才有效）
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创建时的选择。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(); }] } }); } })();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。
