Angular Seed Advanced

这是一个基于 Minko Gechev 的 Minko Gechev 的 angular-seed 的 Angular 应用程序高级种子项目，它扩展了其所有优秀功能，包括对以下内容的核心支持：

集成

ngrx/store 由 RxJS 驱动的状态管理，灵感来自 Redux
ngrx/effects 为 @ngrx/store 的副作用模型
ngx-translate 用于 i18n
- 使用是可选的，但默认开启
- 由您和您的团队决定如何利用它。如果不需要，可以轻松删除。
angulartics2 为 Angular 应用程序提供无供应商的统计分析。
- 默认支持 Segment
  - 使用种子时，请确保更改您的 write_key 此处
- 可以更改为任何供应商，了解更多信息
lodash 帮助将代码块缩减为单行，并提高可读性
NativeScript 跨平台移动（带原生 UI）应用程序。设置说明在此。
Electron 跨平台桌面应用程序（Mac、Windows 和 Linux）。设置说明在此。


多平台之禅。 Chrome、Android 和 iPhone 都运行相同的代码。


编程极乐。 Mac 和 Windows 桌面都运行相同的代码。

建议：如果您的项目旨在针对单一平台（即仅网页），则 angular-seed 可能非常适合您的需求。但是，如果您的项目目标是针对多个平台（网页、原生移动和原生桌面），具有强大的默认库支持和高度可配置/灵活的测试选项，那么您可能需要继续阅读。

太多了？！：不用担心，这很正常，我完全理解。这个种子有一个简化的版本，仍然允许 web + 移动 + 桌面没有额外的库和功能，如 ngrx 或分析。试试这个：https://github.com/jlooper/angular-starter

它构建了与这里相同的很多结构，所以事情运作方式相同，但如果你是初涉多平台开发，绝对更容易开始。

先决条件

注意您应该有 node v6.5.0 或更高版本 和 npm 3.10.3 或更高版本。

要运行 NativeScript 应用程序（目前支持 3.x）

npm install -g nativescript

如何开始

# install the project's dependencies
$ npm install
# fast install (via Yarn, https://yarn.npmjs.net.cn)
$ yarn install  # or yarn

# watches your files and uses livereload by default
$ npm start
# api document for the app
# npm run build.docs

# generate api documentation
$ npm run compodoc
$ npm run serve.compodoc

# to start deving with livereload site and coverage as well as continuous testing
$ npm run start.deving

# dev build
$ npm run build.dev
# prod build
$ npm run build.prod

如何使用 AoT 开始

注意AoT 编译需要 node v6.5.0 或更高版本 和 npm 3.10.3 或更高版本。

为了使用AoT启动种子

# prod build with AoT compilation, will output the production application in `dist/prod`
# the produced code can be deployed (rsynced) to a remote server
$ npm run build.prod.aot

移动应用程序

移动应用通过NativeScript提供，这是一个用于构建真正原生移动应用的开源框架。

设置

npm install -g nativescript

开发工作流程

您可以在src/client/app或nativescript/src/app文件夹中更改文件。在web src/client/app和nativescript/src/app文件夹之间存在符号链接，因此任一位置的变化都会被镜像，因为它们是同一目录。

为每个Web组件视图文件创建.tns.html和.tns.scss NativeScript视图文件。您将在这里看到一个app.component.html的NativeScript视图文件示例。

移动应用的根模块是nativescript/src/native.module.ts：NativeModule。

运行

iOS:                      npm run start.ios   
iOS (device):             npm run start.ios.device

// or...

Android:                      npm run start.android
Android (device):             npm run start.android.device

需要通过AVD Manager设置图像。更多了解这里和这里。

或者...

GenyMotion Android 模拟器

使用Webpack为发布构建进行构建

为部署到App Store和Google Play创建AoT构建。

Android:   npm run build.android
iOS:       npm run build.ios

桌面应用程序

桌面应用通过Electron提供，是使用JavaScript、HTML和CSS构建的跨平台桌面应用。

开发

Mac:      npm run start.desktop
Windows:  npm run start.desktop.windows

使用livesync进行开发

Mac:      npm run start.livesync.desktop
Windows:  npm run start.livesync.desktop.windows

发布：为Mac、Windows或Linux打包Electron应用

Mac:      npm run build.desktop.mac
Windows:  npm run build.desktop.windows
Linux:    npm run build.desktop.linux

运行测试

$ npm test

# Development. Your app will be watched by karma
# on each change all your specs will be executed.
$ npm run test.watch
# NB: The command above might fail with a "EMFILE: too many open files" error.
# Some OS have a small limit of opened file descriptors (256) by default
# and will result in the EMFILE error.
# You can raise the maximum of file descriptors by running the command below:
$ ulimit -n 10480


# code coverage (istanbul)
# auto-generated at the end of `npm test`
# view coverage report:
$ npm run serve.coverage

# e2e (aka. end-to-end, integration) - In three different shell windows
# Make sure you don't have a global instance of Protractor

# npm install webdriver-manager <- Install this first for e2e testing
# npm run webdriver-update <- You will need to run this the first time
$ npm run webdriver-start
$ npm run serve.e2e
$ npm run e2e

# e2e live mode - Protractor interactive mode
# Instead of last command above, you can use:
$ npm run e2e.live

您可以在Protractor交互模式这里了解更多信息

Web 配置选项

默认应用程序服务器配置

var PORT             = 5555;
var LIVE_RELOAD_PORT = 4002;
var DOCS_PORT        = 4003;
var APP_BASE         = '/';

在运行时进行配置

npm start -- --port 8080 --reload-port 4000 --base /my-app/

环境配置

如果您有不同的环境并且需要配置它们以使用不同的端点、设置等，您可以在./tools/env/中使用文件dev.ts或prod.ts。文件名是您想要使用的环境。

可以使用以下方式指定环境

$ npm start -- --env-config ENV_NAME

目前ENV_NAME是dev、prod、staging，但您可以通过简单地添加不同的文件"ENV_NAME.ts"来添加额外的环境。

工具文档

提供工具的文档可以在tools/README.md中找到。

代码组织概述

nativescript：此目录的根目录保留用于移动应用。
- src：移动应用源。
  - app：来自Web应用的共享代码的符号链接。
  - App_Resources：iOS和Android平台特定的配置文件和图像。
  - mobile：特定于移动的服务等。在这里构建特定于移动的服务以及需要为移动应用提供的Web服务的覆盖。
  - native.module.ts：由NativeScript提供的移动应用的根模块。在这里覆盖/提供服务的原生移动实现。
src/client：此目录的根目录保留用于Web和桌面。
- app：此目录中的所有代码都通过符号链接与移动应用共享。
  - components：保留用于主要路由组件。由于每个应用通常都有自己的唯一路由集，因此您可以在其中提供应用的唯一主要路由组件。
  - shared：跨平台共享代码。可重用的子组件、服务、实用程序等。
    - analytics：提供分析服务。开箱即用，已配置Segment。
    - core：低级服务。基础层。
    - electron：特定于Electron集成的服务。将来可以重构，因为这不必要与移动应用共享。
    - i18n：各种本地化功能。
    - ngrx：中央ngrx协调。将来自任何其他功能模块等的状态汇总在一起，以设置初始应用程序状态。
    - sample：一个预先配置了可扩展ngrx设置的示例模块。
    - test：测试工具。未来可能将其重构到其他位置。
- assets：应用程序需要加载的各种区域文件、图像和其他资源。
- css：通过 SASS 编译创建的主要样式文件列表（默认启用）。
- scss：部分 SASS 文件 - 保留用于 _variables.scss 和其他用于样式的导入部分。
- index.html：Web 和桌面应用程序的索引文件（共享相同的设置）。
- main.desktop.ts：Electron 启动桌面应用程序所用的文件。
- main.web.prod.ts：引导 AoT Web 构建。 通常不会在此处进行修改
- main.web.ts：引导开发 Web 构建。 通常不会在此处进行修改
- package.json：Electron 启动桌面应用程序所用的。
- system-config.ts：此文件在此处加载 SystemJS 配置，并在您的应用程序的定制 project.config.ts 中扩展。
- tsconfig.json：由 compodoc 使用 - 您的 Angular 应用程序的缺失文档工具 - 以生成代码的 API 文档。
- web.module.ts：Web 和桌面应用程序的根模块。
src/e2e：Web 应用程序的集成/端到端测试。

如何使用

i18n

如何添加语言？
- src/client/assets/i18n/
  - 添加 [language code].json（复制现有文件并修改翻译字符串）
- https://github.com/NathanWalker/angular-seed-advanced/blob/master/src/client/web.module.ts#L98-L101
  - 使用支持的语言数组配置 Languages InjectionToken
- src/client/app/modules/i18n/components/lang-switcher.component.spec.ts
  - 修复测试

日志记录

日志记录的基本 API 界面是什么？
- LogService 是消费者代码应使用的主要类，以将诊断信息写入一个或多个配置的目标
- LogTarget 是日志输出位置的抽象。（例如，ConsoleTarget 将诊断信息写入 console）
- LogTargetBase 是一个基抽象类，它使实现自定义日志目标更容易。它为继承者提供了一个按重要性过滤消息的方式。
- LogLevel 是与每个日志消息相关的重要性级别（例如，Debug、Info、Warning、Error）
如何控制记录的信息量？
- 如果日志目标是从 LogTargetBase 派生的，则可以配置目标按重要性过滤消息。您可以将 minLogLevel 作为 LogTargetOptions 传递
- LogService 还使用 Config.Debug 开关作为全局阈值，进一步过滤日志消息的冗长性。

