2016年5月23日 星期一

angular-deferred-bootstrap

# angular-deferred-bootstrap
angular-deferred-bootstrap是用來初始化angular應用程式的套件

# 安裝
```shell
bower install --save angular-deferred-bootstrap
```

# 用法
```javascript
deferredBootstrapper.bootstrap({
  element: document.body,
  module: 'MyApp',
  resolve: {
    APP_CONFIG: ['$http', function ($http) {
      return $http.get('/api/demo-config');
    }]
  }
});
```

# 載入狀態css類別

* deferred-bootstrap-loading while the data is loading
* deferred-bootstrap-error if an error occurs in a resolve function and the app can not be bootstrapped

```css
#loading {
    display: none;
}
.deferred-bootstrap-loading #loading {
    display: block !important;
}

#error {
    display: none;
}

.deferred-bootstrap-error #error {
    display: block !important;
}

.loading-message{
    text-align:center;
    font-size:16pt;
}
```

# 載入狀態html
```html

<div id="loading" class="side-body padding-top">
    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 100%;"></div>
    </div>
    <p class="loading-message">Loading, please wait...</p>
</div>

<div id="error" class="side-body padding-top">
    <div class="progress">
        <div class="progress-bar" style="width: 100%;"></div>
    </div>
    <p class="loading-message">Loading fail, please try again...</p>
</div>
```