## 引言
`zhx.tab.frame`目前应用在调度二期,多媒体平台,车联网网关平台等公司软件中.以下会说明如何使用`zhx.tab.frame`来创建一个前端框架.
#### 必备知识
首先你必须了解基本的AngularJS基本使用方法,包括一些核心的概念,比如:模块,控制器,依赖注入等;
#### 第一步
1. 首先你需要在首页,比如`index.html`中引入前端框架需要的文件,一般情况下会有`zhx.tab.frame.min.css`和`zhx.tab.frame.min.js`两个文件;目前你可以使用`<script>`标签在首页引入;
2. 接着,在`index.html`中定义框架指令模板:
```html
<zhx-main-frame>
<zhx-head>
//这里可以自定义一些其他组件,这里定义的组件会被框架自动渲染,例如:
//<zhx-contacts></zhx-contacts>
</zhx-head>
<zhx-tab-set></zhx-tab-set>
<zhx-footer></zhx-footer>
</zhx-main-frame>
```
这样,index.html中关于框架的部分就定义OK了.
#### 第二步
首先,你应该在创建前端框架前先创建类似引导程序的文件,比如`app.js`,该文件负责引导整个项目AngularJS前端.在这里也会进行必要组件的配置.
假设现在你创建了引导程序`app.js`,那么你就应该在项目模块`module`中引入该框架模块`zhxTabFrame`,例如:
```js
var app = angular.module('yourProjectModule',["zhxTabFrame"]);
```
接下来,你应该对项目框架进行配置,配置需要按照Angular的模式,写在`app.config()`中,例如:
```js
app.config(["zhxTabFrameProvider",function(zhxTabFrameProvider){
zhxTabFrameProvider.config({
debug : true,
dataUrl : "data/getData"
...
});
}])
```
具体的配置项API请[参考这里](API.md).
#### 第三步
因为框架依赖oc.Lazyload来动态加载注入模块,因此我们不光需要配置框架信息,也要在业务层配置后台传入框架的模块的信息.这里的配置方法和oc.LazyLoad是一致的.oc.LazyLoad相关配置大家可以[参阅这里](https://oclazyload.readme.io/).
当然, oc.Lazyload的配置项依然需要配置在模块的`config()`中,并在配置前将其注入模块,例如:
```js
var app = angular.module('yourProjectModule',[
'zhxTabFrame',
'oc.lazyLoad'
]);
```
然后,在`config()`中配置它.
```js
$ocLazyLoadProvider.config({
debug : true,
//这里开始定义业务模块
modules:[
{
name : 'homepage', //模块名称
cache : false //是否缓存
files : ['js/modules/homepage/homeCtrl.js'] //加载模块控制器
}
...
]
})
```
这样如上配置好所有业务模块,该模块和框架读取进来的数据(JSON)一致.
