2017-01-19

AngularJS1.5に再挑戦その19 UI Bootstrap & Typeahead

概要

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

UI Bootstrap & Typeahead

UI Bootstrapという、angularJS用のbootstrapがあるらしい！！これは便利！！

Angular directives for Bootstrap

angular-ui-bootstrapのCDNは以下のようなサイトからゲットしてくる。 https://cdnjs.com/libraries/angular-ui-bootstrap
CDNをindex.htmlにセットする。

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js'></script>

angularのmoduleにも追加しておく。app.module.jsに追記する。

'use strict';

angular.module('try', [
    // external
    'angularUtils.directives.dirPagination',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',

    // internal
    'blogDetail',
    'blogList',
    'confirmClick',
    'tryNav'
]);

try-nav.module.js、try-nav.directives.jsにpost モジュールを追記する。

'use strict';

angular.module('tryNav', ['post']);

'use strict';

angular.module('tryNav').
    directive('tryNav', function(){
        return {
            restrict: "E",
            templateUrl: "/templates/try-nav.html",
            link: function(scope, element, attr){
            }
        }
    });

try-nav.directive.js に追記する。

'use strict';

angular.module('tryNav').
    directive('tryNav', function(Post, $location){
        return {
            restrict: "E",
            templateUrl: "/templates/try-nav.html",
            link: function(scope, element, attr){
                scope.items = Post.query()
                // scope.selectItem = function()
            }
        }
    });

try-nav.htmlに追記する。

      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Search"
            ng-model='searchQuery'
            uib-typeahead='post for post in items | filter:$viewValue | limitTo:8'
            typeahead-on-select=''
            />
            <!-- 初めのpostはobjectで、あとのpostは、valiable　らしい -->
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a ng-href="/blog">Blog</a></li>

try-nav.directive.jsにselectItem functionを追記する。

                scope.selectItem = function($item, $model, $label){
                    console.log($item)
                    console.log($model)
                    console.log($label)
                }

try-nav.htmlに追記する。

uib-typeahead='post for post in items | filter:$viewValue | limitTo:8'
typeahead-on-select='selectItem($item, $model, $label)'

これでtypeaheadで、候補が表示されるようになった！(^ ^)/
さらにtry-nav.directive.jsにpathを追記すると、選択した時にリンクに飛ぶようになる。

                scope.selectItem = function($item, $model, $label){
                    console.log($item)
                    console.log($model)
                    console.log($label)
                    $location.path("/blog/" + $item.id)
                }

さらにsubmitボタン用にも追記する。

