Angular Starter Kit —— Angular 2.0 遷移準備工具 (TypeScript)

jopen 8年前發布 | 19K 次閱讀 Web框架 TypeScript angularjs

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

來自: http://www.oschina.net/p/angular-next-starter-kit?fromerr=EDBwOsTC

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!