代码拉取完成，页面将自动刷新
基于 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'
// 引用模块 requires
import './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']
定义了一些常用的功能函数，具体看注释吧
$delayTimer: 查询时输入文字 throttle
$router: 基于组件的路由
$popup: 弹出消息和提示框
$request: 链式调用的 ajax 请求
$tree: 根据数组元素包含 parentId 将数组转化成树对象，转换完后每一个对象具有 parent、children、data 属性
去掉了原来通过模块打包按需加载 js 功能，费那么大工夫实现还不如直接新打包一个模块作为单独页面分片加载，至于模块页面间共享数据及公共视图，将来直接从node端输出到 js 结果里
要是想实现vue那种模板和脚手架的话以后再说吧，我就一个人而且只有晚上有时间，那么多功能得一点点来呀
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型