Angular Starter Kit —— Angular 2.0 迁移准备工具 (TypeScript)

Posted 2021-04-25 OSC开源社区

angular-next-starter-kit 是使用 Angular 1.x 开发的应用准备迁移到 Angular 2.0 的种子项目。

Angular 2.0 引入了一些新概念和设计模式，但是 Angular 2.0 还有几个月才能在生产环境使用。为了能让 Angular 1.x 开发的应用使用 Angular 2.0 的概念和一些技术，就有了 angular-next-starter-kit。

此项目的目标是：

专注于应用逻辑：

创建一个 service 来获取数据

创建一个 component 来使用数据

使用更小的组件来 Compose 更大的组件

开发者不需要担心：

配置 build system

配置 unit tests, end-to-end tests, code coverage

提供 static analysis 和配置 typescript

自动生成 documentation

特性

Complete scaffolding with Angular 1.4.x

Typescript 集成

Webpack 绑定系统，多个加载器 (sass, html, typescript)

Gulp 集成 (currently only one task to provide auto documentation)

Karma 集成 Mocha, Chai，多个浏览器启动器 (Chrome, PhantomJS) 和代码覆盖

Interfaces 和 APIs 可以创建可测试和可复用组件

各种服务接口

Http Service

Socket Service using Socket IO

SOAP Service using soap client

Buffer Service using ProtobufJS

框架

Angular 1.4.x

Bootstrap (sass) 3.3.6

Socket IO Client 1.3.7

Typescript v1.7.5

目录结构：

|-- app | Root directory for the application
|
|---- common | All modules common to the application
|------ bindingTypes.ts | Module containing Angular binding types
|------ component.ts | Interface for a BaseComponent
|------ service.ts | Interfaces for HttpService, SocketService, SoapService and BufferService
|
|---- components | Root directory for all the components. Any component should go in here
|------ dropdown | Sample implementation of a component
|-------- dropdown.html | Template file for the component using Angular's template syntax
|-------- dropdown.scss | Scoped styles for the component. This can now just be `required` in
|-------- dropdown.spec.ts | Unit test spec file for the component. This should be local to the component
|-------- dropdown.ts | Implementation of the component itself
|
|---- core | Utility modules that bootstrap the application
|------ bootstrap.ts | Loads in all the other utility modules and bootstrap's Angular
|------ components.ts | Holds references to all the components
|------ modules.ts | Registers all the modules
|------ services.ts | Holds references to all the services
|------ tests.ts | Imports all the necessary modules needed for testing
|
|---- services
|------ stock-service.ts | Reference implementation of an HttpService using JSONP
|
|---- utilities | Any utilities used across the application
|
|---- app.d.ts | Typescript definition file for the application
|---- index.html | Main html file for the application
|---- index.scss | Main css file for the application
|
|-- build | Contains the bundled application
|-- docs | Contains all auto generated documentation
|-- fonts | Contains application wide fonts
|-- images | Contains application wide images
|-- gulpfile | Gulp task file. Currently only one task to generate documentation is provided
|-- karma.conf.js | Configuration file for the karma test runner
|-- package.json | Contains NPM dependencies and application commands
|-- tsconfig.json | Typescript compiler configuration
|-- tsd.json | Contains references to definitely typed libraries
|-- tslint.json | Configuration used by the tslint-loader
|-- webpack.config.js | Webpack's global configuration file