このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Type Script + AngularJS でサイト制作 備忘録

JavaScript

2014.08.05

この記事は最終更新日から1年以上が経過しています。

ども。

おひさしびりです。

ということで、最近はもっぱらTypeScript + AngularJSでサイトを制作する毎日で、

「あれ。あれどうだったけ??」と出てくるのは必然で(笑)

忘れない様に、今回はAngularJSの方を軽くまとめてみました。

AngularJS

https://angularjs.org

iScroll + AngularJS

Angular JSで構築したサイトでiScrollを使おうとすると、上手く機能しなかったりします。

その際は、Angular JSのディレクティブを使用すると良いでしょう。

ディレクティブは、AngularJSのHTMLコンパイラ($compile)に、そのDOM要素やその子要素に変形や特殊な振る舞いを割り当てるように伝える事が可能となります。

カスタムディレクティブは ng-hogehoge と任意の名前を設定することが可能です。

呼び出す際はngHogehoge と – を無くした形のキャメルケースで呼び出す事が出来ます。

詳しい説明はさておき、ディレクティブのプロパティとrestrictプロパティの一覧を

プロパティ一覧
プロパティ名 目的
restrict ディレクティブの中でこのディレクティブがどの様に使われるかを表す。要素、属性、クラス、コメント
priority 同じ要素で指定されているディレクティブとの間で、実行の順序を決める数値を表す。
template インラインのテンプレートを文字列として指定。テンプレートのURLを指定している際不要。
templateUrl テンプレートが置かれているURLを指定。インラインのテンプレートを指定している際不要。
replace trueの指定で現在の要素が置き換わる。falseの場合、現在の要素の中にディレクティブのコンテンツが挿入される。
transclude ディレクティブの子要素として記述されているコンテンツが、新しいテンプレートの中に移される。
scope 親のscopeを継承せずに、このディレクティブの為の新しいscopeを生成。
controller ディレクティブ間の通信可能にするためのコントローラを生成
require このディレクティブが正しく機能するために必要なディレクティブを指定
link 生成されたDOMを変更、イベントリスナーを追加、データバインディングを定義。
compile 繰り返されるディレクティブのテンプレートを変更。
restrictプロパティ
形態
E 要素 <my-elem title=Webcyou><my-elem>
A 属性 <p my-elem=Webcyou></p>
C クラス <p class=my-elem:Webcyou></p>
M コメント <!– directive: my-elem Webcyou –>
iScrollを使う場合

html

<div id="iscrollView" class="iscrollView" ng-scroll>
    <ul>
        <li>Web帳</li>
        ~ 省略 ~
    </ul>
</div>

main.js

angular.module('app')
.directive('ngScroll', function () {
    return {
        restrict: 'A',
        link: function (scope, elements) {
            var myScroll,
            element = elements[0],
            deviceHeight = window.innerHeight,
            elemVal = element.getBoundingClientRect();
            element.style.height = deviceHeight - elemVal.top + 'px';
            myScroll = new IScroll(element, {});
        }
    };
})

ディレクティブを使用することによって動的コンテンツもiScrollの指定が行えるでしょう。

elemVal、element.style周りはブラウザの高さによってiScroll領域の高さを調整しておりますので、任意で有無を。

ng-repeat 内 ng-repeat

頻繁に利用するであろうとされる、ngRepeatディレクティブ。

このngRepeatの中で更にngRepeatさせたいよーといった場面。

例えば。

$scope.arrayTest = {
    len: [0, 2, 3, 5]
};

このような感じで配列の数だけng-repeatし、更にそのindexのNumber分repeatさせたい。

といった場面に遭遇したのですが、Numberでng-repeatの指定はどうも無理っぽいですね。

<li ng-repeat="len in arrayTest.len track by $index">
    <p class="txt">index:{{$index}} length:{{len}} id:{{$id}}</p>
</li>

<li ng-repeat="len in arrayTest.len track by $index">
    <p class="txt">index:{{$index}} length:{{len}} id:{{$id}}</p>
    <p ng-repeat="n in len track by $index">web帳</p>
</li>

こんな感じでいけないかな。。

と思っていましたが、無理みたいですね。

そこで、再度配列を作成して回す事にしました。

更にlenの数だけ回す。

html

<li ng-repeat="len in arrayTest.len track by $index">
    <p class="txt">index:{{$index}} length:{{len}} id:{{$id}}</p>
    <p ng-repeat="n in arrayPush(len) track by $index">web帳</p>
</li>

main.js

$scope.arrayPush = function(num) {
    var i, o = '', val = [];
    for (i = 0; i < num; i++) {
        val.push(o);
    }
    return val;
};

こんな感じで。

すると、上手くいきました。

ng-class 複数

これまた頻繁に利用するディレクティブのng-class。

<li ng-class="{clear:cleared}" ng-repeat="list in statusList"></li>
<p ng-class="{lock: (status == 'locked')}"></p>

こんな感じで使ったりしますが、

カンマ区切りや配列の指定で複数指定も可能となっております。

html

<p ng-class="{on:flag, off:!flag}" ng-click="flagChange()"></p>

main.js

$scope.flag = false;

$scope.flagChange = function() {
    $scope.flag = !$scope.flag;
};

また、複数指定の場合配列での指定も可能です。

html

<p ng-class="[classSelected(),classSet()]" ng-click="flagChange()"></p>

main.js

$scope.flag = false;

$scope.classSelected = function() {
    if($scope.flag) {
        return 'test01';
    }
};
$scope.classSet = function() {
    return 'test02';
};

yeomanでサクっと環境構築

これらのAngularJSをサクっと使いたい場合はYeomanを使って構築すると良いでしょう。

宜しければこちらを参考に。

Yeoman フロントエンドビルドツール「Yeoman」で サクっとAngularJS 雛形作成

 

前回の記事一部抜粋

準備 (インストール)

まずは、YeomanでAngularJSを始めるのに必要なYeomanGruntBowerをインストールします。

npm install -g yo grunt-cli bower

次に、YeomanでAngullarJSやAngularJSのコントローラーなどのひな形を生成するジェネレーターをインストールします。

npm install -g generator-angular

他にもいろいろなジェネレーターがあり、検索は npm search generator で検索することが可能です。

Sassを使用する場合はCompassの インストールが必要になりますのでインストールしておきましょう。

gem install compass

AngularJSのひな形作成

インストールが完了しましたら、プロジェクトのディレクトリに移動。

yo コマンドを使ってひな形を生成します。

yo <generator> [arguments] [--help]

yo を入力すると対話式に以下の様な感じでコマンドを実行することが可能となります。

今回は、AngularJS のプロジェクトを作成しますので、以下のコマンドを入力。

yo angular APP_NAME

APP_NAMEは任意のアプリネームを入力。

しかし、このままだとminify時にエラーが出てしまうので、以下のコマンドで入力。

yo angular --minsafe

このように、–minsafeオプションを使用することによって、minify時にエラーが出るということがなくなります。

コマンドを実行するとBootstrapを使うか、AngularJSの各種モジュールを使うか等

聞かれるのでプロジェクト合わせて Yes/Noを 選択してください。

 

それではまた。

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US