Skip to content

Instantly share code, notes, and snippets.

View albatrosary's full-sized avatar

Fumio SAGAWA albatrosary

View GitHub Profile
@albatrosary
albatrosary / angular-handson.md
Last active April 13, 2017 12:56
Angular Handson Geek Women Japan

Step.1: 簡易サーバ

Node.js 若しくは Python、 Ruby で簡易サーバが利用出来るように準備します

node:

$ npm install live-server -g
$ live-server

node:

WebSocket, WebRTC and Angular1

Angular

AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケーションを開発していく上で必要とされる機能が一通り揃っています。 Backbone.jsなどの場合は、最低限の機能しかしないため、不足する機能については、サードパーティ製のプラグインやライブラリと組み合わせて開発していくのが定石です。 一方、AngularJSでは、機能的な面でサードパーティ製のプラグインを導入することはほとんどありません。標準で用意されている機能だけでも充分な役割を果たしてくれます。 また、スクリーンショットにHTML enhanced(HTML拡張 ) とあるように、HTMLのような記述方法を採用しているのも大きな特徴です。

Web Components

ご存知の通り、HTMLとCSS、JavaScriptには明確に役割が決まっています。 つまり外観を整えるCSSとHTML、何かしらの処理を行うJavaScriptからWebアプリケーションができています。 HTMLが持つマークアップはセマンティックWebからも重要であることが理解できます。

重要なCSS、HTMLですが、Webアプリケーションを作る上で幾つか問題も指摘されています。例えば

  • 再利用性が悪い
  • CSSスコープが基本的にはグローバル


TEMPLATE SYNTAX

Learn how to write templates that display data and consume user events with the help of data binding.

データを表示するテンプレートを作成し、データバインディングの助けを借りて、ユーザーイベントを利用する方法を学びます。

Our Angular application manages what the user sees and does through the interaction of a Component class instance (the component) and its user-facing template. Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax: