开源软件名称：

seed-ui-ng

开源软件地址：

https://gitee.com/fyl080801/seed-ui-ng

开源软件介绍：

seed-ui-ng

基于 webpack 打包的 angular 框架

原 seed-ui-angular 基于 webpack 打包重写，使用typescript开发

要问现在rect、vue满天飞为什么非得用angular老版本，支持ie8呗

基于组件的路由

原angular路由是不支持组件的，只能分着设置template和controller，现在把这个过程做成类似vue那种用组件形式定义，支持子路由

使用webpack的text-loader，在controller定义中导出html模板

import mod from '../module'class Controller {  constructor(private $scope: any) { }}Controller.$inject = ['$scope']mod.controller('sample/components/home', Controller)// 这里导出模板export = require('./home.html')

在路由初始化时候require引用组件

$routerProvider  .add({    name: 'index',    component: require('./components/index')  })  .add({    name: 'home',    component: require('./components/home'),    children: [      { name: 'part1', component: require('./components/parts/part1') },      { name: 'part2', component: require('./components/parts/part2') }    ]  })  .other('index')

模块入口定义和模块引用

每个模块在文件夹下定义一个module.ts文件，用于模块的初始化和导出模块定义

'use strict'import { createModule } from '../../app/application'class SampleModule {  static $inject = ['$routerProvider']  constructor($routerProvider: seed.IRouterProvider) {    $routerProvider      .add({        name: 'index',        title: '首页',        component: require('./components/index')      })      .add({        name: 'home',        component: require('./components/home'),        children: [          {            name: 'part1',            title: '标题1',            component: require('./components/parts/part1')          },          {            name: 'part2',            component: require('./components/parts/part2')          }        ]      })      .other('index')  }}// 使用 application 的 createModule 创建模块export default createModule('modules.sample').config(SampleModule)

在模块中直接使用导出创建angular对象

import mod from '../../module'mod.controller('part2Controller', () => {})export = require('./part2.html')

在模块目录下定义require.ts，统一模块下所有定义，在应用入口引用

import './components/index'import './components/home'import './components/parts/part1'import './components/parts/part2'

应用初始化

目录中 index.ts 文件定义

'use strict'import './app/polyfill'// 引用模块 requiresimport './modules/sample/requires'import application from './app/application'// 初始化application().run()

集成`bootstrap`

自带bootstrap并对弹模态窗进行包装，使模态窗的加载也支持通过组件引用实现，在原有bootstrap模态窗样式基础上增加侧边滑出样式及动画效果

// 引用组件const SimpleModal = require('./modals/simpleModal')class Controller {  constructor(private $scope: any, private $modal: seed.IModalService) {    $scope.vm = this  }  click1() {    alert('clicked!!')  }  click2() {    // 模态窗使用基于组件    this.$modal      .open({        component: SimpleModal,        windowClass: 'right',        backdrop: 'static',        size: 'lg'      })      .result.then(() => {})  }  click3() {    this.$modal.open({      component: SimpleModal,      size: 'sm'    })  }}Controller.$inject = ['$scope', '$modal']