Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

成果物

https://github.com/kkeisuke/angular-cli-sample

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

kkeisuke
Web & UI エンジニア / フリーランス / TypeScript / Go / ど田舎でフルリモートワーク / 3世帯大家族 / 家業の自社システム開発・運用中
https://kkeisuke.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした