Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その14 Bootstrap & CSS

概要

AngularJS1.5に再挑戦 その14 Bootstrap & CSS

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Bootstrap & CSS

  • BootstrapのCDNバージョンを利用する。index.htmlに読み込ませる。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

以下のサイト参照

Getting started · Bootstrap

  • angularJSを使う場合は、CSS部分だけを読み込めばOK。javascript部分は、customjQueryを使っており、挙動がうまくいかないことがあるため。

  • 最終的には以下のように作成。

<div class='row'>
<div class='col-sm-8 col-sm-offset-2'>
<div class="page-header">
  <h1>{{ post.title }}<small> {{ post.description }}</small></h1>
</div>

<h1></h1>

<p></p>

<p>{{ post.description }}</p>
<hr/>
<h3>Comments</h3>
<div class='row'>
    <div class='col-sm-6'>
        <input class='form-control' type='text' ng-model='query' placeholder='filter comments' />
    </div>
</div>
<ul>
    <li ng-repeat='comment in post.comments | filter: query'>
        {{ comment.text }} <a href='#' confirm-click='削除してもよろしいですか?' confirmed-click='deleteComment(comment)'>Confirm</a> <a href='#' ng-click='deleteComment(comment)'>Delete</a>
    </li>
</ul>
<hr/>
<div class='row'>
    <div class='col-sm-6'>
        <p style='color:red;' ng-if='reply.text'>Preview: {{ reply.text }}</p>
        <form ng-submit='addReply()'>
            <input type='hidden' ng-model='reply.id' value='5'>
            <textarea class='form-control' ng-model='reply.text'></textarea>
            <input class='btn btn-default' type='submit'/>
        </form>
    </div>
</div>
</div>
</div>