HNPWA
A spiritual successor to TodoMVC TodoMVC has helped thousands of developers select an MV* framework for their JavaScript applications. However, the web ecosystem has evolved in the past few years allowing us to build powerful applications using modern browser capabilities. To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular Java
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita
#はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 #対象バージョン Jest:22.0.4 Re
AngularJS開発TIPS（前編） - IDCF テックブログ
こんにちは。UX開発部の樋代です。 今回はSingle Page Application をAngularJSで構築する際のポイントを紹介します。AngularJSをプロジェクトに導入を検討している方向けにまとめました。 （引用）https://angularjs.org/ JavaScriptのフレームワーク「AngularJS」は機能が豊富な分、実際プロジェクトに導入する際には機能の選定に悩む部分があると思います。IDCフロンティアのサービスでは、AngularJSを、コンテンツキャッシュ、オブジェクトストレージ、RDS、Yahoo!ビッグデータインサイトなどで利用しています。 ※2016年10月1日より、サービス名称が「Yahoo!ビッグデータインサイト」から「トレジャーデータサービス by IDCF」に変更となっております。 AngularJSには公式blogでも紹介されているコー
Angular 2 コンポーネント指向の第一歩 // Speaker Deck
All slide content and descriptions are owned by their creators.
AngularJS Project Structure
Surely this is a solved problem I’ve been programming professionally for about 6-7 years now and I’ve used my fair share of languages/frameworks/stacks. My most recent job (as well as some of my current freelance work) has led me down the AngularJS/NodeJS path. Do not get me wrong - I love using both of these in my web development work. NodeJS with Express is quite nice for writing basic APIs and
[日本語訳] Angular 2 Component Styles
Original: Component Styles - ts Written by: angular.io Translated at: 04/15/2016 コンポーネントのスタイル Angular 2のアプリケーションは標準のCSSによってスタイリングすることができます。 つまり、CSSのスタイルシートやセレクタ、ルールやメディアクエリなどについて知っていることをそのままAngular 2のアプリケーションに適用できます。 さらに、Angular 2はCSSのスタイルシートをモジュール化し、コンポーネントに同梱することが可能です。 この章ではどのようにして コンポーネントスタイル を読み込み、適用するかについて解説します。 コンポーネントスタイルを使う Angular 2のコンポーネントを書くとき、HTMLのテンプレートだけでなく、CSSのスタイルも決めるでしょう。 コンポーネントの
A Way for Happy Angular Days
TOPGATE, Inc. I 💖 Google / 🍺 / Anime TypeScript/Golang Angular2 Info https://ng2-info.github.io Agenda FAQ and Misunderstanding Angular 2 Fundamental Things to Learn Angular 2 FAQ and Misunderstanding the Fact Q. "AngularJS 2?" "Angular JS 2" "Angular" contains ... Framework library Browser/Web Worker/Electron/Native/... Server-side CLI ... "Angular" = Platform Q. "I MUST learn TypeScript?" yo
20160305 フロントエンドカンファレンスのメモ - Qiita
すごく良かった！！ まとめると TypeScript, Angular2, BEM, Sass, gulp 使って開発しろっていうカンファレンスでした。 Are you a Designer or an Engineer? twitter.com/yamasy1549 http://yamasy.info NIT, Akashi College 2nd grade 17歳 スライド http://www.slideshare.net/yamasy1549s/are-you-a-designer-or-an-engineer ハッカソンに参加 はじめはコード書けなかったので発表資料とか作っていた。イラレに詳しくなった ランディングページとか作るようになった rubygirlに参加 インターンでお仕事でコード書くようになって人に見られるコードを意識するようになった はじめはjQueryとか今は
Angular 2で作った最初のアプリの事後分析 : 使ってわかったAngular 2の長所と短所 | POSTD
最近、Angular 2を使ってWebアプリ作成の手伝いをする機会がありました。このフレームワークの複雑さに戸惑いもありましたが、Angular 2は間違いなくすばらしいものです。この事後分析では私がAngular 2のフレームワークを使った時に感じたいい面と悪い面の両方を掘り下げていくことにします。 Angular 2 Angularは携帯電話やデスクトップのWebアプリケーションを作成するための開発プラットホーム。 https://angular.io/ Angular 2＋リアクティブプログラミング＝❤ 私はすでに、Angular 1アプリケーション ではRxJSをかなり使っていました。特に、サービス間のメッセージ・バスを行うアプリを作成する時です。Angular 2はObservableを非常によくサポートしているので、アプリ全体にリアクティブプログラミングを取り入れることができ、
Angular 2でCSSアニメーションを書く - Qiita
どうも、らこです。 Angular 2の勉強会で出た質問でアニメーションのことがあったので、試してみたら問題なく動いたので使い方を紹介します。 はじめに Angular 2のメインパッケージに含まれているのはangular2/animateモジュールです。これはもう実用段階のAPIです。 それとは別に、ngAnimateというプロジェクトも動いており、これはアノテーションベースでアニメーションを宣言的に記述できるようにしようというものです。まだ全然出来てないのでいまは使えませんがデザインドキュメントはみることができます。 Animations for Angular 2 Beta - Google ドキュメント 今回紹介するのは前者の今使える方です。 完成形 マウスオーバーで背景を指定された色に変更するアニメーションが動くディレクティブを書きました。 いろいろごちゃ混ぜですが動くサンプルは
日本語訳：Angular 2 Change Detection Explained - Qiita
こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日本語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日本語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016 シングルページアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。 このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」（通称デブサミ）のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。 注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気
Using Page Objects in AngularJS Protractor
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
【AngularJS】CSSのfilterを組み合わせた画像の遅延読み込みで体感速度を向上させる - 人生dat落ち
運用しているサービスの利用画面がこんなんだった。 そんなわけで、前から試そうと思っていた極小の画像にCSSのfilterを適用し、大きな画像が読み終えたら差し替える手法を適用した。 遅延読み込み用のぼやけた画像 - Weblog - Hail2u.net The “Blur Up” Technique for Loading Background Images | CSS-Tricks filterの使い方の説明はコードと結果画面が一緒にまとめられているこの記事が分かり易い。 filter | CSS-Tricks 実装画像の読み込みが終わったタイミングで画像の差し替えおよびfilter効果の切り替えを行います。 app.jade .item__image(from-img-src='data/thumbnails/{{item.thumbnailFileName}}', to-img-s
「Angular 1.5」がリリース。コンポーネントディレクティブ機能の追加などで、Angular 2への移行を容易に
「Angular 1.5」がリリース。コンポーネントディレクティブ機能の追加などで、Angular 2への移行を容易に オープンソースのJavaScriptフレームワークとして知られるAngularJSの最新バージョン「Angular 1.5」がリリースされました。 Angular 1.5の主な開発テーマは「The primary theme for this release was to improve the upgrade path to Angular 2.」（このリリースにおける主な開発テーマは、Angular 2へのアップグレードパスを改善することだった）と説明されています。 Angular 1.5ではコンポーネントベースでのアプリケーション開発を容易にするための「コンポーネントディレクティブ」の定義機能が追加され、今年リリースされる見通しのAngular 2に近い構造でアプリ
Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる
前回に引き続き、Chart.jsのTipsです。 Chart.jsを使いグラフを表示してみる 今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。 Angular.jsの基本的な使い方は割愛します。 ちなみに今回使用するバージョンは下記のとおりです。 Angular JS v1.4.9 Chart.js v1.0.2 Angular.jsでフォームをバインドする まずはangular.min.jsを下記サイトよりダウンロードしてきましょう。 Angular JS CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。 (今回のデモを作る程度でしたら、CDNでも問題ありません。) コントローラー&フォームバインドの簡単なコードが下記です。 <!DOCTYPE html> <
その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
こんにちは、らこです。AngularJSのバージョン1.5.0がリリースされましたね！ コードネームは ennoblement-facilitation、ざっくり訳すなら「高尚化促進」でしょうか。コンポーネント志向の「高尚」なアプリケーション設計への移行をサポートするバージョンだということでしょう。 1.5.0ではcomponentの追加をメインに、Angular2へのスムーズな移行を行うための足がかりとなるアップデートです。いい機会なので、 今の自分のAngularJSの使い方がどれくらい古いのか をチェックし、どのようにモダンにしていけばいいのかを知っておきましょう。 ちなみに、1.4までに関しては AngularJSモダンプラクティス - Qiita を参考にするとよいでしょう。 このモダンプラクティスに従ったコードになっていればcomponent()対応はあっという間のはずです。
AngularJSで動的生成したselectタグに初期値を設定する - Qiita
<html ng-app="mine"> <head> <script src="angular.min.js"></script> <script src="sample.js"></script> </head> <body> <select ng-model="point"> <!-- ng-repeat を使って option タグを動的に生成している --> <option ng-repeat="value in values" value="{{value}}">{{value | number:1}} pt</option> </select> </body> </html> angular .module('mine', []) .run(function($rootScope) { var values = []; for (var i=0; i<=1; i+=0.1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第64回 HTML5とか勉強会 〜 Angular特集 〜
New Features in Angular 1.5
