Angular2のコンポーネント

Angular2でコンポーネントapp.modules.tsにコンポーネントを登録しておけば利用できるようになる。

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <my-h1 myText="h1"></my-h1>
    <my-h2 myText="h2"></my-h2>
  `
})
export class AppComponent {

}

h1.component.ts

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'my-h1',
  template: `
    <h1>{{myText}}</h1>
  `
})
export class h1Component {
  @Input() myText:String;
}

h2.component.ts

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'my-h2',
  template: `
    <h2>{{myText}}</h2>
  `
})
export class h2Component {
  @Input() myText:String;
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { h1Component } from './h1.component';
import { h2Component } from './h2.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  declarations: [
    AppComponent,
    h1Component,
    h2Component
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular2でただ追加するだけのTODOリスト

Angular2でただTODOを1行ずつ追加するだけのTODOリスト。とりあえずngModelを入力フォームに設定したけど直接取得したい。

import { Component } from '@angular/core';
 
export class Hero {
  id: number;
  name: string;
}
 
const HEROES: Hero[] = [];
 
@Component({
  selector: 'app-root',
  styles: [`
  input[type='button']{
    background:#CCC;
  }
  input[type='text']{
    border:1px solid #CCC;
  }
  `],
  template:`
    <h1>{{title}}</h1>
    <ul>
      <li *ngFor="let hero of heroes">
        {{hero.id}} : {{hero.name}}
      </li>
    </ul>
    <div>
      <div>
        <input type="text" [(ngModel)]="addText">
        <input type="button" value="追加" (click)="onClick()">
      </div>
    </div>
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  addText: string;
  onClick(){
    if(!this.addText)return false;
    this.heroes.push({
      id: this.heroes.length+1,
      name: this.addText
    });
    this.addText='';
  }
}

ng serveでローカルサーバーが立ち上がらない

Angular2の利用でng serveで開発環境が立ち上がるようにしたのに以下のエラーがでて動かなくなった。

getaddrinfo ENOTFOUND localhost
Error: getaddrinfo ENOTFOUND localhost
    at errnoException (dns.js:27:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:26)

立ち上がる際に以下のようにオプションを指定してあげたらちゃんと立ち上がるようになりました。

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

Angular2の利用

Angular2を触らなくなったのでとりあず環境構築から。

angular-cli

Angular2ではオフィシャルなビルドツールとしてangular-cliが提供されているのでこちらを利用して環境構築を構築するらしい。

まずはインストール

npm install -g angular-cli

これでngコマンドが使えるようになったのでng new アプリ名で簡単に環境を構築できる。

ng new myApp

Successfully initialized git.Installing packages for tooling via npm.と初期化に成功したようなので

以下のコマンドでアプリに移動してnpmのインストールを行う。

cd myApp
npm install

あとはng serveでサーバーを立ち上げれば、http://localhost:4200で表示を確認できる

ng serve

myApp/src/app/app.component.tsの内容を修正してリーロドするとブラウザに修正内容が反映されいるので環境の構築はひとまずこれでOKっぽい。

export class AppComponent {
  title = 'app works!！！';
}

アップデート

上記のコードでインストールされた angular-cliは古いので以下のコマンドでアップデートすることができます。

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

AngularJSのng-bindとng-bind-template

AngularJSのng-bindはJS式をng-bind-templateはAngularを属性に記述できます。(下記の記述は共に同じ意味)

<p ng-bind-template="{{name1}}は{{name2}}です"></p>
<p ng-bind="name1+'は'+name2+'です'"></p>

AngularJSのng-bind-htmlでHTMLを出力

AngularJSではHTMLのデータバインディングにng-bind-htmlを利用するがそのままでは利用できない。angular-sanitizeをあらかじめ読み込んでおき、依存機能にngSanitizeを含めておく必要がある。

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

<div ng-controller="MyController">
	<div ng-bind-html="myData"></div>
</div>

angular.module("myApp",[ 'ngSanitize' ]).controller('MyController',["$scope",function($scope){
    $scope.myData = "<b>World</b>";
}]);

もしくは$sce.trustAsHtml()を利用して害がないことを明示的に表現しなくてはいけない。

angular.module("myApp",[]).controller('MyController',["$scope",'$sce',function($scope,$sce){
    $scope.myData = $sce.trustAsHtml("World");
}]);

AngularJSのng-cloakとデフォルトCSS

AngularJSは読み込み時に以下のCSSを自動設定します。

ng-cloakはng-bindと同じく初期のチラつき対策に利用され、AngularJSが実行されたタイミングでこの属性が取り除かれて表示することが可能になります。

<style type="text/css">
@charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}
ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}
</style>

AngularJSの$timeoutで時間差処理

AngularJSではsetTimeoutが利用できないため$timeoutを利用して時間差処理を設定する

angular.module("myApp",[]).controller('MyController',["$scope","$timeout",function($scope,$timeout){
    $timeout(function(){
        $scope.myName = "World";
    },1000);
}]);

AngularJSのng-bindで初期値を設定

ng-bindで要素の初期値を指定しておくとAngularJS実行後に要素の中身が挿入され一瞬のチラツキがなくなります。

angular.module("myApp",[]).controller('MyController',["$scope",function($scope){
    $scope.myName = "World";
}]);

<div ng-controller="MyController">
	<div ng-bind="'hello '+myName+'!'"></div>
</div>

ng-strict-diと配列アノテーション

AngularJSではng-strict-di属性をng-app属性と同じ要素に付与することで配列アノテーションを強制することができる。

<html lang="en" ng-app="myApp" ng-strict-di>

以下の様なコールバックの引数に名前を指定するのはだめで、

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',function($scope){
    $scope.msg = "こんにちは　こんにちは こんにんちは";
});

配列アノテーションを利用して引数を固定しておく。

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',["$scope",function($scope){
    $scope.msg = "こんにちは　こんにちは こんにんちは";
}]);

また、以下のように$injectを利用して配列アノテーションを実行してもよい。

var myApp = angular.module('myApp',[]);
var MyController = function($scope){
    $scope.msg = "こんにちは　こんにちは こんにんちは";
};
MyController.$inject = ["$scope"];
myApp.controller('MyController',MyController);

AngularJSでjqLiteを利用する

AngularJSにはjQueryの簡易版jqLiteが組み込まれており、jQueryの一部機能が利用できます。

angular.element()で対象の要素を指定するのですが、querySelectorAll()を利用することでCSSのセレクタが利用できます。

angular.element(document.querySelectorAll("a")).css("color","red")

利用できるjQueryの機能は以下のとおり

• addClass()


• after()


• append()


• attr()


• bind() - 名前空間やセレクター、イベントデータは未サポート


• children() - セレクターは未サポート


• clone()


• contents()


• css()


• data()


• empty()


• eq()


• find() - タグ名の検索は未サポート


• hasClass()


• html()


• next() - セレクターは未サポート


• on() - 名前空間やセレクター、イベントデータは未サポート


• off() - 名前空間やセレクターは未サポート


• one() - 名前空間やセレクターは未サポート


• parent() - セレクターは未サポート


• prepend()


• prop()


• ready()


• remove()


• removeAttr()


• removeClass()


• removeData()


• replaceWith()


• text()


• toggleClass()


• triggerHandler() - Passes a dummy event object to handlers.


• unbind() - 名前空間は未サポート


• val()


• wrap()

AngularJSでタブパネル

タブパネルシリーズをAngularJSで。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
a.active{
    font-weight:bold;
}
</style>
</head>
<body>
<div ng-app="tabPanel" ng-controller="tabPanelCtrl" ng-click="tabChange($event)">
<a href="#tab1" ng-class="{'active':tabSelected=='#tab1'}">tab1</a>
<a href="#tab2" ng-class="{'active':tabSelected=='#tab2'}">tab2</a>
<a href="#tab3" ng-class="{'active':tabSelected=='#tab3'}">tab3</a>
<div id="tab1" class="ng-hide" ng-show="tabSelected=='#tab1'">CSS1</div>
<div id="tab2" class="ng-hide" ng-show="tabSelected=='#tab2'">CSS2</div>
<div id="tab3" class="ng-hide" ng-show="tabSelected=='#tab3'">CSS3</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module("tabPanel",[]);
app.controller("tabPanelCtrl",function($scope){
    $scope.tabSelected = "#tab1";
    $scope.tabChange = function(e){
        if (e.target.nodeName === 'A') {
            $scope.tabSelected = e.target.getAttribute("href");
            e.preventDefault();
        }
    }
})
</script>
</body>
</html>

