Angularでページ離脱確認を実装する - Qiita
りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 // beforeunloadイベントのreturnValueにtrueを設定し離脱確認ダイアログを表示する window.addEventListener('beforeunload', function(event) { event.returnValue = true; }); しかし、AngularではwindowのイベントだけでなくRouterによって画面遷
Angular 画面遷移
今回はAngularのRouterを使って画面遷移をやります。ログイン画面からメニュー画面に遷移するサンプルをやります。 名前とパスワードが等しければログインOKでメニュー画面に遷移します。いきなりメニュー画面に アクセスできてしまうので、実際のログイン認証とは程遠いのですが、あくまでも画面遷移のサンプルとして見て下さい。 Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。 プロジェクト作成 Angular CLIでプロジェクトとログインとメニューのコンポーネントを作成します。 プロジェクト作成時は--routingオプションを付けて下さい。 ng new プロジェクト名 --routing cd プロジェクト名 ng generate component login ng generate component menu ログイン画面関連 src
Angular をやるのに欠かせない VSCode Extension - Qiita
2017/07/11(Tue) 時点の情報に基づいています Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。 Angular Language Service Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。 Path Intellisense ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML
Angular2 on TypeScriptの最小構成をつくってHello Worldするまでのみちのり - DRYな備忘録
2017/04/24 追記 Angular CLIを使わずにAngularを始める系の記事、もう古すぎるので参考にしないほうがいいです。 | Angular2 on TypeScriptの最小構成をつくってHello Worldするまでのみちのり https://t.co/XjZafjJ6u4— OKUNOKENTARO (@armorik83) April 22, 2017 参考 GitHub - angular/angular-cli: CLI tool for Angular Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング 作者: 末次章出版社/メーカー: 日経BP社発売日: 2017/01/18メディア: 単行本この商品を含むブログ (1件) を見る 以下原文 Angular2のquickstart、たしかにその通りにやれば動くんだけど、開発
Angular 4の長期サポート発表、2018年10月まで1年半。次バージョン「Angular 5」はシンプル化とスピードに注力。ng-conf 2017
Angular 4の長期サポート発表、2018年10月まで1年半。次バージョン「Angular 5」はシンプル化とスピードに注力。ng-conf 2017 Googleが中心となって開発しているオープンソースのJavaScriptライブラリ「Angular」のイベント「ng-conf 2017」が、4月5日から3日間、米国ユタ州ソルトレイクシティで開催されました。 1日目に行われた基調講演では、Angularの現状や半年後に登場予定の次のバージョンである「Angular 5」などについて、GoogleのAngularチームリードIgor Minar氏から説明がありました。 この記事では公開された基調講演の動画からその部分をダイジェストで紹介します。 セマンティックバージョニングとタイムベースリリースを開始 Igor Minar氏。 Angular 4の次はどうなるかについて話そう。 （会場
ReactとAngular2の使い方やコードの違いをコンポーネント単位で比較する
SPAはWeb標準技術（HTML、JavaScript、CSS）で構成されているため、環境依存がほとんどありません。Node.jsやnpmは公式サイトから各OSに対応したインストーラーが取得できますので、環境の構築も容易です。また開発用のエディタとしては、近年はAtomやVisual Studio CodeといったOSSエディタが充実しているので、Node.jsとエディタの2つをインターネットから取得すれば、すぐにSPA開発を始めることができます。 スターターツールとは SPA開発を始めるに当たり、さまざまなライブラリを組み合わせる必要があります。本来であれば、ライブラリを選定し、環境を構築するところから始める必要がありますが、今回は開発を簡単に始めるため、Reactは「create-react-app」、Angular2では「Angular CLI」と呼ばれるスターターツールを使用します
Angular入門: http通信部分やテストを試す - Qiita
概要 前回（Angular入門: Component/ServiceをTestまで含めて試す）の続きです。 今回は 通信処理の書き方 テストの書き方 動作確認・デプロイ を書いていきます。 作った画面 要件としては、前回分に加えて AsyncIncrementボタンを押すと、サーバーにデータを取りに行って非同期に数字が加算される。 という形です。 環境 angular-cli: beta-32 Angular: 2.4 NodeJS: 6.9 ソースコードはこちら↓ https://github.com/uryyyyyyy/angularSample/tree/async 前提：APIサーバー SPAの場合は、フロントのリソースはS3などのホスティングサービスから配信するかもしれません。 その場合はAPIサーバーのエンドポイントは別のホストになることが有り得ます。 本記事ではそのような配信
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） | HTML5Experts.jp
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ
Introduction · Start Angular
Angular を勉強する最良の方法は angular.io を読む コード や issue を読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。 これは私がセミナーのご依頼を受け初心者向けによく利用している教科書を gitbooks に書き起こしたものです。Angular に関する基本的な要素についてはほとんどの部分で網羅しているとは思いますが、細かい説明は書いていません。なので、気になることはご自身で調べると良いと思いますし、やはり angular.io の チュートリアル などはやっておくべきことと思います。そこに行く前のより簡単なものです。 この本を通じて Angular で自身のWebアプリケーションを作ってみたくなれば幸いです。 December 16, 2016
Angular AoTガイド - Qiita
はじめに どうも。最近、方々で「build筋」だの「うぇぶぱっ筋」だのと発言して顰蹙を買っている @Quramy です。 さて、皆さんAngularのAhead of Time(以下AoT) Compileは利用していますか？ とても良い仕組みだと思っているのですが、まとめられた記事もまだ殆ど見かけません。 僕自身は少し前に業務案件に適用させたばかりです。折角なので記憶が鮮明なうちに投稿にしておこうと思った次第です。 このエントリは下記の3章構成でお届けします。例によって結構長いので、自分が必要としているテーマに合わせて好きな部分を読んでください。 基本編: AoTの仕組みについてのざっくり解説. 知っている人は読み飛ばしてOK 実践編: 主に僕がAoTに取り組んだ際に行ったこと、ハマったポイントについての説明 発展編: AoT環境を手に入れた後に何をすべきかについて 対象読者 このエント
Angular 2 のコンポーネントを作る | スマホ神 – JavaScript 受託開発 –
Angular 2 の RC が出たので試しにコンポーネントを書いてみます。 インスト―ル @angular/ で始まるのが Angular2 本体です。ほかにもいろいろ必要なのでインストールしておきます。 ビルドは Browserify + babelify を使うことにします。 angular2 むけのプリセットがあるので簡単です。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-preset-angular2 $ npm install -S @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic reflect-m
Waltsで本当にアプリを開発できるのか // Speaker Deck
All slide content and descriptions are owned by their creators.
AngularJSユーザーのためのAngular2超入門
MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の「AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本」では、AngularJSのフィルタとカスタムディレクティブについて解説しました。 MEANスタックに関連する情報を基本から解説してきた本連載も、今回が最終回です。最終回となる今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJS 1.xのディレクティブで指定できるプロパティ 前回はカスタムディレクティブを作成するためにdirective関数を使用し、プロパティとしてcompil
「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。リリース候補版の状態が長く続いていましたが、2016年9月時点に正式版（2.0.0）がリリースされました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 Angular 2はコンポーネントやモジュールと呼ばれる、Webサイトの実装を分割する仕組みを備えており、Angular 2自体も複数のモジュールから構成されています。これらの仕組みを活用して、実装を分割して見通しの良いソースコードを書いたり、ソフトウェア部品として別のWebサイトに移植したりできます。 本記事では、Angular 2のコンポーネントやモジュールについて紹介します。まずコン
入門3日目の僕が感じたAngular 2のすごいところ - teratail blog
はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。 来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。 今までは主にフロントエンドを担当し，バックエンド，テストなどもサポートする形で開発していました。 少し期間が空いてしまいましたが，10/3(月)に開かれたAngular 2入門者の会でLTしました。 connpass.com Angular 2熟練者の方からAngular 2の良さや楽しさとアドバイスを色々教えていただき，今後もAngular 2を使って何かを作ってみたいと思いました。 そこで，今回はプロダクトに生かして行く上でこれはすごいと思ったところと，使ってみて良かったところの4点を入門者として紹介していきたいと思います。 更新が即座にされるサーバ環境がすごい 公式のチュートリアルを試してまずびっくり
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
🎉✨ Angular 2.0.0がリリースされました 🎉✨ · Angular Info
どうも、らこです。 ついにAngular 2.0.0が正式リリースされました！めでたい！！ 今回はRC.7も含めた変更点の解説に加えて、正式リリース後のAngularの予定についても紹介します。 RC.6からの変更点 RC.7、2.0.0ともに、ほとんどがバグ修正とドキュメンテーションの追加で、破壊的な変更はRC.7にひとつあるだけです。 2.0.0-RC.7 2.0.0 破壊的変更 ...Metadata系のクラスを廃止 refactor(core): remove `…Metadata` for all decorators and use the dec… · angular/angular@63e15ff RC.6までは、@Componentデコレーターに渡すオブジェクトの型はComponentMetadataというクラスになっていて、 Component以外にもそれぞれのデコレー
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
「Angular 2」のデータバインディングとディレクティブ記述法
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。2016年8月時点のバージョンは2.0.0-rc.5で、まもなく正式リリースという状況になっています。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 AngularJS 1ではビューとデータモデルを関連付けるデータバインディングや、ディレクティブと呼ばれる独自のHTML記述が利用できました。これらはAngularJSの特徴として真っ先に言及される機能で、Angular 2でももちろん利用できます。しかし記述方法が微妙に異なっており、最初は違和感を感じるかもしれません。 そこで本記事では、Angular 2でデータバインディングやディレクティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular 2 を利用した開発の実際
