Angular 2 CoreAngular 2 Core Igor Minar Tobias Bosch Video: http://goo.gl/PxARYM Follow up post: Script: https://docs.google.com/a/google.com/document/d/1UJ21sC3WJ1rVW0_bXG55RXSA8owY7hnpsBs205okwUs/edit# ng-europe 2014 video | follow-up post
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
ng-mtg#5 AngularJS 勉強会まとめ - Can I do web?
先日開催した mg-mtg#5 AngularJS 勉強会 - AngularJS Japan User Group | Doorkeeper で使った 資料(?) を公開しようと思ったんだけど、これでは伝わる気がしない、ということでまとめてみました。 今回の勉強会は、 ３〜４人のグループ作る 出題されたテーマについてディスカッションする 結果を発表する みんなであれこれ話して結論を出す これを時間が許す限りやってみようという企画。そこで発表すると時間かかると思い、急遽 GoogleDocs でドキュメント共有 して 3. の結果を書いてもらうようにしました。結果的になんか楽しい感じになったので良かったのかなと。 上のドキュメントのリンクをみて頂ければわかるのですが、何のことだかわからんと思います。なので、振り返ってみます。ドキュメントと合わせて見てください。「」で囲んでいるのが共有ドキ
AngularJSの2way bindingの仕組みを追ってみた - yo_waka's blog
AngularJSの特徴でもある、モデルとビューの2way binding。 AngularJSの簡単なコードがあるとする。（投稿時点ではv1.2.6） <body ng-app ng-init="message = 'nothing'"> <div ng-controller="SampleCtrl"> <input type="text" ng-model="message"> <br> <button ng-click="clearMessage()">Clear</button> <br> <span>{{getMessage()}}</span> </div> <script> var SampleCtrl = function($scope) { $scope.message = ''; $scope.clearMessage = function() { $scope.mes
AngularJS: AngularJS 2.0
As we’re starting into the implementation of AngularJS 2.0, we thought we should put pen to paper and give you some insight into how we’re thinking about the design and why we’re making the changes we are. We’re sharing it with you now so you can help make the right choices. AngularJS 2 is a framework for mobile apps. It is for desktop as well, but mobile is the hard bit that we will get right f
AngularJSをはじめる前に#AngularJS入門その1 | DevelopersIO
AngularJSをはじめよう ここにあるように、最近はWebアプリを作成する際にJavaScriptのフレームワークを使用するのが当たり前といっていいくらい、 さまざまなフレームワークが存在します。 弊社ブログでもember.jsの記事等、JavaScriptのいろいろなライブラリ・フレームワークを紹介していますが、 私が近頃AngularJSを使用する機会があり、とても使いやすかったので、改めてここで紹介しようと思います。 AngularJSとは もう一度「AngularJSとはなにか」という部分を簡単におさらいを。 AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVWフレームワークです。 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 近年複雑化するWebアプ
AngularJS入門(2) 〜ルーティング, フィルター〜 | QUARTET Engineers' Blog
「AngularJS 入門」の続きです。 今回はルーティングと、フィルターです。 ルーティング 実は既にルーティングの設定はしてあるので見てみます。 // app/scripts/app.js /* jshint indent: 4 */ 'use strict'; angular .module('angularSampleApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]) .config(function ($routeProvider) { // ルーティング設定 $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); }); ルーテ
angularjs-style-guide/README-ja-jp.md at master · mgechev/angularjs-style-guide
このスタイルガイドの目的はAngularJSアプリケーションのベストプラクティスとスタイルガイドラインを提供することです。 これらのベストプラクティスは以下から集めたものです： AngularJSソースコード 私が読んだコードや文章 私の経験 注意1： このスタイルガイドは草稿であり、その主な目的はコミュニティ駆動にすることです。足りない部分を補うことはコミュニティ全体から大きな賞賛を受けることになります。 注意2： 翻訳版のガイドラインを読み始める前に、それが最新の状態であるか確認しましょう。英語版のAngularJSスタイルガイドが最新版となります。 当ガイドラインは、JavaScript開発のガイドラインではありません。JavaScript開発のガイドラインはこちらで見つけることができます： Google JavaScript スタイルガイド Mozilla JavaScript ス
AngularJS Directive なんてこわくない（その１） - AngularJS Ninja Blog
angular.module('Ninja', []) .directive('ninjaCustomer', function() { return { templateUrl: 'partials/ninja-customer.html' }; }); こんだけなので、まあどってことない。これだけなら ng-include のほうがラクでいいやんってことになるかな。でもまあ、とりあえずこんだけしか書かなくても directive として動作するのかってことを見ておく。 要素として使う Directive としたければ デフォルトでは属性（restrict: 'A'）として使う directive として作られる。なので、要素として HTML で指定する directive にしたければ、restrict オプションが必要になる。
AngularJSのStrict Contextual Escapingって何だ？ - Qiita
AngularJSを1.0系から1.2系にアップグレードした時にハマりがちなのがSCE(Strict Contextual Escaping)ではないでしょうか。 AngularJS 1.2ではSCEがデフォルトで有効になったため、アップグレードしたによりこれまで動いていたアプリが動かなくなる可能性があります。 例えば、「ng-bind-htmlにバインドしているHTMLが表示されなくなった」とか「iframeの内容が表示されなくなった」なんてことが起きたら、まずはconsole.logを見てみましょう。 下記のようなログが出力されていれば、SCEが有効になったことが原因で要素が表示されていないと考えられます。 Attempting to use an unsafe value in a safe context. Blocked loading resource from url not
AngularJS の $watch, $digest, $apply について書く - きちぽよ〜
「僕らはみんな河合荘」 のアニメ化決定に小躍りしている seikichi です． 律ちゃんかわすぎ……． 前置きはさておき，AngularJS の話をします． AngularJS はブラウザ上で動作するWebアプリケーションを作成するための JavaScript フレームワークです．Backbone.js，Ember.js，Knockout.js などに代表される，最近流行り(?)のMV*フレームワークの1つと言えば良いのでしょうか． AngularJSの公式サイト に掲載されているサンプルを見てみます． テキストボックスの内容を変更すると，<h1> 要素の中身にリアルタイムに反映されます． すごい．JavaScript をまだ1行も書いてないのに，何か作った気分になってしまいました (おいおい)． AngularJS は ビューでの変更をモデルに，モデルでの変更をビューに自動的に反映する
3分で分かるAngularJSセキュリティ - teppeis blog
先日のng-mtg#4 AngularJS 勉強会でLTしようと思ったけど申し込みが間に合わなかったのでブログに書きます。 先月リリースされたAngularJS 1.2はセキュリティがんばってる的なことを聞いたので、セキュリティ周りの仕組みを調べてみました。 お題は以下です。 CSRF JSON CSP (Content Security Policy) Escaping CSRF ユニークなトークンをHTTPリクエストに載せてサーバーでチェックする対応が世の中では主流（最近はカスタムヘッダのチェックによる対策も） AngularJSでは、XSRF-TOKEN Cookieにトークンが載っていると、$httpを使ったHTTPリクエストのヘッダに自動的にX-XSRF-TOKENヘッダーが付く。 XSRF-TOKEN CookieはもちろんNot HttpOnlyで。 Angular界ではCS
$http | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス $anchorScroll $animate $animateProvider $cacheFactory $compile $compileProvider $controller $controllerProvider $document $exceptionHandler $filter $filterProvider $http $httpBackend $interpolate $interpolateProvider $interval $locale $location $locationProvider $log $logProvider $parse $parseProvider $q $rootElement $rootScope $rootScopeProvid
AngularJS のデータバインドを支える $watch - AngularJS Ninja Blog
AngularJS の強力なデータバインドを支える仕組みのうち、まず $watch について取り上げる。 $watch を使えば、監視（Observe）したいオブジェクトやプロパティが変化したときに実行する処理（リスナー）を容易に記述できる。 $watch を利用する場所は scope のある directive や controller で、ng-model や ng-bind のようなデータバインドする directive を独自に実装する場合や、モデルの変更に応じて処理をバインドする場合などに使用できる。 $digest サイクル $watch による変更検知処理は、ポーリング的（一定間隔で頻繁）に実施されるのではなく、以下のイベントが生じたときに $digest サイクル（または $digest ループ）と呼ばれる処理が実行され、その中で実行される。 イベント 概要
AngularJSで動的に生成されるDOMに対して、jQueryプラグインの効果を適用する - えいのうにっき
お久しぶりです お久しぶりです、a-knowです。 ブログを書くのは、昨年の12/11以来、半年弱ぶりですか・・・（汗） この半年、本当にいろいろありました。（思い出したくもないこともちらほらと・・・ｗ） お仕事の方も、今までやっていたPJとは違う、新しいPJが動き始めたということもあって、 バージョン管理をsvnからgitに変えたり（やっと！）、Jenkinsを導入したり、自社開発基盤を刷新したり・・・と、 技術的にも色んな新しいことに挑戦できている毎日なんですが、 AngularJSも、そのうちの一つだったりします。 AngularJSでつまづいたところ それにしてもAngularJS、非常に痛快ですね！ たとえば、jQueryで長々と書いていたDOM操作の為の記述が、ほぼいらなくなっちゃう。これはホントに痛快です。 最近は参加できていませんが、今後ハッカソンやプログラミングコンテスト
AngularJSのTutorialのstep-5よりAjaxの書き方・テストの仕方 - Qiita
AngulaJSのTutorialのstep-5を実施したレポートです。 個人的に最もAngularに魅かれた仕組みを説明してくれているTutorialで、 なんといってもポイントはController側もテスト側もDI経由のサービスを利用した実装です。 Angularは、エラーハンドリングはHTTPレスポンスコードで見ていたりして、サーバ側のIF設計がRESTful実装されていることがある程度、前提にしています。 そこで、このRESTfulについても重要なので、今回は簡単に補足します。 step-5では、 ファイルシステム上のJsonファイルからデータを取得し、 スマホリストを検索機能付きで表示する 上記の仕組みを実装したサンプルコードを元に課題を遂行します。 データ このTutorialでは、データは静的なjsonファイルで定義されています。 このデータを使ってstep-4以前で出力し
Angular JS で複数のコントローラ間でモデル（状態や値）を共有する方法 3 種類 - Qiita
はじめに Angular JS で複数のコントローラ間でモデル（状態や値）を共有する方法として、次の 3 種類を解説します。 モデルを共有するサービスを使用する (Shared Service)。 親コントローラのスコープを子コントローラで共有する (Parent Scope Sharing)。 イベントを利用する (Pub/Sub)。 Shared Service 複数のコントローラ間で共有するモデルをサービスとして作成し、そのサービスを複数のコントローラで参照します。 実装例を示します。 <!DOCTYPE HTML> <html ng-app="AngularJsStudy"> <head> <title>Shared State Service - AngularJS Study</title> <meta charset="utf-8" /> <meta http-equiv="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS使い方メモ - Qiita
AngularJS入門(3) 〜サービス, DI〜 | QUARTET Engineers' Blog
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode