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

Archives Details

超便利!Angularjs を使ってみました。

JavaScript

2013.12.06

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

AngularJS 公式サイト

http://angularjs.org

新たな、なんたらjsになるのですが、これまた超便利な事になっております。

何はともあれ公式サイトに記載されているサンプルのソースを試してみることに。

あら、不思議!インタラクティブでテキストが表示するのが確認できます。

このAngularJSとはなんぞや。

AngularJSは、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークで、

MVCアーキテクチャを取り入れてることによって、フロントでのMVCアプリケーション作成を容易にしてくれます。

では、色々と使ってみます。

使い方

まず、大事なのは、

<html ng-app>

の様に html要素にng-appを付与し、

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>

AngularJSファイルを読み込みます。

で、AngularJSで用意された、ng-model=”yourName” のような ng- 〇〇のデータ形式の属性を付与することによって

様々なAPIを利用することが出来ます。

「ng」は「AngularJS」の2、3文字目を取っているようです。

Controller

smartyのtplファイルの様にhtml自体がtplファイルの様に扱うことが可能となってきます。

controllerとして扱うjsファイル、main.jsファイルを作成します。

<script src="main.js"></script>

main.js

var mainCtrl = function($scope) {
	$scope.users = [
		{"name": "takayama", "age": 35},
		{"name": "nakata", "age": 25},
		{"name": "tokio", "age": 15}
	];
}

ユーザーの情報が入ったscriptの作成を行います。

このように記述することによって、$scopeに追加したプロパティ等をhtml側で扱うことが可能となります。

