Angular入門 未経験から1ヶ月でサービス作れるようにする - Qiita
Angular入門記事です。 毎記事実際に動くコードを見ながらAngularを学んでいきます。 インストールから始め、実際にWebサービスを作りながら、しっかりとAngularの使い方解説し、最終的にはプロとしてAngularのコーディングをしていくことができるレベルの知識が身につくことを目指します。 これを気に、Angularの良さを知っていただけると幸いです。 Angular入門記事一覧 その1. インストール Angularのインストール 実際にAngularをインストールしてプロジェクトを作ります 起動して動作確認 起動して、Webページを表示してみます その2. ディレクトリ構造とコンポーネントの基礎 Angularプロジェクトのディレクトリ構成 AngularCLIにより生成されるディレクトリ、ファイルの説明を行います コンポーネントの基礎 コンポーネントを少し修正して、Ang
【JavaScript】Angular, React, Vue.jsの日本語で読める本まとめ(2018年4月)【フレームワーク】 - Rのつく財団入り口
JavaScriptフレームワークのおすすめ本まとめ (2018年4月) Webフロントエンドで脱jQueryした先の乗り換え先、モダンなJavaScriptフレームワーク群。浮き沈みが激しいですが2017−2018年現在、Angular/React/Vue.jsが大まかに3強と言われています。FWの選定で色々調べたり本を読んだりしたので、このエントリでは2018年現在日本語で読める本をまとめてみました。4月といいつつその後もちょっと混ざっています。それぞれのフレームワークと関連してモバイルアプリを開発できる仕組み(Ionic, React Native, Weex/Vue Native)の本は含んでいません。 JavaScriptフレームワークのおすすめ本まとめ (2018年4月) Reactの本 短時間で概要を把握したい Reactではじめるフロントエンド開発入門 いまから始めるWeb
Angular CLI でよく使うコマンドをまとめてみた | DevelopersIO
どうも！大阪オフィスの西村祐二です。 サーバーレスなシステムを作ろうとなると、SPAは重要な項目になってきます。 私は ・フルスタック ・Typescriptを標準サポート ・ファイルの命名や、記述方法がある程度固定化されており個人差が発生しにくいところ に魅力を感じてAngularを勉強しております。 (他と比べたわけではないので語弊がありましたら申し訳ありません。) チュートリアルが一通り終り、自分で一から作っていくときに Angular CLIを使って構築していくことになるかと思います。 今回、勉強した内容の復習もかねて、よく使いそうなコマンドをまとめていきたいと思います。 (※2017/11/25時点の内容となります。) 環境 Angular CLI: 1.5.0 Node: 8.8.1 OS: darwin x64 Angular: 5.0.2 Angular CLIをインストー
Angular 2/4が狭量で遅すぎる理由 | POSTD
(注：2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackやフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactやVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201
Angular2/TypeScriptプロジェクトのコンパイルの仕組み | QUARTETCOM TECH BLOG
最近ようやく Angular & TypeScript でソースコードを書き始めました。型のおかげでどのような値が入る変数なのか推測しやすくなり、とても便利です。 さらに angular-cli を使うとターミナル上でプロジェクトやコンポーネントの雛形を作る事ができるため、同じようなコードを何度も繰り返し書かなくても良くなりました。 たったの3行で Angular のアプリケーションが動き出しブラウザに Welcome to app!! のテキストが表示されます。 何がどう動いているのか不思議に思いませんか？ 今回の記事は angular-cli のコマンドと設定を元に Angular + TypeScript のプロジェクトがブラウザ上で動作するまでに何が起こっているのかを順に解説していきます。 2017/07/21 追記 タイトルを Angular2 として公開していましたが、現在の最
はじめてのAngular TODOアプリをつくる③ ルーティング編 - Goalist Developers Blog
はじめてAngular2を触ってみた初心者のメモ書きです。 公式チュートリアルをチラ見しながらTODOアプリを作っています。 今回は第三回のルーティング編です。 前回に引き続き、appコンポーネントをドコドコ分割していきます。 やりたいこと ダッシュボードを作る ダッシュボード、タスク一覧、タスク詳細のビューを切り替える それぞれのビューにURLパスを割り振る TODOアプリとしての体裁を整える チュートリアルで言うとこのあたりです。 Angular Docs 今回もAngular CLIの恩恵にあずかってまいります。 appコンポーネントを分割する 新しい子コンポーネントとしてTasksComponentを作ります。 ng g component tasks で、今までappコンポーネントにそのまま書いてたタスク一覧と詳細部分を子側に切り取って貼っちゃいます。 app.component
はじめてのAngular TODOアプリをつくる② コンポーネントとサービス編 - Goalist Developers Blog
はじめてAngular2を触ってみた初心者のメモ書きです。 前回の投稿から、公式チュートリアルをチラ見しながらTODOアプリを作っています。 今回は、前回作ったappコンポーネントをサクサクと分割していきたいと思います。 チュートリアルで言うとこのあたりです。 Angular Docs 今回もAngular CLIの恩恵を享受していきます。 目次 目次 コンポーネントを分割する コンポーネントを作成（ng generate component） 作成したコンポーネントをインポート 親コンポーネントのプロパティをバインド ディレクティブを置き換えてコンポーネント表示 サービスを使う サービスを作る（ng generate service） モックデータを移動する TaskServiceをインポートする 非同期でサービスを使う ソースコードまとめ 感想 コンポーネントを分割する コンポーネント
はじめてのAngular TODOアプリをつくる① リスト表示編 - Goalist Developers Blog
はじめてAngular2を触ってみた初心者のメモ書きです。 今回からは、公式チュートリアルをチラ見しながらTODOアプリを作っていきたいと思います。 https://angular.io/docs/ts/latest/tutorial/angular.io 今回もAngular CLIの恩恵にあずかってまいります。 Windowsでの環境構築編はこちら developers.goalist.co.jp 目次 目次 準備 タスクを一つ表示する Taskクラスの作成 Taskクラスをインポート タスクリストを表示する リスト表示（ngFor） CSSを追加 タスクを選択できるようにする クリックイベントを追加 選ばれしタスクを表示（ngIf） 選択中のタスクに色を付ける（[class.クラス名]） ソースコードまとめ 感想 準備 プロジェクトを生成 ng new todo-app 開発用サーバ
はじめてのAngular やさしいテンプレートシンタックス編 - Goalist Developers Blog
はじめてAngularを触ってみた初心者のメモ書きです。 前回のブログではAngular CLIを使って環境構築を行いました。 developers.goalist.co.jp 今回はAngularのテンプレート構文を使ったデータバインドを試していきます。 目次 目次 準備 片方向データバインド 双方向データバインド リスト表示（ngFor） HTML要素の表示/非表示（ngIf） HTML要素の表示切り替え（ngSwitch） HTML要素のプロパティ指定 イベント処理 ソースコードまとめ 感想 準備 前回の復習もかねてコンポーネントを追加してみます。 template-testという名前で作ってみました。 $ng g component template-test installing component create src\app\template-test\template-te
Angularで中身を動的に変えられるModalを作る【基本編】 - Carpe Diem
概要 確認用ダイアログなど、モーダルが必要になるシーンは多々あると思います。 今回はAngular2で実装する方法を紹介します。 環境 angular 2.4.7 angular-cli 1.0.0-beta.32.3 要件 今回満たしているのは以下の項目です。 serviceとしてどこからでも呼べる 中身を好きなcomponentで作ることができる また今回満たしていない要件は以下です。これは次回にやり方を紹介します。 モーダルの中に外から（呼び出しているComponentなどから）何かしらパラメータを渡す 成果物 今回の成果物は以下です。 github.com ブログの説明でよく分からない時は参考にしてください。 フォルダ構造 ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.c
ReactユーザーのためのAngular2ファーストステップ - Qiita
Reactはやったことある人向けに、ReactのアレはAngular2だとどうなってるの？というのをまとめていきます。Reactユーザーだった自分がAngular2始めるにあたりこういう情報あればなと思ってたやつです ところでAngular2じゃなくてAngularと呼んでね！とのことなので、以下Angularと呼びますがAngular 2.xを指します。 アプリケーションのブートストラップ React <!doctype html> <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> import React from 'react'; import ReactDOM from 'react-dom'; class App extends
Angular 入門 #1 - Qiita
この会の進め方 https://angular.io/docs を読み進めていきます Angular 自習のススメ angular.io/docs 公式サイトのドキュメントが充実 ここ読めばもうAngularマスターです 英語 https://github.com/ng-japan/hands-on ng-japan (Angular Japan User Group) が公開しているハンズオン 日本語 各自これをやりましょう（完）でいい気も angular.io/docs を読み進める デモを動かす 大体のページでブラウザ上ですぐ動かせるデモと、ダウンロードしてローカルで動かせるデモが用意されています The code referenced on this page is available as a live example / downloadable example. live e
Angular | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
基本、仕組み Angular2のモジュール、コンポーネント、bootstrapの概要 ディレクティブ データバインディングの概要 プロパティバインディングとアトリビュートバインディング イベント処理 NgClass、NgStyle、クラスバインディング、スタイルバインディングを使ってcss設定 内挿（interpolation）、２Wayバインディングの概要 NgForを使ってリストやテーブルを作成 NgSwitchで内部にあるHTMLテンプレートの表示を切り替え NgIf、[style.display]、[hidden]を使って表示、非表示を切り替え inputs、@Inputを使ってディレクティブ間で値を受け渡し outputs、@Output、EventEmitterを使ってカスタムイベントを定義 カスタム構造ディレクティブ作成 フォーム NgForを使ってラジオボタン、select
Angular,Riot,Vue.js使ってみた雑感 - Qiita
2020.12 追記 今と状況が違いすぎるので読まないでください！参考にしないでください！ Vue3サイコー 試用内容 それぞれで、サーバー側のプログラム（api）を使った動的webサイトを開発。 全て内蔵のルーターや推奨ルーターを用いたSPA。 Angularは2系、Riotは3系、Vue.jsは2系を利用。 機能性や安全・安定性に関してはなかなかよい。 複雑で大規模なサイトを作るならアリかもしれない。 ただ、自分のプロダクトで使いたいかと言われれば微妙。 設計はMVCフレームワークに馴染みがある人ならしっくりくると言うか、違和感なく理解できると思う。 TypeScriptも、JAVAやCなどの経験者なら特に学習は不要だし、純粋なJavaScriptよりも安全に書けてよい。 静的型付けなので問題有りな代入などはコンパイルで弾いてくれるし、テキストエディタのリアルタイムチェックもがっつり受
Angular2のNgForを使ってリストやテーブルを作成 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
Angular2のNgForを使ってリストやテーブルを作成する方法をまとめました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．NgForを使って表を作成 ２．NgForのローカル変数を使用する例 ３．デモ ①スクリプトにテーブルで表示するデータを定義 class Member { name: string; age: number; address: string; } var MEMBERS: Member[] = [ { "name": "相田", "age": 20 ,"address": "東京都品川区"}, ・・・ ]; public members = MEMBERS; ②スクリプトで定義したデータモデル（members）に対し
angular.io FUNDAMENTALS/NgModules メモ - Qiita
NgModuleは @NgModule デコレータがついたクラスで、どのようにコンパイルして実行するかをAngularに伝えるメタデータオブジェクトを引数に取る。 モジュールのコンポーネント、ディレクティブ、パイプを識別し、外部コンポーネントが使用できるようにする。 DIされるサービスのインスタンスを生成する。 このページでは、NgModuleについて詳しく説明する。 このページではTour of Heroesのサンプルを改善していく過程でNgModuleを説明する。最初から最後までの状態のサンプルが公式ページに用意してある。 Angular modularity 機能やビジネスドメイン、ワークフローなどの単位でモジュールを作る。 モジュールはアプリケーションの開始とともにすぐに読み込まれる (loaded eagerly)。ルーターによって非同期に遅延ロードする(lazy load)こと
angular.io FUNDAMENTALS/Bootstrapping メモ - Qiita
アプリケーションは少なくとも1つのModuleを持っていて、 bootstrap でアプリケーションを起動する。便宜的にAppModuleと呼ぶ。 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } bootstrap で指定したコンポーネントが index.html に描画される。 The
Angularのバージョン4のモジュール、@NgModuleの概要: Angular、Bootstrapなどの学習備忘録
Angularのバージョン4のオンラインマニュアルを読んで勉強中です。 今回はモジュール、@NgModuleについて。 ●Angularのモジュール ・すべてのAngularアプリは、少なくとも一つのモジュールクラスをrootモジュールとして持つ。 ・Angularのモジュールは、@NgModuleデコレータで修飾したクラス。 ●@NgModule ○使用例 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent
Angularの概要 – Angularの公式ドキュメント「Architecture Overview」日本語訳
私はReactが好きで、Reactを使ってWebアプリを開発することが多いんですが、これからAngularを書くことになりまして、Angularも覚える必要が出てきました。Angularを勉強するに当たって、やはり公式ドキュメントが大変役に立ちます。その中で「Architecture Overview」のページは、ちゃんと読めばAngularの理解がかなり深まるようになっています。これからAngularを勉強しようと思っている方は、まずこのArchitecture Overviewを読まれることをオススメします。今回日本語に訳してみましたので、ぜひ参考にしてみてください。 Architecture Overview – アーキテクチャ概要Angular is a framework for building client applications in HTML and either Ja
angular.io Guide: Component Styles - Qiita
これは、Angular の公式ドキュメントの Component Styles の章を意訳したものです｡ 駆け足で翻訳したので至らない点もありますが、あしからずご了承を｡ バージョン 4.2.6 のドキュメントをベースにしています｡ Angular のあるアプリケーションは標準のCSSでスタイルされています。つまり、CSSスタイルシート、セレクタ、ルール、およびメディアクエリについて知っているすべてをAngular アプリケーションに直接適用できます。 さらに、Angularはコンポーネントスタイルをコンポーネントとバンドルすることで、通常のスタイルシートよりもモジュラーデザインを可能にします。 このページでは、これらのコンポーネントスタイルをロードして適用する方法について説明します。 コンポーネントスタイルの使用 あなたが書くすべてのAngularコンポーネントについて、HTMLテンプレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