AngularJS1.2でng-bind-html-unsafe属性が使えない

AngularJS1.2でng-bind-html-unsafe属性が廃止されたらしく使えない。じゃあどうやってHTMLを突っ込むかというと、この記事によると以下のdirectiveを追加すると利用できるようになるみたい。

app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
    return function( $scope, $element, $attrs ) {
        var compile = function( newHTML ) {
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        };
        
        var htmlName = $attrs.bindHtmlUnsafe;
        
        $scope.$watch(htmlName, function( newHTML ) {
            if(!newHTML) return;
            compile(newHTML);
        });
   
    };
});

AngularJSのスコープ

ng-appのみを指定した場合グローバルにスコープが取られるが、名前空間を指定することでスコープを限定することができる。module()でスコープが指定できる

var app = angular.module("Hello",[]);
app.controller("HelloCtrl",function($scope){
	$scope.hello = "world";
});

<body ng-app="Hello">
	<div ng-controller="HelloCtrl">
		<p>{{hello}}</p>
	</div>
</body>

AngularJSのng属性の書き方

AngularJSではng属性に複数の記述方法が用意されている

<input type="text" ng-model="text">
<input type="text" ng:model="text">
<input type="text" data-ng-model="text">
<input type="text" x-ng-model="text">

原理向けにカスタムデータ属性まで用意されているのが素晴らしい。

AngularJSで表示非表示を切り分ける

AngularJSで表示非表示を切り分けるにはng-hide属性やng-show属性を利用します。class="ng-hide"を指定するとひとまず非表示になるのであとはモデルの値によって表示を切り分けます。

<div class="ng-hide">show</div>

モデルの値が文字列の場合は属性にモデルを引き渡すだけ。

function todosCtrl($scope){
  $scope.todos = "aa";
}

<div ng-show="todo" class="ng-hide">show</div>

モデルの値が配列の場合はmodel.lengthで条件を指定できる。(配列に値があるかどうか)

function todosCtrl($scope){
  $scope.todos = ["aa","bb"];
}

<div ng-show="todos.length" class="ng-hide">show</div>

ちょっとはまったけどオブジェクトの場合はObject.keys(model).lengthで判定できる。ただし$scope.Object = Object;としてスコープにObjectオブジェクトを受け渡さないとダメ。

function todosCtrl($scope){
  $scope.Object = Object;
  $scope.todos = {"aa":"aa","bb":"bb"};
}

<div ng-show="Object.keys(todos).length > 0" class="ng-hide">show</div>

AngularJSでeventオブジェクトを取得

ng-clickやng-keyupイベントの指定時に$eventを引数に渡してあげればeventオブジェクトを取得できます。

以下のサンプルはToDoリストにエンターを押して追加するパターン

function todosCtrl($scope){
  $scope.todos=[];
  $scope.addTodo = function(e){
    if(e.keyCode !=13)return false;
    $scope.todos.push($scope.add_todo);
    $scope.add_todo="";
  }
}

<body ng-app>
  <div ng-controller="todosCtrl">
    <input type="text" ng-model="add_todo" ng-keyup="addTodo($event)">
    <ul>
      <li  ng-repeat="todo in todos  track by $index">{{todo}}</li>
    </ul>
  <div>
</body>

AngularJSのng-repeatでエラー

AngularJSで以下のようなコードでエラーが出た。

function todosCtrl($scope){
  $scope.todos=["aa","aa];
}

<ul>
	<li  ng-repeat="todo in todos">{{todo}}</li>
</ul>

エラー内容は以下のとおり。

Error: [ngRepeat:dupes]

エラーページを確認するとng-repeatは配列のvalueを元にループを回すので同じ値があるとエラーになるっぽい。ng-repeat指定時に「track by $index」を追加するとkeyを元にループを回すので大丈夫なようです。

<ul>
	<li  ng-repeat="todo in todos track by $index">{{todo}}</li>
</ul>