## 引言
`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)一致.
