その使い方はもう古いかも？AngularJS老化チェック（ディレクティブ篇） - Qiita
const app = angular.module("app", []); class MyAppCtrl { } app.component("myApp", { template: `<greeting name="'World'"></greeting>`, controller: MyAppCtrl }); class GreetingCtrl { get upperName() { return this.name.toUpperCase(); } } app.component("greeting", { bindings: { name: "=" }, template: `<h1>Hello {{$ctrl.upperName}}!</h1>`, controller: GreetingCtrl }); angular.bootstrap(document.body, [
AngularJSのng-repeatを使ってラジオボタンを作成 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
スクリプト内にラジオボタンに表示するラベル名と値を定義し、ng-repeatを使ってラジオボタンを作成する方法をまとめました。 デモとコードサンプルはこちら。 ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．$parent属性を使用する方法 ２．JavaScriptのプロトタイプ継承使って設定 ３．ラジオボタンのng-change属性の使用例 スクリプト内に定義した$scope.prefsの配列データをng-repeatを使ってラジオボタンを生成する例を下記に示します。 <div class="radio" ng-repeat="item in prefs"> <label> <input type="radio" ng-model="$parent.selectedPref" value="{{item.id}}">{{item.name}} </label> </di
AngularJSモダンプラクティス - Qiita
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS | Stephen Walther
ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS This is the first part in a multiple part blog series on building ASP.NET 5 (ASP.NET vNext) apps with AngularJS. In this series of blog posts, I show how you can create a simple Movie app using ASP.NET 5, MVC 6, and AngularJS. ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS ASP.NET 5 and AngularJS Part 2, Using t
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
Angular.jsのディレクトリ構成のベストプラクティスを探る - Qiita
Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent Calenderを機会に勉強会で話した内容をまとめてみます。 元スライドはこちら -> http://slides.com/sugawararyousuke/ng-curry-2 まとめ疲れたので スライドの前半部分だけの話をまとめます。 このテーマで話そうと
利用しているAngularモジュールライブラリ一覧
これは AngularJS Advent Calendar 2014 の(12/10)の投稿です。 当初予定していた内容とは違う内容になりましたことにつきまして申し訳ないです。 これから新規のプロジェクトでAngularJSを使おうかと迷っている人のために 自分のプロジェクトで使っているor検証したAngularJSモジュールライブラリを晒したいと思います。 プロジェクト上、CoffeeScriptを使っているため、 コード例がCoffeeScriptになっていることはご承知置きください。 angular-resource 概要 言わずとしれたREST APIを使いやすくしてくれるモジュールです。 使い方 resource = $resource '/users/:id', { id: '@id' } user = resource.get id: 100
AngularJSでAPIをコールし非同期で画面を更新する - Qiita
先日にはてブのホットエントリになってたこの記事（Promises: ブラウザーJavaScriptの新しい非同期標準になるか？）をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。 というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました（応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます）。 デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3 下記にソースの説明をします。 ※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^; ① ソースツリーのWEB公開領域に、適当にJSONファイルを用意
こわくない Protractor - Qiita
Angular Advent Calendar 2014 の 17 日目の記事です。Angular そのものではなく、AngularJS 用の E2E テストツールである Protactor について書きます。（日付越えてしまいました。すみません・・・。） Angular チームが作っているという Protractor。Angular アプリの E2E テストをするならこれに違いないと思いつつも、使い始める前はいろいろこわい点がありました。 コードがどこで動いているかわからなくてこわい。 処理がどういう順序で実行されるかわからなくてこわい。 この記事ではこれらの点について説明し、Protractor を自信を持って使えるようになることを目的としています。 読者としては以下のような方を想定します（主に先日の自分）。 Protractor のインストールをして動かしてみた。 日頃から Prom
Testing AngularJS apps with Protractor
If you are developing an AngularJS application, use Protractor to test it! Why? Protractor is an end-to-end testing framework for AngularJS applications and works as a solution integrator - combining powerful tools and technologies such as NodeJS, Selenium, webDriver, Jasmine, Cucumber and Mocha. It has a bunch of customizations from Selenium to easily create tests for AngularJS applications. Prot
New Angular Router
Angular New Router Guide Configuring the Router- This guide shows the many ways to map URLs to components. Getting Started- These are instuctions for starting a new app with the New Router with AngularJS 1.4. Component Lifecycle Hooks- Lifecycle hooks let you control each stage of a route navigation. API ngViewport - An ngViewport is where resolved content goes. ngLink - Lets you link to different
AngularUI Routerのつかいかた
まえおき AngularUI RouterはAngularJSのルーティングモジュール。 AngularJSの標準のルーティング機能より高機能で、ページ内に複数のviewを持ったり、 階層化されたviewを利用することなどができる。 最終的なプロジェクトの目標はngRouteに取って代わって標準搭載されることだそうで、AngularJS本体も興味を示しているらしい（GitHubのwikiに書いてある）。 で、ちょこっと触ってみて、実際の使い方に触れた解説記事は少ないようなのでざっくり使い方を書く。 https://github.com/angular-ui/ui-router/wiki ちなみに上記の公式のwikiを読めば分かることしか書いてない。 あとQiitaに抜粋版を書いたので、細かい説明が要らない人はたぶんそっちのがわかりやすい。 AngularJS - AngularUI Rou
業務で安心して使える厳選AngularJSモジュール8選＋α | 株式会社LIG(リグ)｜コンサルティング・システム開発・Web制作
最近AngularJSとずっとにらめっこしています。やっていて楽しいです。 こんにちは、先生です。 最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。 そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。 2014年11月現在でのライセンスも明記していますので参考にしてください。 安心して使えたモジュール8選 1. Angular directives for Bootstrap http://angular-ui.github.io/bootstrap/ MIT License Bootstrapをディレクティブにしているモジュールです。 元々のB
AngularJSのベストプラクティスに従っていますか？ -- angular-hintの使い方 - Qiita
最近、AngularJSリファレンスという書籍を書いていたのですが、紙面や時間の都合上書けなかったこともたくさんありました。 というわけで、書籍に書ききれなかった内容を落ち穂拾い的に紹介していきたいと思います。 今回はangular-hintというツールを紹介します。 https://github.com/angular/angular-hint これは、Angularチームの1人が開発しているツールで、AngularJSを使って開発したアプリケーションに組み込んで実行すると、エラーを検出してくれたり、ベストプラクティスに従っているかどうかをチェックしてくれたりします。 ただし、説明文にWIP(Work In Progressの略)と書いてあるので、まだ開発中のようです。 angular-hintを組み込むとアプリケーションが動かなくなることもあるのでご注意ください。 angular-hi
そろそろ押さえておきたい AngularJSのセキュリティ
Senior Security Engineer at Recruit Technologies Co., Ltd.
ビューのレンダリングが始まる前に特定の処理を完了させたいとき - Qiita
angular.module('app', ['ngRoute']). config(function($routeProvider) { $routeProvider.when('/', { templateUrl: 'sample.html', controller: function($scope, currentUser){ $scope.user = currentUser; }, resolve: { currentUser: function($q, $http) { deferred = $q.defer() $http(url: '/yourappapi/v1/current_user', method: 'GET') .success(function(res){ deferred.resolve(res.user) }); return deferred.promis
ng-japanに参加しました | アシアルブログ
こんにちは。宇都宮です。今回は、週末に参加したイベントのレポートです。 3/21（土）に、ng-japanという日本初のAngularJSのカンファレンスが開催されました。会場は渋谷マークシティ13Fにある、サイバーエージェントさんのセミナールームでした。 今回のカンファレンスは、スピーカーにAngularJSのコアチームのメンバーが3名いるのが最大の特長でしょう。当然トークは英語なのですが、英=>日の逐次通訳付きなので、英語が苦手な人でも大丈夫なカンファレンスでした。 参加者の最大の関心事は「Angular 2はどうなるのか？」という点にあったと思います。私自身は、今回のカンファレンスに参加して、Angular 2について前向きな気持ちになれました。 以前は、「Angular 1系から2系への移行は無理」「1系はあと2年くらいでサポート終了」と思っていましたが、1系から2系へはアップグレ
乗り遅れるな！よりパワフルになったAngular1.4リリースまであと一週間！ Angular1.4 and beyondーng-japan 2015
乗り遅れるな！よりパワフルになったAngular1.4リリースまであと一週間！ Angular1.4 and beyondーng-japan 2015 佐川 夫美雄（Ashiras, inc.） Angularをテーマとした日本初のカンファレンス 「ng-japan」が2015/3/21(土)サイバーエージェントで開催されました。 ng-japanは、参加者350名以上という、単独JavaScriptフレームワークをテーマにしたカンファレンスとしては、非常に多くの方が来場。日本でAngularを利用して活躍しているスピーカーや、Google Angularチームのメンバーを迎え（逐次通訳あり）、Angularの現状と未来についての学びの場となりました。 本日からそのイベントの模様を6回に渡り、あますところなくお伝えしていきます！ Angular1.4 and beyond – Chiray
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSの高速化
angular.js で $location.search を実行した時に画面が更新されるのを防ぐ。 - Qiita
