2017年04月23日

angular cliで作ったプロジェクトでJSエラーが出る

Angular CLIでつくったプロジェクトを表示すると以下のようなエラーがでた。

Uncaught TypeError: Cannot read property 'apply' of undefined
at XMLHttpRequest.desc.get [as ontimeout] (zone.js:1265)
at XHRLocalObject.AbstractXHRObject._cleanup (abstract-xhr.js:149)
at XMLHttpRequest.xhr.onreadystatechange (abstract-xhr.js:125)
at XMLHttpRequest.wrapFn (zone.js:1230)
at ZoneDelegate.invokeTask (zone.js:398)
at Zone.runTask (zone.js:165)
at XMLHttpRequest.ZoneTask.invoke (zone.js:460)


以下のコマンドでzone.js@0.8.5をインストールしておけばよいです

npm install zone.js@0.8.5 --save


参考:html - Angular 2 - TypeError: Cannot read property 'apply' of undefined - Stack Overflow
posted by ねこまんま at 19:29 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年04月06日

Angular2でformControl' since it isn't a known property of 'input'とエラーが出た

Angular2でformControlを利用しようとすると「formControl' since it isn't a known property of 'input'」とエラーが出た。

ReactiveFormsModuleモジュールを読み込んでないと使えないらしい。

import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
imports : [
..
ReactiveFormsModule,
...
],
...
})
posted by ねこまんま at 14:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年03月07日

Angular2のloadChildrenでモジュールの遅延読み込みを行う

Angular2のloadChildrenを利用するとモジュールの遅延読み込みが可能になる。たまにしか読み込まれないモジュールなどは遅延読み込みの対象にしておこう続きを読む
posted by ねこまんま at 14:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月22日

ElementRef - @angular/core - Angular2

ElementRefを利用すると要素内のHTMLにアクセスできます。続きを読む
posted by ねこまんま at 22:08 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月15日

Angular 2のng2-dragulaでドラッグアンドドロップ

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-draguladragulaというドラッグアンドドロップ制御表のライブラリのOfficial Angular2 wrapper 。続きを読む
タグ:Angular 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月14日

Angular 2のDatePipe

Angular 2のdateパイプで日付のフォーマットを整理でき、DatePipeの引数に言語を指定すればその言語に対応した変換方式がりようできる。

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{ngDatePipeJp.transform(now, 'yMMdd (EEE) HHmm')}}</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
now = new Date();
ngDatePipeJp = new DatePipe('ja-JP');
}


これだと面倒くさいので独自のパイプdateJPを作成してみる。

date-jp.pipe.ts

import { Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateJP'})
export class DateJpPipe {
private dateJpPipe: DatePipe;
constructor() {
this.dateJpPipe = new DatePipe('ja-JP');
}
transform(date, format) {
return this.dateJpPipe.transform(date, format);
}
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {DateJpPipe} from './date-jp.pipe';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
DateJpPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{now| dateJP: 'yMMdd (EE) HHmm分'}}</p>
`
})
export class AppComponent {
now = new Date();
}


変換フォーマットが正直微妙なので下記のサイトを参考に曜日だけ日本語にするのがよいかと思う。

参考:DatePipe - ts - API - 公式リファレンス
参考:【Angular2】DatePipeの曜日だけ日本語にする【LiveDemoあり】 | Bucket.GIFT
タグ:Angular 2
posted by ねこまんま at 19:14 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月08日

Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティング続きを読む
タグ:Angular2
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月30日

Angular2のRouting

app.module.ts内などでRouterModuleを読み込み@NgModuleでimportsでルーティング設定を行います。

import { RouterModule }   from '@angular/router';

@NgModule({
...
imports: [
RouterModule.forRoot([
{
path: 'list',
component: ListComponent
},
{
path: 'detail',
component: DetailComponent
}
])
]
...
});


app.components.ts内の@Componentではrouter-outletタグで@NgModuleのpathがあった場合にcomponentがouter-outletタグに指定したコンポーネントが表示されます。

@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<router-outlet></router-outlet>
`
});
タグ:Angular2 routing
posted by ねこまんま at 17:27 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月20日

Angular2のサービス

Angular2のサービスに関しては「Angular2のDIを知る - Qiita」が詳しかった。

serviceは単純にデータ構造をかえすものにしておいて、providersに配列として登録、constructor(private fooService: FooService)みたいな感じで設定しておけばclass内からアクセスできるようになる。

myFoo.service.ts

export default class FooService {
say1(): string {
return "foo1";
}
say2(): string {
return "foo2";
}
}


app.component.ts

import { Component } from '@angular/core';
import FooService from "./myFoo.service";

@Component({
selector: 'my-app',
providers: [FooService],
template: `
<div>
<h1>{{name}}</h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent {
name:string;
constructor(private fooService: FooService) {
this.name = fooService.say1();
}
onClick(){
this.name = this.fooService.say2();
}
タグ:Angular2
posted by ねこまんま at 00:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月19日

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
posted by ねこまんま at 23:28 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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='';
}
}
タグ:Angular2
posted by ねこまんま at 21:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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

posted by ねこまんま at 20:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月16日

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
タグ:Angular2
posted by ねこまんま at 14:48 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2015年12月20日

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>
posted by ねこまんま at 22:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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
posted by ねこまんま at 18:44 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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
posted by ねこまんま at 18:31 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSの$timeoutで時間差処理

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

angular.module("myApp",[]).controller('MyController',["$scope","$timeout",function($scope,$timeout){
$timeout(function(){
$scope.myName = "World";
},1000);
}]);
タグ:AngularJS
posted by ねこまんま at 18:26 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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>
タグ:Angular
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2015年12月18日

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);

posted by ねこまんま at 13:47 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2014年03月15日

AngularJSでjqLiteを利用する

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

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

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


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

posted by ねこまんま at 17:54 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする