You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
All slide content and descriptions are owned by their creators.
動機 Angular(2 or 4)で開発中のプロダクト(SPA)が重い JS の肥大化 起動が遅い パフォーマンスチューンしたい で、みんないろいろ調べると思うけど… AOT コンパイルとか module の最適化とか手段はいろいろあるのはわかった が、ブログエントリを読んで今開発中のプロダクトに自分で解決策を注入するのが大変 サマリ 対工数効果が高い部分に絞ってパフォーマンスチューンできる、「これさえやればOK!」みたいな進研ゼミ的マニュアルを作った(半ば覚え書きだけど) 平均起動時間1は84%減 4000msec超 -> 640ms2 JS ファイルサイズ3は23%減 2770kb -> 2153kb (Parsed Size) 最適化後の Gziped Size は 393.47kb 前提 この記事は、AngularClass/angular-starter を使ったプロダクトで実
今回はAngularのRouterを使って画面遷移をやります。ログイン画面からメニュー画面に遷移するサンプルをやります。 名前とパスワードが等しければログインOKでメニュー画面に遷移します。いきなりメニュー画面に アクセスできてしまうので、実際のログイン認証とは程遠いのですが、あくまでも画面遷移のサンプルとして見て下さい。 Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。 プロジェクト作成 Angular CLIでプロジェクトとログインとメニューのコンポーネントを作成します。 プロジェクト作成時は--routingオプションを付けて下さい。 ng new プロジェクト名 --routing cd プロジェクト名 ng generate component login ng generate component menu ng generate
import { Injectable } from '@angular/core'; import { Http } from '@angular/http' import { Observable } from 'rxjs' @Injectable() export class HogeService { constructor(private http: Http) { } // 並列に実行してすべて完了したら結果をlogを出力するサンプル sample1() { let urls = [ "http://itunes.apple.com/jp/rss/newapplications/limit=10/json", "http://itunes.apple.com/jp/rss/newfreeapplications/limit=10/json", "http://itunes.ap
Angular2でモーダルを自作したメモ。 要件: Angular以外のライブラリには頼らない モーダルを開く時はServiceとして扱いたい モーダルの内側はComponentとして開発したい モーダルを閉じた場合、Promise(or Observable)をresolveしたい。 要するに、下記のようなコードを書きたいのだ。 import { Component , Input } from "@angular/core"; import { ModalContext } from "./modal"; @Component({ selector: "greeting", template: ` <div> <section> <input [(ngModel)]="message" placeholder="Message"> </section> <footer> <button
import {ComponentFixture, TestBed, async, ComponentFixtureAutoDetect,} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {DebugElement} from '@angular/core'; import {AppComponent} from './app.component'; // describeでテストSuiteを作成 describe('AppComponentのテスト', () => { // テストの中のAppComponent let comp: AppComponent; // ComponentFixtureは、 componentのインスタンスそのものとcomponentのDOM
最近ようやく Angular & TypeScript でソースコードを書き始めました。型のおかげでどのような値が入る変数なのか推測しやすくなり、とても便利です。 さらに angular-cli を使うとターミナル上でプロジェクトやコンポーネントの雛形を作る事ができるため、同じようなコードを何度も繰り返し書かなくても良くなりました。 たったの3行で Angular のアプリケーションが動き出しブラウザに Welcome to app!! のテキストが表示されます。 何がどう動いているのか不思議に思いませんか? 今回の記事は angular-cli のコマンドと設定を元に Angular + TypeScript のプロジェクトがブラウザ上で動作するまでに何が起こっているのかを順に解説していきます。 2017/07/21 追記 タイトルを Angular2 として公開していましたが、現在の最
How to animate your App Router transitions using the new animation features in Angular thedotisblackFew months ago I shared with you an experimental technique to animate Router transitions. Since then there have been few releases introducing new features. Today we can achieve the same results more elegantly and using less code. Let’s see how we can use them to create transitions never seen before!
こんにちわ、メトロノームかわかみ(@saruyama_monki)です。 Angularアドベントカレンダーの7日目は、WebStromとAngular CLIを使ってAngular2アプリケーション作ることを解説します。 WebStrom 2016.3について WebStormについての紹介は割愛させて頂きますが有料のIDEになります。 11月14日にバージョン2016.3のアップデードが入りまして、Angular CLIが使えるようになりました。 WebStormは、他の製品(PhpStorm、RubyMineなど)にも梱包されておりますので同じように使えます。 有料は。。。と思われる方は、まずは30日のFree Trial版を使ってみて下さい。プログラミングがもっともっと好きになると思います。 Angular2プロジェクトの作成 WebStromを立ち上げますと、プロジェクトの作成画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く