universal

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 冯沛
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

universal

Please support this project by simply putting a GitHub star. Share this library with friends on twitter and everywhere else you can.

universal is a seed project for Angular Universal apps following the common patterns and best practicesin file and application organization, providing the following features:

  • Providing a seed project using the Angular framework.
  • NEW: Extending workspace/monorepo capabilities by Nx!
  • Includes ngrx-powered CRUD feature tutorial.
  • Compiling bundles for both browser (SPA) and server (Angular Universal) platforms.
  • Rebased on Angular CLI to focus on features and development productivity, not on build tools.
  • Customizable webpack configuration via @angular-builders.
  • Using the modern UI components of Angular Material.
  • Dynamic responsive layouts via flex-layout.
  • Built-in Hot Module Replacement to save valuable development time.
  • Development, staging and production modes.
  • Performing AoT compilation for rapid page loads on staging/production builds.
  • Tree-shaking and minifying the production builds using Angular Devkit.
  • Cross-browser SCSS with autoprefixer and browserslist.
  • stylelint-config-standard as configuration preset for stylelint and custom rules to standardize stylesheets.
  • Transferring server responses on client bootstrap to prevent app flickering with native TransferState`.
  • Deferring initialization of modules via Lazy loading.
  • Uses ngrx/store for state management.
  • NEW Uses ngrx/entity state adapter to manipulate and query entity collections.
  • NEW Uses ngrx/effects side effect model to to model event sources as actions.
  • NEW Uses unionize for boilerplate-free functional sum types.
  • Uses ngx-config for configuration management.
  • Uses ngx-auth for basic JWT-based authentication (w/Universal support).
  • Uses ngx-cache for application-wide caching.
  • Uses ngx-translate for i18n support.
  • Uses ngx-meta for SEO (title, meta tags, and Open Graph tags for social sharing).
  • Uses ngx-perfect-scrollbar for scrollbars.
  • Vendor-agnostic analytics via angulartics2.
  • Unit tests with Jest, including code coverage.
  • Seamless integration with CircleCI continuous integration and delivery platform.
  • angular-tslint-rules as configuration preset for TSLint and codelyzer.

You can view the live app at http://universal.buraktasci.com.

Table of contents:

Getting started

Installation

You can install universal by simply forking the repo:

# clone the repo
$ git clone https://github.com/fulls1z3/universal.git [your-project-name]
$ cd [your-project-name]

Setting up upstream repository

Once you have cloned the repo, you can follow these steps to allow sync changes made in this repo with your fork:

# set up `origin`
$ git remote set-url origin [your-fork-repo]

# set up `upstream` to sync future changes
$ git remote add upstream https://github.com/fulls1z3/universal.git

# verify the upstream repo specified for your fork
$ git remote -v
origin    https://github.com/YOUR_USERNAME/[your-fork-repo].git (fetch)
origin    https://github.com/YOUR_USERNAME/[your-fork-repo].git (push)
upstream  https://github.com/fulls1z3/universal.git (fetch)
upstream  https://github.com/fulls1z3/universal.git (push)

# initial push for the fork
$ git push

Now, you can create a new directory (ex: src/app/shared) to build your codebase out, while benefiting from theclient framework located at the src/app/framework directory.

In order to merge the latest upstream changes, simply follow:

# fetch the latest upstream
$ git fetch upstream

# merge the upstream changes
$ git merge upstream/master

then handle any conflicts, and go on with building your app.

Development and builds

Below are the scripts to dev, build, and test this seed project:

Install dependencies

# use `yarn` to install the deps
$ yarn

Development server

# dev server
$ ng serve

# dev server (HMR-enabled)
$ ng serve --c hmr

# dev server (AoT compilation)
$ ng serve --prod

# dev server (SSR)
$ yarn start:ssr

# dev server (SSR & AoT compilation)
$ yarn start:ssr:prod

And then,

  • Navigate to http://localhost:4200/ for the SPA (browser) build.
  • Navigate to http://localhost:4000/ for the SSR (universal) build.

The app will automatically re-compile if you change any of the source files.

Build

# development build
$ ng build

# production build
$ ng build --prod

# development build (SSR)
$ yarn build:ssr

# production build (SSR)
$ yarn build:ssr:prod

The build artifacts will be stored in the dist/ directory.

Running tests

# run unit tests
$ ng test

Contributing

If you want to file a bug, contribute some code, or improve documentation, please read up on the following contribution guidelines:

Thanks to

  • JetBrains, for their support to this open source project with free WebStorm licenses.

License

The MIT License (MIT)

Copyright (c) 2018 Burak Tasci

  • stackoverflow上有个问题:Why “universal references” have the same syntax as rvalue references? 就是说为什么这俩的形式都是T&&(T表示一个类型)。其中有一个回答很好,回答如下: I think it happened the other way around. The initial idea was to int

 相关资料
  • 问题内容: {新手Android开发人员} 我目前正在使用在Github上找到的Google的开源媒体应用来尝试为自己的项目之一创建自己的媒体播放器。但是,我一直遇到的一个问题是,当我从以下位置更改RemoteJSON中的JSON文件时: 至 (使用myjson.com存储文件) 它会填充应用程序内的信息,但是当选择一项时,会产生MediaPlayer错误1(-2147483648)。(我所做的只

  • 问题内容: 在我的应用程序上,我使用通用的图像下载器BaseImageDownloader类同步加载画廊的内容。对于来自Imageloader.getInstance()。loadImage异步函数的相同内容,它不会给出任何安全异常并按原样加载图像,但是当我尝试使用BaseImageDownloader同步下载它(而且Imageloader.getInstance()。loadImage()相同)

  • 问题内容: 我使用的是Google提供的示例,我没有对代码进行任何更改,即使我没有尝试任何开箱即用的方法,我只是将您的项目导入到我的工作空间中,并在设备上进行了检查,发现我am (按类型划分的歌曲)和类型列表… 虽然我应该从JSON中获取Thumb,但这是我尝试过的(但没有成功)- 并得到 问题答案: 图标位图可能尚未设置。最好使用AlbumartCache来获取图标,然后在imageView上进

  • 问题内容: 有没有带WebSockets的Angular Universal示例? 服务器端渲染不知道在我的情况下是不是一个WebSocket对象。如果我使用socket.io,则尝试建立连接时节点服务器将挂起。 有关该问题的一些其他信息: 我从github下载了angular-universal- starter:https://github.com/angular/universal- sta

  • 问题内容: 我一直在评估NOSTRA的Universal-Image-Loader库以异步下载图像并将其显示在ListView中。到目前为止,除了一个问题之外,它都可以正常工作。 有时,当列表滚动时,来自内存缓存的位图会附加错误。停止滚动后,将附加正确的图像。这种情况非常罕见,我找不到100%的方式来再现它。我上次拍摄视频时是这样。 这是代码,可以在此处找到UIL配置和方法。 我真的很感谢在此问题

  • 问题内容: 我想使 Landscape 应用程序具有 通用性 ,以使Sprite节点与运行该应用程序的任何视图大小成比例地缩放。我想要一个 完全编程的 解决方案,因为我不喜欢IB。 我的游戏非常简单,不需要任何形式的滚动或缩放,因此整个游戏将始终存在并占据整个视图。 我所寻找的可能是更改场景的大小以始终适合视图吗?如果是这样,您可以彻底解释一下吗,因为我尝试更改视图控制器的这一部分 成为将大小作为

  • 我试图从这个链接使用Angular Universal用SSR呈现Angular 7应用程序https://angular.io/guide/universal.我认为我已经从那里开始工作了,因为我能够查看页面源代码,并查看应用程序中的所有内容。呈现到页面的组件。但是,我无法呈现标记内的任何路由 我只是简单地剥离了我的应用程序,完全按照留档所说的去做。我在那里读到一些关于确保在app.server

  • 问题内容: 我目前正在从事基于CMS的项目。 我为此使用erikras的Universal React Redux样板 我真的需要有关处理动态路由的建议 让我们以一个简单的场景作为样板… 在 routes.js中 data.js 现在,假设根据用户角色,json数据中的属性将更改 假设新属性:是 当react将呈现组件时,它将如何知道路由链接..,因为未在route.js中定义 我没有正确的方法来