[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO
大阪オフィスのフロントエンド勉強会で使用したAngular+Firebaseハンズオンの資料を公開します。勉強用のサンプルアプリケーションとして活用していただければ幸いです。 どうも！大阪オフィスの西村祐二です。 大阪オフィスではフロントエンド勉強会を隔週で行っており、そこでAngular+Firebaseで作るTODOアプリケーションのハンズオン行ったのでその資料を公開します。 勉強のためのサンプルアプリケーションとしてお役に立てれば幸いです。 ゴール 下記のようなTODOアプリケーションを実装します。 主な機能として下記になります。 TODOの追加削除 Drag And DropでTODOを移動させてデータを更新 Googleアカウントでログイン・ログアウト TODO追加入力フォームのバリデーション バックエンドはFirebaseを利用しています。 利用するツール Angular An
![[社内ハンズオン資料] Angular+Firebaseで作るTODOアプリケーション | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e0940ba64874bd2343c7288634d9d170730b2e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F03%2Fangular9-eyecatch-1200x630-1.jpg)
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
[AngularJS] GUI 連打防止作戦 考察 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。( 挨拶 ) AngularJS 1.x 系 ( 1.3~ ) アプリケーションにおける、ボタンクリックや [Enter] キーの連打によって起こりうる事故を予防する手段についてまとめてみました。自分向けの備忘録的要素強めでお届けいたします。 余談ですが、英語でググるときには prevent double(multiple) submission といった単語を使用すると色々出てくるようです。 $httpProvider.interceptors の利用 想定ケースとしては XHR 処理に限定した話ですが、$http サービスのリクエストおよびレスポンスの前処理をフックするインターセプタを用意することで、通信中に GUI の操作を無効にさせるような共通処理を仕込むことが可能です。 angular-loading-bar や angular-block
![[AngularJS] GUI 連打防止作戦 考察 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/648e11f84f388126ccfdea056ad86ba379173295/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
AngularJSアプリ開発に役立つ小粒なライブラリ ～ ストレージ／イベント処理／入力値検証
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。 はじめに 本稿では、これまでの回では扱えなかった小粒な――しかし、アプリ開発には欠かせない以下のライブラリを紹介します。 ngStorage：Web Storageを操作するためのサービス UI Event：AngularJS標準で対応していないイベントを監視 UI Validate：独自の検証ルールを定義 対象読者 AngularJSについて基本的な概念を理解している方 AngularJSで利用できる拡張モジュールに興味がある方 AngularJSアプリでデータを視覚的に見せる方法を知りたい方 検証環境 この記事では、以下の環境でサンプル
Web開発者が覚えておきたい、よく使うAngularJSのビルトインディレクティブ12選まとめ
連載目次 前回の記事、「AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方」では、AngularJSのコントローラーとデータバインディングについて紹介しました。今回はAngularJSが最初から持っているディレクティブ（ビルトインディレクティブ）について解説します。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJSのビルトインディレクティブとは 以前の記事で解説しましたが、AngularJSではHTMLを拡張する仕組みが提供されており、これを使用して作成された機能を「ディレクティブ」と呼びます。 AngularJSには、デフォルトで多数の便利なディレクティブ（ビルトインディレクティブ）が用意されています（※以前使用した「ng-app」「ng-model」
AngularJSの良質なサンプルサイトAngularJS Hubが登場
AngularJSは個人的にかなり注目しているフレームワーク(FW)です。世に出ているFWとしては新しい方の部類ですし、今現在話題になっているFWです。AngularJSを利用すると動き(チェックボックスだとかフォームだとか)を必要としたWebサイトが簡単に作れます。ある程度動きを持たせるだけならjQueryだけでもOKですが、上手く機能をモジュールかできつつ、HTMLをテンプレート化できるので、開発がかなり楽になるFWだと思います。 AngularJSがどういうものかを知るには以下のサイトが良いかと思います。 日本語の良質な解説資料 Angular.jsのここがアツい！！ - Nayuta Works AngularJSのスゴさが伝わるデモ - 64p.org 自分は1つ目リンクのスライドと公式サイトでどういうものかを知り、まずはちょっと使ってみることにしました。使ってみてその威力（特に
「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
angular - Yeoman Advent Calendar 2015 - albatrosary's blog
既に定番のangular を紹介する。このエントリーは「Yeoman Advent Calendar 2015」12月5日の記事です。 www.npmjs.com インストール $ npm install -g generator-karma generator-angular $ mkdir mydir && cd $_ $ yo angular 実行 $ grunt serve ブラウザが立ち上がりアプリが表示される コマンド angular (aka angular:app) angular:controller angular:directive angular:filter angular:route angular:service angular:provider angular:factory angular:value angular:constant angular:de
AngularJSの基礎を理解しよう(1/5):初心者のためのAngularJS入門 - libro
AngularJSは、JavaScriptのライブラリです。――というと、多くの人は「ああ、なるほどね……」と思うでしょう。そして、そこで急速に興味を失う人も多いかも知れません。 「JavaScriptのライブラリ？ まぁ、どんなのか知らないけど、特にいらないよ。jQueryがあるし、それで十分だからね」――そう思いませんでした？ 皆さんが今まで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」でした。「DOMの取得や属性の操作がjQueryなら格段に簡単に書けるよ」というようなことでライブラリを導入していくことになった人も多いでしょう。 これらは、プログラマが自分で作成するプログラムを考え、それを書いていくことを楽にしてくれる、というものでした。作成する処理は自分で考える。それを作るのが楽になる――それが今までのライブラリでした。 では、Angu
Angularを簡単に済ませるには - AngularJS Advent Calendar 2015 - albatrosary's blog
Angularでさくっと何か作ってみます。"5 min quickstart"のようなものです。このエントリーは「AngularJS Advent Calendar 2015」12月12日の記事です。 Step0: 作成するファイルの構成 Step1: 環境の作成 作業ディレクトリを作りindex.htmlを用意する $ mkdir TodoApp && cd $_ $ touch index.html index.htmlの中身はHTML5の基本構成で。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <base href="/"> <title>Angular1</title> <meta name="viewport" content="width=device-width"> </head> <body>
ささっとAngular2を動かしてみる - AngularJS Advent Calendar 2015 - albatrosary's blog
何はともあれ、ささっとAngular2を動かしてみたい！というときのためのYEOMANジェネレータを使ってAngular2を動かしてみる。このエントリーは「AngularJS Advent Calendar 2015」12月5日の記事です。 node.jsのインストール もうフロントエンド開発では常識ですね。マシン買ったら何も考えずにnodebrew使ってnode.js入れましょう。ちなみにWindowsの場合ですが若干面倒なこともありますのでこちらは必読です： github.com generator-angular2のインストールと実行 今のところYEOMANジェネレータでAngular2は４つ。まだアルファ版ですからそんなもんです、先走りすぎても仕事じゃね。 $ npm i -g generator-angular2 さていつものようにディレクトリ作ってyoします。 $ yo ang
AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方
連載目次 前回の「いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方」では、AngularJSの概要について紹介しました。今回は引き続き、AngularJSについて解説していきます。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJSのコントローラー 前回のサンプルでは、取りあえずHTMLだけ使用してAngularJSを動かしてみましたが、実際のアプリではコントローラーと共に使用することが多いです。ここではコントローラーの基本について説明します。 AngularJSにおいてコントローラー（Controller）は、モデルとビューを操作するためのコンポーネントであり、ユーザーの操作に応じた動きやサーバー通信を行う場合などに使用します。このコントローラーの実態は、Ang
AngularJSモダンプラクティス - Qiita
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
噂のAngular 2をのぞき見る！ーng-japan 2015
この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第5回目）です。 はじめに Angular 2の発表があり、大きく様変わりするのではないかと懸念され、話題にもなりました。そして、AtScriptからTypeScriptへの変更など、話題にことかかないAngular 2ですが、彼らがなぜ、そのような変更を行っているのかが理解できるセッションとなりました。 Angular 2 – Igor Minar Angularは、私たち開発者のWebアプリ開発の手法を変え、生産性を向上してくれました。今度は我々のニーズに合わせて、Angularが変化をする番です。このセッションでは、何が変わり、なぜそのような変更が必要なのかをお話します。 まずは、Angular 2の3つのポイントについて。 なぜAngular 2を作ることにしたのか Angula
【古い内容です！！！】Angular 2 を試してみた感想とハマりどころ - Qiita
Angular 2 alpha.11, alpha.13 時点の情報です。現時点の最新版とは全く異なる内容です。現在では公式サイトのドキュメントが充実しているので、そちらを参照することをおすすめします。 昨日参加してきた ng-japan の間、Angular 2 の 5 Min Quickstart という Hello World 的なサンプルから始めて、貧弱な TODO アプリを作ってみました。感想と、その過程でいろいろハマったところを書いてみます。 まずは感想から。 別のフレームワーク？ やっぱり Angular 1.x とは別のフレームワークだなあという印象です。概念も書き方もツールも違う。ライブラリもそのまま使えない。Angular とは別の名前にした方がいいのでは、というくらいです。 現時点では、他のコンポーネント志向のフレームワークに乗り換えてもコストは同じな気がします。Ne
AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう
はじめに AngularJSでは最初から多くのディレクティブ機能が備わっています。このディレクティブ機能を使ってHTMLテンプレートを記述していきますが、慣れないとどのようなディレクティブがどのような動作をするのかがわからなく、リファレンスとコードを行き来することになります。 また、リファレンスでは用途ごとの整理されているわけではないので、分かりにくい一面もあります。そのため、今回は基本的なディレクティブ機能と制御に関わるディレクティブ機能に限定し紹介します。 対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（35.0）、Safari（8.0.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn MVC Using AngularJS and Crystal Report - DZone Web Dev
連載 | 初心者から中級者まで、今注目のAngularJS徹底解説 | HTML5Experts.jp
AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう
