タグ

AngularJSに関するtsuwatchのブックマーク (15)

  • AngularJS についての所感

    AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶった諸兄にひとつだけ言いたいのは、共感脳を養った方がモテるということだ。 チキンハート的弁解: 以下はAngularJSに関するつらさを述べることに専念するために、美点を挙げていないだけであってAngularJSを全方位的に貶めたり、何かと比べて明確にクソだというような意図はない。 画像は AngularJS: The Best Parts · Anand Mani Sankar からの引用。X軸にある www.bennadel.com は AngularJS 大好きさん。 辛1. $scope が

    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

    3分で分かるAngularJSセキュリティ - teppeis blog
  • AngularJSとサーバーサイドテンプレートの混在とngNonBindable

    Angularとサーバーサイドテンプレートの混在 先日リリースされた某サービス(他社)がAngularを使っていて、XSSがボロボロ出てくるだとか、{{var}} な形式で値を入力するとng-template側でテンプレーティングされるだとかの話がありました。 詳しくは見ていないので、今回の話とまったく同じかは把握していませんが、サーバーサイドテンプレートを混在させると、次のようなことが起こりえます。 例えばejsとAngular サンプルとしてスカスカなControllerを用意します。 angular.module('app', []).controller('AcmeCtrl', function($scope) { $scope.foo = 'bar'; }); ejsは次のようなテンプレートになっているとします。

    AngularJSとサーバーサイドテンプレートの混在とngNonBindable
  • AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO

    t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs

    AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO
  • "note"がAngularJSでどうやってSEO, Open Graphの対応をしているか|和田 晃一良|note

    noteAngularJSを使って、ブラウザで描写しているこの"note"というサービスはAngularJSを使って、JavaScript側(つまりブラウザ側)でノートの中身を公開しているみたいなのです。 それはブラウザでソースを見てみるとわかります。 例えばhttps://note.mu/sadaaki/n/nd921f3f7c635のノートのソースをChromeで見てみると・・・ まずhtmlタグにng-appのプロパティがついています。これはAngularJSを使うならば必要なプロパティで、ここからnoteAngularJSを使っているんだなあと分かります。 AngularJSは簡単に言うと、サーバー側ではなくブラウザ側でHTMLを描写する仕組みです。これを利用するとどんな利点があるのか。僕の理解している範囲内だと、サーバー側はベースとなるHTML(上のソース)と各ノートのJSO

    "note"がAngularJSでどうやってSEO, Open Graphの対応をしているか|和田 晃一良|note
  • 気軽にAngularJSを試してその成果をGitHub Pagesで公開しちゃおう☆ - Qiita

    この記事は以下の読者を対象としています。 AngularJSを使ってみたいけど何から始めていいのかわからない Gruntが便利なことは知ってるけど何をどう設定すればいいの? AngularJSを試してみよう AngularJSを体験するために今回はyeomanというツールを使うよ。これでAngularJSを使ったアプリを簡単に試せるんだ。まずはインストールから始めよう。 諸々のツールをインストールする npm みんなのパソコンにはnpmは入ってるかな?yeomanを使うには必須のツールだよ!コマンドラインを開いて以下のコマンドを実行して、バージョン番号っぽい数字が表示されればOKだよ。 入ってなかったキミは、node.jsをmacにさくっと入れてみる【n番煎じ】を参考にインストールしてみてね!MacでもLinuxでも大丈夫だよ! gruntとbower npmが入ったらgruntとbowe

    気軽にAngularJSを試してその成果をGitHub Pagesで公開しちゃおう☆ - Qiita
  • 今、AngularJSというフレームワークがヤバい - (゚∀゚)o彡 sasata299's blog

    2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第3弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態(要素の追加・削除や、状態のon/off など)を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが(これは directive と呼ばれます)、この ng というのは AngularJS の2文字目と3文字目を表

  • Angular + Rails with no fuss - Sébastien Saunier

    I haven't been satisfied with the way my front-end code (mainly based on JQuery) has grown with my previous rails app, so I took the time to sit and explore the great front-end framework we now have. I still like handling the routing in Rails with several pages, it feels wrong to move that logic to the javascript layer. I don't want to build a single-page application. But having some canonical way

  • AngularJS 所感 (+ Sinatra) - decadence

    何これ AngularJSで遊んでるメモ 経緯 研究室でJS勉強会が行われている.1週に1回(たまに無い週も)って形で4~5回行われた. 初め数回でChrome拡張作ろう → jQueryのAjax完璧 → プロトタイプ継承完璧!とかしながら,good partsみたいなものを適宜考えながらやっていった. やることがなくなったので何しよう → AngularJSとか流行ってるしやるか! 所感 まずAngularJS使う機会として3通りぐらいに分けれそう 1. クライアントサイドだけで完結するパターン 2. APIのみ提供するサーバを持ちつつクライアントサイドをほぼ静的に書くパターン 3. RailsなどのWAFと組み合わせて使うパターン AngularJSを触れて良い所として,以下のようなものが順に挙げられる Controllerを用いた明示的Scope document.getEleme

  • Rails4.0でangularjsを使ってRESTfulなajaxを実装する - is Neet

    長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f

    Rails4.0でangularjsを使ってRESTfulなajaxを実装する - is Neet
  • AngularJSとRails4を組み合わせる - ワザノバ | wazanova

    https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Railsアプリのホスティングサービスを提供しているShelly Cloudがブログで、フロントでAngularJS、バックエンドでRails 4を採用するときの留意点について、まとめています。使用しているコードサンプルはこちらになります。 1) Building a JSON API in Rails RailsAPIをいちから作ってみる。angularjs-rails-resourceのようなライブラリを使うときは詳細が違ってくるが、考え方は概ね同じ。 Routing namespace :api

  • AngularJSのMVWパターンを理解する - Qiita

    12/4の記事(AngularJSを使ったWebアプリのアーキテクチャ設計)で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW(Model-View-Whatever)パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題(フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど)によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe

    AngularJSのMVWパターンを理解する - Qiita
  • お前のAngular.jsはもうMVCではない。と言われないためのTutorial - Qiita

    JavaScriptフレームワークに興味あるし、Angular.jsを使ってみようかな・・・ そんな純真無垢なあなたを混沌の世紀末に引きずり込むのが、ほかでもないTutorialなのです。 TutorialではほぼControllerしか出てこないので、素直にこの通り書いているとまず間違いなく3カウントでControllerにコードが集中するいわゆるFat Controllerになり、せっかくMVCフレームワークも地獄の荒野になります。 実は、Angular.jsでまず目を通すべきなのはDeveloper GuideのConceptual Overviewです。これを読めばどう処理を分割するかがきちんと書かれていますが、以下ではそれ+経験をもとにAngular.jsで正しくMVCを使用するためのポイントをまとめました。 Angular.jsの3原則 1.Controllerはイベントハンド

    お前のAngular.jsはもうMVCではない。と言われないためのTutorial - Qiita
  • AngularJSの素晴らしさを整理してみる - pochi's weblog

    久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま

    AngularJSの素晴らしさを整理してみる - pochi's weblog
  • AngularJSのスゴさが伝わるデモ

    当サイトの趣旨 AngularJS のキモは動的なデータバインディングにあり、データを変えたら View が動的に変わるということです。これをクライアントサイドのみでのデモで実感するのは難しい ところがあります。そこで当サイトではサーバーサイドとの通信をまじえた実用的な AngularJS のデモを構築しました ソースコードなどを見たりしつつ、あそんでみてください。 (このデモサイトのサンプルコードは AngularJS と node.js で記述されています。) サインアップフォーム 簡単な管理画面風のデモ こちらのコードは github.com/tokuhirom/demo.64p.orgで確認できます こんなデモもいれてよ、みたいな提案があれば p-r で送っていただければホスティングします。 ここを見て! AngularJs のキモは、データをかえるといいかんじに HTML がかき

  • 1