html側で変数スコープを扱う場合は「{」の二重閉じで扱う事が基本となっております。

{{}}

ng-controllerでどのcontrollerをどこで使用するか指定をします。

<div ng-controller="mainCtrl">
    <p>{{users.length}}人</p>
</div>

そのブロックで、main.jsの$scopeに追加したプロパティを指定することによって表示ができます。

上記の指定は要素数の指定となります。

と表示しているのが確認出来るかと思います。

ループ

サンプルソース記載されているように

ng-repeat="todo in todos"

の様に、 ng-repeat=”〇〇 in 〇〇”で回す事が可能となります。

今回、このようにして、

<ul>
    <li ng-repeat="user in users">{{user.name}}:{{user.age}}歳</li>
</ul>

名前と年齢を表示。

といった感じです。

Filtering

AngularJSで便利な機能として、|演算子を用いてフィルタを追加することが可能となっております。

{{user.name|uppercase}}

のように |に続いて uppercaseと記述すると、

のように大文字に変換したり、

数字に関しては、

{{user.age|number:2}}

numberの後に「:」数字で、下何桁表示なども可能となっております。

また、numberに関しては、付与することによって自動的に「,」を付与するようにもなっております。

{{10 * 200|number}}

ループでのフィルタ

先程のループの記述の部分でもフィルタを付与することができます。

limitTo

<li ng-repeat="user in users|limitTo:2">

orderBy

<li ng-repeat="user in users|orderBy:'age'">

<li ng-repeat="user in users|orderBy:'-age'">

orderBy + limitTo

<li ng-repeat="user in users|orderBy:'age'|limitTo:2">

テキスト入力によるフィルター

<p><input type="text" ng-model="query"></p>
<ul>
    <li ng-repeat="user in users|filter:query">{{user.name}}:{{user.age}}歳</li>
</ul>

プロパティ等の指定フィルタ
<p><input type="text" ng-model="query.name"></p>

また、{{$index}} でindex番号、{{$first}}で一番目か、 {{$last}}で最後か、 {{$middle}}で中間(first&last以外)であるかどうかも判別出来たりします。

<li ng-repeat="user in users|filter:query">
   {{$index}} {{$first}} {{$last}} {{$middle}} {{user.name}}:{{user.age}}歳
</li>

また、ng-class-even=”‘” ng-class-odd=”” で奇数偶数にクラスを振り分けることも可能です。

css

.even { color: #f00; }

html

<li ng-repeat="user in users|filter:query" ng-class-even="'even'">

formパーツ作成

Angularjsはformパーツを作成する際も便利な機能が沢山あります。

formに 「ng-sumit」を付与することによって、submit後に関数を実行することが出来ます。

<form name="" ng-submit="userAdd()"></form>

script

var mainCtrl = function($scope) {
  $scope.userAdd = function() {
    alert("submitされたよ!");
  }
}

また、input要素には「ng-model」を付与することによってmodelを扱うことが出来ます。

<div ng-controller="mainCtrl">
    <form name="userData" ng-submit="userAdd()">
        <p>名前:<input type="text" name="name" ng-model="user.name"></p>
        <p>年齢:<input type="number" name="age" ng-model="user.age"></p>
        <p><input type="submit" name="userDataAdd" value="完了"></p>
    </form>
    <pre>{{user|json}}</pre>
</div>
{{user|json}}

でインタラクティブに入力確認のjsonを表示を表示することが出来ます。

エラー表示

Angularjsはエラー表示も容易に表示する事が出来ます。

<form novalidate name="" ng-submit="userAdd()">

formに「novalidate」を付与し、html5独自のvalidateを無効化します。

入力必須項目設定

requiredを付与することによって入力必須項目として扱えます。

<input type="text" name="name" ng-model="user.name" required>

最低文字数

ng-minlength=""

最高文字数

ng-maxlength=""

要素表示

ng-show=""

ng-showに$errorの種類を指定することによって、それぞれのエラーを表示する事が出来ます。

ng-show="inputname.$error.エラー種類"
<form novalidate name="userData" ng-submit="userAdd()">
    <p>名前:<input type="text" name="name" ng-model="user.name" required ng-minlength="2" ng-maxlength="5">
        <span ng-show="userData.name.$error.required">入力必須項目です。</span>
        <span ng-show="userData.name.$error.minlength">文字数が少ないです。</span>
        <span ng-show="userData.name.$error.maxlength">文字数が多いです。</span> 
    </p>
    <p>年齢:<input type="number" name="age" ng-model="user.age"></p>
    <p><input type="submit" name="userDataAdd" value="完了"></p>
</form>

その他、

$error.email
$error.url

等で、emailやurlのvalidateを行ってくれます。

checkbox

checkboxでは、ng-true-value=”” ng-false-value=””等でチェックされた際にvalueを与えることも出来ます。

<input type="checkbox" ng-model="yesno" ng-true-value="YES" ng-false-value="NO">
<pre>{{yesno|json}}</pre>

radio

radioボタンでは ng-modelを合わせることによって

はい:<input type="radio" ng-model="yesno" value="はい"><br>
 いいえ:<input type="radio" ng-model="yesno" value="いいえ">
{{yesno|json}}

また、入力文字数のカウント等も容易に実装が可能となっております。

<textarea ng-model="txt" ng-maxlength="50"></textarea>{{50 - txt.length}}
select

select要素のoptionの生成も容易に行うことが出来ます。

<select ng-model="color" ng-options="color for color in ['blue','red','orange']"></select>

このようにcontrollerを使わず、view側でoptionを複数生成することも出来ます。

また、デフォルトで選択させたい場合は「ng-init」の指定で行うことが可能となっております。

ng-init="color='red'"

ラベル等をoptionに付けたい場合は、

ng-options="'色:' + color for color in ['blue','red','orange']"

等、文字列を付けることも可能となっております。

disable

その他、よく利用するdisable 表現も容易に実装が可能となっております。

チェック: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">ボタン</button>

チェックを入れるとボタンがdisableとなり押せなくなります。

その他、フォーカスされたら実行する ng-focusや

<form novalidate name="" ng-submit="">
    <input type="text" ng-model="txt" ng-focus="scope.txt = 'フォーカスされました。'">
</form>
<pre>{{scope.txt|json}}</pre>

クリックされると実行する ng-clickなど

<button ng-click="count = count + 1" ng-init="count=0">Increment</button>
count: {{count}}

と便利なAPIが沢山あります。

詳しくはこちらのAngularJS API Docsを参考にしてください。

http://docs.angularjs.org/api/

最後に

このように容易に便利な機能を使うことが可能となっておりますが、使いどころも考えないといけないと思います。

 ちょっとしたwebサイト等で使用する場合等では、特に問題ないかと思いますが、大規模なwebアプリケーション等であまり考えず、容易に使えるからと言い導入し、便利な機能に頼りすぎたが故に、管理性、パフォーマンス等を落としてしまっては元も子もありません。

昨今では、sass,compass,grant,etc..とフロントでも便利フレームワークが沢山登場しておりますが、本来適したアーキテクチャを理解したうえで、それぞれのコンテンツにあったフレームワークを導入し利用していくことが大事かと思います。

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