scope.searchItem = function(){
console.log(scope.searchQuery)
$location.path("/blog/").search("q", scope.searchQuery)

2017-01-18

AngularJS1.5に再挑戦その18 Navigation Directive

概要

AngularJS1.5に再挑戦その18 Navigation Directive

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Navigation Directive

utils/try-nav/try-nav.module.jsと、try-nav.directive.jsを作成する。

// try-nav.module.js
'use strict';

angular.module('tryNav', []);

// try-nav.directive.js
'use strict';

angular.module('tryNav').
    directive('tryNav', function(){
        return {
            restrict: "E",
            templateUrl: "/templates/nav.html",
            link: function(scope, element, attr){
            }
        }
    });

index.htmlに読み込ませる。

        <script src='/js/app/utils/try-nav/try-nav.module.js' ></script>
        <script src='/js/app/utils/try-nav/try-nav.directive.js' ></script>

app.module.jsに追記する。

'use strict';

angular.module('try', [
...
    'tryNav'
]);

try-nav.htmlを作成する。コードはbootstrapのnavbarのコード見本をそのままコピペする。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Try</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

index.htmlにangularモジュールのtry-navタグを追記する。

<try-nav></try-nav>

blog-list.htmlを少し修正する。

<div dir-paginate='post in items | orderBy: order | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content">
      <div class="thumbnail">
        <img ng-src="{{ post.image }}" alt="...">
        <div class="caption">
          <h3>{{ post.title }}</h3>
          <p>{{ post.text }} {{ post.publishDate }}</p>
          <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p>
        </div>
      </div>
 </div>

blog-list.htmlのsortのselectの箇所を少し修正する。

<h1>Blog List <small><a href='#' ng-click='changeCols(2)'>Change</a></h1>
<div class='row'>
<div class='col-sm-6 col-sm-offset-3'>
    <input type='text' ng-model='query' class='form-control' placeholder='こちらに入力してください'>
    <select class='form-control' ng-model='order'>
        <option value='-publishDate'>Recent</option>
        <option value='publishDate'>Older</option>
        <option value='title'>A-Z</option>
        <option value='-title'>Z-A</option>
    </select>
</div>
</div

後はほとんどbootstrapの修正だったので、割愛。

2017-01-18

AngularJS1.5に再挑戦その17 Order By & Images

概要

AngularJS1.5に再挑戦その17 Order By & Images

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Order By & Images

jsondataに、imageのURLを追記する。

[
  {"title": "Ne Title", "id":1, "description": "This is a book", "publishDate": "2017-01-08",
              "comments":[
                {"id":1, "text": "Nice book"},
                {"id":2, "text":"Another comment"},
              ],
              "image": "https://www.**********mini.jpg"
  },
  {"title": "Title2", "id":2, "description": "This is a book", "image": "https://www.**********mini.jpg"},
  {"title": "Some Title3", "id":3, "description": "This is a book", "image": "/img/mini.jpg"},

config.ruを変更する。images->img。

use Rack::Static,
  :urls => ["/img", "/js", "/css", "/templates", "/json"],

orderByをdirPaginationに加えることで、コンテンツの表示順を変更することができる。

<li dir-paginate='item in items | orderBy: "title" | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content">
    {{ item.title }}
</li>

コンボボックスなどで、選択した項目に応じてソート順を変えることも簡単にできる。

<select ng-model='order'>
    <option value='-publishDate'>Recent</option>
    <option value='publishDate'>Older</option>
    <option value='title'>A-Z</option>
    <option value='-title'>Z-A</option>
</select>

<li dir-paginate='item in items | orderBy: order | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content">
    {{ item.title }}
</li>

blog-list.components.jsに初期のorderの値を加えておく。

...
angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function(Post, $location, $routeParams, $rootScope, $scope){
            $scope.order = '-title'
            $scope.goToItem = function(post){
                $rootScope.$apply(function(){
                    $location.path("/blog/" + post.id)
                })
            };
...

これは便利やな。

2017-01-18

AngularJS1.5に再挑戦その16 Pagination

概要

AngularJS1.5に再挑戦その16 Pagination

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Pagination

github上のコードを拝借する。michaelbromley/angularUtilsというリポジトリにある。

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

リポジトリ内の、dirPagination.jsをダウンロードする。（RAW->別名で保存）
js/external/dirPagination.jsという階層で、保存する。
index.htmlに、<script src='/js/external/dirPagination.js'></script>を追記する。
app/app.module.jsに、dirPagination.jsのモジュールを追記する。

'use strict';

angular.module('try', [
    // external
    'angularUtils.directives.dirPagination',
    'ngResource',
    'ngRoute',
    // internal
    'blogDetail',
    'blogList',
    'confirmClick'
]);

blog-list.htmlの、ng-rpeatの部分を、dir-pagination　に変更する。

<div class="row" dir-paginate='item in colItems | itemsPerPage: 4'>

<dir-pagination-controls></dir-pagination-controls>を挿入する。全体としては以下のような形で作成する。

...
<span ng-if='items.length == 0'>Posts coming soon</span>

<div class="row" dir-paginate='item in colItems | itemsPerPage: 4'>
    <div class="{{ cssClass }}" ng-repeat='post in items | filter: query'>
      <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
          <h3>{{ post.title }}</h3>
          <p>{{ post.text }} {{ post.publishDate }}</p>
          <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p>
        </div>
      </div>
    </div>
</div>

<dir-pagination-controls></dir-pagination-controls>

さらに、検索queryが表示される場合は、paginationを無効にしたいので、<dir-pagination-controls ng-hide='query.length > 0'></dir-pagination-controls>を挿入する。
pagination-idを指定することにより、main-contentと、sub-contentなどpaginationをcontentごとに分けることができる。

<li dir-paginate='item in items | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content">
    {{ item.title }}
</li>
<span ng-if='postItems.length == 0'>No items</span>

<dir-pagination-controls ng-hide='query.length > 0' pagination-id="sub-content"></dir-pagination-controls>

<span ng-if='items.length == 0'>Posts coming soon</span>

<div class="row" dir-paginate='item in colItems | itemsPerPage: 4 | filter:query' pagination-id="main-content">
    <div class="{{ cssClass }}" ng-repeat='post in items'>
      <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
          <h3>{{ post.title }}</h3>
          <p>{{ post.text }} {{ post.publishDate }}</p>
          <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p>
        </div>
      </div>
    </div>
</div>
<dir-pagination-controls ng-hide='query.length > 0' pagination-id="main-content"></dir-pagination-controls>

検索結果が０だった場合に、No itemsという表示をする。

<li dir-paginate='item in items | filter: query | itemsPerPage: 5 as postItems' pagination-id="sub-content">
    {{ item.title }}
</li>
<span ng-if='postItems.length == 0'>No items</span>

同様にmain-contentの方でも設定できる。

<div class="row" dir-paginate='item in colItems | filter:query | itemsPerPage: 4 as mainItems' pagination-id="main-content">
...
<span ng-if='mainItems.length == 0'>No items</span>

他の人のコードをそのまま拝借できると楽だな。

2017-01-17

AngularJS1.5に再挑戦その15 Angular Columns

概要

AngularJS1.5に再挑戦その15 Angular Columns

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Angular Columns

angular columsを作るには、angularのquery機能などを使う。

'use strict';

angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function(Post, $location, $routeParams, $rootScope, $scope){
            $scope.goToItem = function(post){
                $rootScope.$apply(function(){
                    $location.path("/blog/" + post.id)
                })
            };
            Post.query(function(data){
                // console.log(data)
                $scope.items = data
                $scope.colItems = chunkArrayInGroups(data, 3)
            }, function(errorData){

            });
            function chunkArrayInGroups(array, unit){
                var results = [],
                length = Math.ceil(array.length / unit);
                for (var i = 0; i < length; i++){
                    results.push(array.slice(i * unit, (i + 1) * unit));
                }
                return results;
            }

        }
    });

setupCol, changeColを作成する。

// viewから受け取った数字によって、sm-col- の数字を変える。
// 最終的には受け取った数字をsetupColに渡しており、それによりcssClassが変わり、view全体のcolが変わるという仕組みになっている。
            $scope.changeCols = function(number){
                if (angular.isNumber(number)){
                    $scope.numCols = number
                } else {
                    $scope.numCols = 2
                }

                setupCol($scope.items, $scope.numCols)
            }

// setupCol　数値を受け取りそれに応じて、cssClassを設定するのが大きな目的の関数
// 他の関数に組み込んで使うことにより、動的なcolumの変更が可能になる。
            function setupCol(data, number){
                if (angular.isNumber(number)){
                    $scope.numCols = number
                } else {
                    $scope.numCols = 2
                }
                $scope.cssClass = 'col-sm-' + (12/$scope.numCols)
                $scope.items = data
                $scope.colItems = chunkArrayInGroups(data, $scope.numCols)
            }

$scope.cssClassで受け取る、cssClassをそのままtemplateに代入する。

div class="row" ng-repeat='item in colItems'>
    <div class="{{ cssClass }}" ng-repeat='post in items'>
      <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
          <h3>{{ post.title }}</h3>
          <p>{{ post.text }} {{ post.publishDate }}</p>
          <p><a ng-href='/blog/{{ post.id }}' class='btn btn-primary' confirm-click='Are you ready?' confirmed-click='goToItem(post)' />View</a></p>
        </div>
      </div>
    </div>
</div>

clickされた時に、changeColsを呼び出すng-clickタグをセットする。この時のポイントは、changeColsには数値を引数として渡すこと。

<h1>Blog List <small><a href='#' ng-click='changeCols(2)'>Change</a></h1>

blog-list.htmlに、フィルターをつけてみる。

<h1>Blog List <small><a href='#' ng-click='changeCols(2)'>Change</a></h1>
<div class='col-sm-6'>
    <input type='text' ng-model='query' class='form-control' placeholder='こちらに入力してください'>
</div>
...
<div class="row" ng-repeat='item in colItems'>
    <div class="{{ cssClass }}" ng-repeat='post in items | filter: query'>
      <div class="thumbnail">
        <img src="..." alt="...">
...

filterで検索した値をwatchするためにconsole logに表示させる。そして、filterに値が、ある場合と無い場合、さらに検索結果がある場合と無い場合で、場合わけをする。

            $scope.loadingQuery = false
            $scope.$watch(function(){
                console.log($scope.query)
                if($scope.query){
                    $scope.loadingQuery = true
                    $scope.cssClass = 'col-sm-12'
                } else{
                    if ($scope.loadingQuery){
                        setupCol($scope.items, 2)
                        $scope.loadingQuery = false
                    }
                }
            })

watchは、組み込みなのかな。htmlに入れ込まずに反映されてるぽい。

2017-01-17

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>

2017-01-17

AngularJS1.5に再挑戦その13 Confirm Comment Delete

概要

AngularJS1.5に再挑戦その13 Confirm Comment Delete

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Confirm Comment Delete

delete機能をつける。まずは簡単なものをblog-detail.components.jsにつける。

            $scope.deleteComment = function(){
                $scope.post.comments.splice(comment, 1)
                // someResource.$delete() で、jsonから削除できる
            }

blog-detail.htmlを編集する。

<li ng-repeat='comment in post.comments | filter: query'>
        {{ comment.text }} <a href='#' ng-click='deleteComment(comment)'>Delete</a>
    </li>

上記で削除はできるが、上から順番に削除されてしまう。これは後で変更しないとなぁ。
blog-detail.htmlを修正する。

<ul>
    <li>
        <input type='text' ng-model='query' placeholder='filter comments' />
    </li>
    <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>

blog-detail.components.jsonに追記する。

            $scope.deleteComment = function(comment){
                $scope.$apply(
                $scope.post.comments.splice(comment, 1)
                )
                // someResource.$delete() で、jsonから削除できる
            }

Djangoroidの奮闘記

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

AngularJS1.5に再挑戦その19 UI Bootstrap & Typeahead

概要

参考動画・参考サイト

UI Bootstrap & Typeahead

AngularJS1.5に再挑戦その18 Navigation Directive

概要

参考動画・参考サイト

Navigation Directive

AngularJS1.5に再挑戦その17 Order By & Images

概要

参考動画・参考サイト

Order By & Images

AngularJS1.5に再挑戦その16 Pagination

概要

参考動画・参考サイト

Pagination

AngularJS1.5に再挑戦その15 Angular Columns

概要

参考動画・参考サイト

Angular Columns

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

概要

参考動画・参考サイト

Bootstrap & CSS

AngularJS1.5に再挑戦その13 Confirm Comment Delete

概要

参考動画・参考サイト

Confirm Comment Delete