如何实现自定义日志目标？

从 LogTargetBase 类派生并实现 writeToLog 方法（见 ConsoleTarget）。您可以在主应用程序模块中同时配置多个日志目标。例如

CoreModule.forRoot([
    { provide: WindowService, useFactory: (win) },
    { provide: ConsoleService, useFactory: (cons) },
    { provide: LogTarget, useFactory: (consoleLogTarget), deps: [ConsoleService], multi: true },
    { provide: LogTarget, useFactory: () => new LogStashTarget({minLogLevel: LogLevel.Debug}) }
  ]),

共享代码的一般最佳实践指南

实际上，在 Web/移动设备之间共享代码时，需要注意的只有少数几件事情。种子确实处理了其中的一些事情，但这里有一个简短的列表

不要将{N}模块导入到您的组件/服务中。{N}模块只能在{N}应用内部使用，因此不能共享。为了解决这个问题，请使用InjectionToken。有关更多信息，请参阅这里。如何整合两个不同的插件（一个用于Web，一个用于{N}）并共享所有代码的绝佳示例，请参阅由神奇的Scott Lowe撰写的这篇维基文章：如何跨所有平台整合Firebase。
在共享方法中使用种子提供的条件钩子，在{N}中可能需要以不同的方式处理某些内容。例如，请参阅这里。
不要使用window全局变量。相反，注入种子提供的WindowService。这包括对alert、confirm等的用法。例如

如果您想过要执行：alert('发生了某些事情！');，不要这样做。相反，注入WindowService

constructor(private win: WindowService) {}

public userAction() {
  if (success) {
    // do stuff
  } else {
    this.win.alert('Something happened!');
  }
}

这确保了当相同的代码在{N}应用中运行时，将使用本地的dialogs模块。

最后，了解这个视频：http://www.nativescriptsnacks.com/videos/2016/06/13/zoned-callbacks.html …至于处理{N}和第三方插件，您想要了解这一点。

我喜欢给出的建议是

首先以Web心态编写代码。然后在启动过程中使用Angular的{provide: SomeWebService, useClass: SomeNativeService }提供原生功能。

在某些情况下，您可能想使用useValue而不是useClass，在其他情况下可能需要使用useFactory。请参阅Angular文档以了解更多关于您可能需要的信息。

如何将它们用于您的项目

设置

注意：在开始进行任何更改和构建项目之前，应该先这样做。

git clone https://github.com/NathanWalker/angular-seed-advanced.git [your-project-name]
cd [your-project-name]
git remote set-url origin [your-project-git-repo] - 这将正确设置origin。
git remote add upstream https://github.com/NathanWalker/angular-seed-advanced.git - 这将正确设置upstream，以便稍后合并上游更改。
git push - 现在开始推送初始项目。
现在您已经设置了git并准备好开发您的应用程序以及将来合并上游更改。
npm install（以及本README中所有其他使用说明）- 继续按照这里的说明操作。
在src/client/app/shared中创建一个新的文件夹（或多个子文件夹）以存放您的应用程序，并开始构建您的代码库。假设您的应用程序名为AwesomeApp，则创建awesomeapp并在其中构建所有组件和服务。根据需要创建其他框架以进行组织。

合并最新的上游更改

git fetch upstream - 这将获取最新的upstream。
git merge upstream/master - 这将合并上游更改。
处理任何冲突以将最新的上游更改合并到您的应用程序中。
继续构建您的应用程序。

您可以在这里了解更多关于同步分支的信息。

如果您对此工作流程有任何建议，请在此处发布此处。

容器化

应用程序提供完整的Docker支持。您可以使用它进行开发和生产构建以及部署。

如何构建和启动应用程序的容器化版本

Docker化基础设施在docker-compose.yml（分别docker-compose.production.yml）中描述。应用程序由两个容器组成

angular-seed - 在开发模式下，此容器提供angular应用程序。在生产模式下，它构建angular应用程序，构建工件由Nginx容器提供。
angular-seed-nginx - 此容器仅在生产模式下使用。它使用Nginx提供构建的angular应用程序。

开发构建和部署

运行以下命令

$ docker-compose build
$ docker-compose up -d

现在请打开浏览器至 http://localhost:5555

生产构建和部署

运行以下命令

$ docker-compose -f docker-compose.production.yml build
$ docker-compose -f docker-compose.production.yml up angular-seed   # Wait until this container has finished building, as the nginx container is dependent on the production build artifacts
$ docker-compose -f docker-compose.production.yml up -d angular-seed-nginx  # Start the nginx container in detached mode

现在请打开浏览器至 http://localhost:5555