入門3日目の僕が感じたAngular 2のすごいところ - teratail blog
はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。 来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。 今までは主にフロントエンドを担当し，バックエンド，テストなどもサポートする形で開発していました。 少し期間が空いてしまいましたが，10/3(月)に開かれたAngular 2入門者の会でLTしました。 connpass.com Angular 2熟練者の方からAngular 2の良さや楽しさとアドバイスを色々教えていただき，今後もAngular 2を使って何かを作ってみたいと思いました。 そこで，今回はプロダクトに生かして行く上でこれはすごいと思ったところと，使ってみて良かったところの4点を入門者として紹介していきたいと思います。 更新が即座にされるサーバ環境がすごい 公式のチュートリアルを試してまずびっくり
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を非常によくサポートしているので、アプリ全体にリアクティブプログラミングを取り入れることができ、
サーバサイドエンジニアが 1年間まじめにSPAやってみた
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスクRead less
AngularJSの便利なツール20選 | POSTD
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
Angularとの2年間 ー これからAngularを使う人への薦め | POSTD
判決： まあまあ（でもないか） 一体何の話なのか？ 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは？ “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10月から引き続きAngularJSな日々を送っている先生です。 今回はAngularJSで作ったシングルページアプリケーション（以下SPA）をGoogle Analyticsでトラッキングさせたいと思います。 SPAでのトラッキング問題 Google Analyticsは、タグを埋め込むだけで勝手にトラッキングしてくれる手軽な解析ツールです。しかしAjaxやpushStateなどページ遷移を伴わないSPAでは、トップページしか解析されません。Analyticsではその対策として、任意のタイミングでトラッキングすることができる仕組みを持っています。 // ページビュー ga('send', 'pageview'); // イベントトラッキング ga('send', 'event', 'image1', 'clicked'); 参考：高度な設定 – ウェブ トラッキング（analytics.
AngularJS vs. Backbone.js vs. Ember.js
##5 Templating Angular and Ember include a template engine. Backbone, on the other hand, leaves it up to you to use the template engine of your choice. The best way to get a feeling of the different templating engines is a code sample, so let's dive in. We will show an example of formatting a list of items as HTML. ###5.1 AngularJS Angular's Templating engine is simply HTML with binding expression
AngularJSアプリケーションにHamlを導入するメモ - Qiita
// Generated on 2014-04-07 using generator-angular 0.7.1 'use strict'; // # Globbing // for performance reasons we're only matching one level down: // 'test/spec/{,*/}*.js' // use this if you want to recursively match all subfolders: // 'test/spec/**/*.js' module.exports = function (grunt) { // Load grunt tasks automatically require('load-grunt-tasks')(grunt); // Time how long tasks take. Can help
AngularJSでMVCプログラミングをはじめよう
対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 サンプルアプリケーションの概要 今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。 タスク（件名とメモ）を登録する画面 登録したタスク一覧を表示する画面 登録したタスクを参照する画面と、削除する為の画面 ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であ
MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
AngularJSアンチパターン集 - Qiita
（150522追記）本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
Angularリンク集 - albatrosary's blog
「Angularの資料で何か良いものは？」と聞かれることが多くなってきましたので、そしてAngular資料探しの手間を省くためにも、いつも使っているサイトリンクをまとめます。良い資料があったらこのブログを更新します。読む目安が欲しいというお話がありましたので「★」を付けます。「★」の付いてないものは必要に応じて目を通すと良いのではと思います（あくまでも目安です）。 ★ : まず読みましょう ★★ ： 少し慣れたら読もう ★★★ ：仕事で使うよ 学習順は YEOMANでAngularをインストールし触りながら Angular本家を見つつ Angular Style GuideやNinjaで理解を深める でしょうか（学び方は人それぞれですので）。何れにしても手を動かすのが最良です。 Angular 2 Angular is a development platform for building
「AngularJSリファレンス」という本を書きました - 廻る技術の覗き穴
金井さん(@can_i_do_web)と吉田さん(@teyosh)との共著でAngularJSリファレンスという書籍を執筆しました。 AngularJSリファレンス 作者: 池添明宏,金井健一,吉田徹生,丸山弘詩出版社/メーカー: インプレス発売日: 2014/09/05メディア: 単行本（ソフトカバー）この商品を含むブログを見る どのような本か？ この本はAngularJSの脱初心者〜中級者向けを目指して書きました。 公式ページのチュートリアルやドットインストールの入門講座をこなして、ある程度AngularJSを使えるようになった人が、その次に進みたいときに読むのに適していると思います。 また、AngularJSのソースコードを読まないと分からないような内容もいくつか書いているので、AngularJSを使い込んでいる人にも何かしらの新しい発見があるのではないかと思います。 本書はAngu
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち ng-conf 2014っていうイベントが1月にあったようですね。 YouTubeで動画が公開されている(でもすべてではない)ので助かります。とても勉強になりますね。ほんと、いい時代になったものです。 さて、Daniel ZenのTalkを見ました。AngularJSでモバイルアプリを作るために使えるライブラリがいっぱい紹介されていたのでメモしておきます。 PhoneGap まず、PhoneGap。 今では、Open Sourceなんですね。 http://cordova.apache.org/ 使ったことはないですが興味はあります。 一部ネイティブ関数にもアクセスできるようです。 http://en.wikipedia.org/wiki/Phonegap#Supported_platforms APNも使えるようです
AngularJS入門の巻２
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
『AngularJSを使用したゲーム開発』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。 今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。 ※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、1.2.16をベースに書かせていただきます。AngularJSとは https://angularjs.org/ Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。 同じような種類のフレームワークとして、Backbone.jsやKn
angularjs_array_checkbox_binding
プログラムの要件としては以下の通りです。 APIから上記のFruitsとUserを取得した結果に基づきビューを生成する。 User内のLikeFruitsはFruitsをマスタとしてチェックボックスを用いて更新する。 Userを受信した際にLikeFruitsに含まれていた値はチェック済みとする。 実装例 チェックボックスとのバインディング実装した例が以下になります。 Array Binding CheckBox 挙動としては以下のようになります。 チェック前 チェック後 チェックボックスと配列をバインディングする際に意識する点は二つあります。 一つはチェック状態をどのように評価するか。 もう一つはチェックのイベントでの挙動をどのようにするかです。 チェックの評価 今回の例ではチェックの評価は以下のように行っています。 <ul ng-repeat="(fruitId,fruitName)
noteをAngularJSで構築した話
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSではじめるJavaScriptフレームワーク開発スタイル一覧
APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita![APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9fc636e967f99baae4c06bcf831f24298d111876/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QVBJJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgyJTkyJTIwUmFpbHMlRTMlODAlODElRTMlODMlOTUlRTMlODMlQUQlRTMlODMlQjMlRTMlODMlODglRTMlODIlQTglRTMlODMlQjMlRTMlODMlODklRTMlODIlOTIlMjBBbmd1bGFySlMlMjAlRTMlODElQTclRTklOTYlOEIlRTclOTklQkElRTMlODElOTklRTMlODIlOEIlMjAlNUIlRTMlODElOUQlRTMlODElQUUlRTIlOTElQTIlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTZhYmM1ZTdmZmViOGNkZmVjYWNjOWVmYzI5NmNkNWVk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D85b92352a0a2cd80832f195df68f522b)
