angular-deferred-bootstrap

angular-deferred-bootstrap

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

安裝

1
bower install --save angular-deferred-bootstrap

用法

1
2
3
4
5
6
7
8
9
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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>