HTML5 Conference 2016で発表したスライドです。 TechFeed (https://techfeed.io) での開発経験を元に、Angular2, Webpack, Ionic2, Cordovaについて、それらの技術を採用した経緯と、実際に使ってみて感じたメリット・デメリットなどを解説しています。Read less
SystemJSでAngular 2の環境を構築する SystemJSはwebpackやBrowserifyのようなJavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。 Angular 2ではquickstartではSystemJSを利用したコンパイル環境を、Angular CLIではwebpackを利用したコンパイル環境を提供しています。 今回は用意されている環境を利用せずに0ベースでSystemJSの環境を構築していく方法を解説します。 (quickstartの設定内容を最小限にして順序立てて解説しています) package.jsonの作成 まずはターミナルなどで以下のコマンドを入力してpackage.jsonの作成を行います。 npm init -y ローカルサーバーの構築 SystemJSではAjaxでファイルの取得などを行うためローカルサーバーの設定が
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
Angular を勉強する最良の方法は angular.io を読む コードやissueを読む 実際に手を動かす だと思います。ただ残念ながらすべて英語で書かれていますので、はじめてこうしたフレームワークにチャレンジするには敷居が若干高くなるかと思います。アドベントカレンダーですので初心者向けに利用している教科書をgitbooksに書き起こしました。細かい説明はあまり書かれてませんので、気になることはご自身で調べると良いと思いますし、やはり angular.io のチュートリアルなどはやっておくべきことと思います。そこに行く前のより簡単なものです。 こちら → https://albatrosary.gitbooks.io/start-angular/content/ 章立ては下記の通りです: Introduction Angularとは アプリケーション開発をするための環境 angula
MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の「AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本」では、AngularJSのフィルタとカスタムディレクティブについて解説しました。 MEANスタックに関連する情報を基本から解説してきた本連載も、今回が最終回です。最終回となる今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。 なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事(第1回、第2回)を見て環境を作成しておきましょう。 AngularJS 1.xのディレクティブで指定できるプロパティ 前回はカスタムディレクティブを作成するためにdirective関数を使用し、プロパティとしてcompil
React 人気はまだ健在だけど、入力項目の多い業務アプリを実装するには辛かった。 この手の Web アプリには、双方向データバインディングがある Angular2 の方が向いてそうだ。 Angular2 が正式リリースになって、名前が Angular に変わったことだし、 本格的に触ってみることにした。 $ npm install -g angular-cli で Angular CLI をインストールしたら、あとは $ ng new <project-name> を実行するだけで、プロジェクトの雛形が生成できた。 RC の頃は、全然クイックじゃないクイックスタートを見ながら、 設定をコピペしてプロジェクトを作ってたっけな。 ng new コマンド一発で、Angular だけでなく TypeScript や Webpack など、 開発に必要なパッケージも全部インストールされて楽チンだ。
Angular2の失敗しない始め方〜「ng-japan 2016」セッションレポート〜 仲 裕介(HTML5 Experts.jp副編集長) この記事は、「ng-japan 2016」のセッションレポートです。講演内容を再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2の失敗しない始め方 / 稲富駿氏 株式会社トップゲートの稲富 駿氏によるセッションです。セッション資料や配信動画は記事末尾でご確認ください。このセッションでは、大きく3つの点について触れられました。それぞれのポイントを書き起こします。 Angular2に関するよくある質問や誤解について Angular2を構成する基礎技術について Angular2を学ぶために必要なこと 1. Angular2に関するよくある質問や誤解につ
Angular2実践入門〜ng-japan 2016 セッションレポート〜 仲 裕介(HTML5 Experts.jp副編集長) この記事は、「ng-japan 2016」のセッションレポート(速報)です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2実践入門 / 白石俊平氏 当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。 ライブコーディングで学ぶAngular2 今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum –
最近、Angular 2を使ってWebアプリ作成の手伝いをする機会がありました。このフレームワークの複雑さに戸惑いもありましたが、Angular 2は間違いなくすばらしいものです。この事後分析では私がAngular 2のフレームワークを使った時に感じたいい面と悪い面の両方を掘り下げていくことにします。 Angular 2 Angularは携帯電話やデスクトップのWebアプリケーションを作成するための開発プラットホーム。 https://angular.io/ Angular 2+リアクティブプログラミング=❤ 私はすでに、Angular 1アプリケーション ではRxJSをかなり使っていました。特に、サービス間のメッセージ・バスを行うアプリを作成する時です。Angular 2はObservableを非常によくサポートしているので、アプリ全体にリアクティブプログラミングを取り入れることができ、
これまで行ってきた「Angular2 for JavaScript」をいよいよTypeScriptに書き換えます。Angular2チュートリアルにコードがあるので「書く」という意味ではわざわざブログにするものではありませんが、JavaScript からTypeScriptに書き変えることで、モジュールローダ、アノテーション等の役割が理解できると思います。 利用するライブラリ等はAngular2チュートリアルに従います インストールするツール 次のツールをnpmインストールします。 npm i typescript --save-dev npm i concurrently --save-dev npm i lite-server --save-dev これらライブラリを利用するためのコマンドをpackage.jsonに定義します。 "scripts": { "tsc": "tsc", "t
Angular2もベータ版となり、触りだす方も多くなったと思います。しかし、Angular2のサイトではTypeScriptのサンプルは豊富ですが、ノーマルなJavaScriptで記述されているものがあまり見当たりません。 angular.io あまりAngular2を触ってませんが、学習目的で次のことを行いました。 コンポーネントの利用 ルータの定義と利用 サービスの依存性注入 カスタムフィルタの作り方 作業フォルダーを作る mkdir Angular2Study && cd $_ 必要なライブラリをインストール npmを利用した場合 npm init -y npm install angular2@2.0.0-beta.1 --save npm install rxjs@5.0.0-beta.1 --save HTMLとして次のように定義しライブラリを読み込ませます。 <!DOCTYP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く