Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@kkeisuke

angular-cli でダッシュボード型アプリのモック その1

これは 日本情報クリエイト Engineers Advent Calendar 2016 による4日目の記事になります。
(進捗遅れて申し訳ございません。。)

新ネタが無いので、個人的に進めている angular-cli ネタの続きです。

前回で、angular-cli で作成したアプリに bootstrap をインストールしたので、今回はヘッダーとサイドバーを付けてダッシュボードぽくするところまで

成果物

component 作成

ヘッダーやサイドバーを component として作成してみます。コンポーネント名を、navbarsidebar とした場合、

ng g component navbar
ng g component sidebar

これで、src/app 以下に component 毎にフォルダが切られ、各ファイルが作成されます。

.
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── index.ts
│   │   ├── navbar
│   │   │   ├── navbar.component.css
│   │   │   ├── navbar.component.html
│   │   │   ├── navbar.component.spec.ts
│   │   │   └── navbar.component.ts
│   │   └── sidebar
│   │       ├── sidebar.component.css
│   │       ├── sidebar.component.html
│   │       ├── sidebar.component.spec.ts
│   │       └── sidebar.component.ts
│   ├── index.html

app.component は ng new した時にすでに作られている component になります。
app-rootというセレクタが定義されており、index.html<app-root> として使用されています。
ココが起点になりそうです。

component 配置

作成した component は、app.component.html 内に配置しました。
<app-navbar></app-navbar> とか <app-sidebar></app-sidebar>

app.component.html
<div class="container-fluid app">
  <div class="row">
    <div class="col-md-12">
      <app-navbar></app-navbar>
    </div>
  </div>
  <div class="row">
    <div class="hidden-md-down col-lg-2 bg-faded col-sidebar">
      <app-sidebar></app-sidebar>
    </div>
    <div class="col-md-12 col-lg-10 offset-lg-2">
      <!-- この中がルーティングで切り替わっていくイメージ -->
    </div>
  </div>
</div>

あとは CSS を少し書くだけで、こんな感じになります。

Kobito.4OBGOF.png

今後

まだまだ触り始めたばかりで設計のベストプラクティスとかアンチパターンとかがわからないので、その辺もキャッチアップしていきます。
(src/app 以下に全コンポーネント並べるのはきつそうなので、数が増えそうな場合どのような階層を準備しておくのが良いか etc)

以下、やることリストです。

etc

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?