AngularJSでカスタムディレクティブを作ってみよう
対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJS（バージョン1.4)を使用し、Chrome（43.0）、IE11、Firefox（38.0）、Safari（8.0.6）の環境にて確認を行っています。 カスタムディレクティブの使い所 AngularJSを使っていて、下記のようなことを思い始めてきた時には、カスタムディレクティブを使ってみるとよいでしょう。 コントローラ内でちょっとした処理なのだから直接DOMを操作したい。 何度も何度も同じ記述してng-includeなどを使って共通化したが、同時にコントローラもセットで管理したい。 jQueryベースのサードパーティなどDOM操作をするためのライブラリを自
自己流JavaScriptを書いていた人がAngularJSのユニットテストで躓いた点 - 2015-07-10 - ククログ
結城です。 最近、AngularJSを使ったWebアプリ開発のプロジェクトに参加する事になり、とりあえず一通りの事は把握しておかなければと思って公式のチュートリアル（英語）を実践してみたのですが、JavaScriptの経験が浅い人だとハマらなさそうだけれども、中途半端に経験があったせいでドハマり、という場面に遭遇してしまいました。 恥ずかしい話ですが、せっかくなので同じように躓いている人（もしいれば）のために、分かった事や理解のポイントを書き記しておこうと思います。 この記事の対象読者は、以下のような状況にある人です。 フレームワークを使わないJavaScript（例えば、jQueryを使ったJavaScript程度）は書いた事がある。 自動テスト（特に、ユニットテスト）は書いた事がある。 AngularJSを始めたばかりである。 依存性注入という概念は理解できるが、実際にどう使うかはあま
安全加密检测
已通过安全加密检测 如果没有自动跳转，请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright ? 1998 -2020. All Rights Reserved.
Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 - AngularJS + TypeScript #3 | リクルート テックブログ
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
AngularJS イベント通知 Scope#$emit, Scope#$broadcast, Scope#$on - howdylikes
$scopeのイベント通知関連の関数は以下の3つがある Scope#$emit 派生元に向けてイベントを送信（自身を含む） Scope#$broadcast 派生先に向けてイベントを送信（自身を含む） Scope#$on イベントを受信 リファレンス https://code.angularjs.org/1.4.7/docs/api/ng/type/$rootScope.Scope#$on $emitと$on $emit $emitは自身と派生元に向けてイベントを投げます イベントを区別するための名前と渡したいデータを指定 $emit(name, args); $on $onはイベントを受け取ります $onはイベント名とイベントを受け取るコールバックを指定 $on(name, listener); コールバックはeventとデータを受け取る事が可能 function(event, ...a
【AngularJS】 $on, $emit, $broadcast | コーテッグのバケツ
イベント監視を行う 指定のイベントが発生した際に実行されるリスナーを登録できる scope.$on('eventname', function(event, args) { ... }); 自分を含む下方向（子方向）へのイベント通知 イベントと一緒にデータも渡..(ry scope.$broadcast('eventname', args); そもそも親子ってなんなのよ？ コントローラーが入れ子になっている場合、AngularJSは 外側のコントローラーを親、内側を子としてみる <div ng-controller="Ctrl1"> <a href="#" ng-click="click()">click1</a> </div> <div ng-controller="Ctrl2"> <a href="#" ng-click="click()">click2</a> </div> <div
nkjmkzk.net - nkjmkzk リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ui-routerにおけるresolveの威力 #AngularJS - Qiita
最も多く使われているであろう, AngularJSの拡張コンポーネント, ui-router. 擬似的に画面遷移が必要となるようなアプリケーションをAngularJSで開発する際には、事実上必須といっても過言じゃない. 今回はui-routerに含まれているresolveを活用するお話. ui-routerとresolve ui-routerの基本的な使い方を説明したい訳ではないので、そこら辺は割愛して, resolveの使いどころから説明していく. 下記のようなstate定義があったとする. angular.module('sample', ['ui.router']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/', templateUrl:
generator-webapp をベースに AngularJS を利用していくのが学習としては良いということなのでやってみた - albatrosary's blog
先日のYEOMANハンズオンでgenerator-webappをベースにしてAngularJSのモジュールを入れていくのが学習効果としては高いというコメントを見たので実際にやってみました。目標としてはAngularJSとui-routerが使えれば良いかなということで次の通りとした。 angularのインストール ui-routerのインストール ルーティングの実装 ビルドの実施 前準備 前準備として generator-webapp を登録します： $ npm install -g generator-webapp 次にプロジェクトを作成します。今回はオプションをすべて利用してみます： $ mkdir webapp && cd $_ $ yo webapp _-----_ | | .--------------------------. |--(o)--| | Welcome to Ye
[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は、画面遷移時にコントローラを跨いで値を受け渡す方法をまとめてみました。「良い」とされる例もあれば、「悪い」と思われる例もありますが、お付き合いください。 自前グローバルオブジェクトを使う ある意味で最強なグローバルオブジェクト ( トップレベルのオブジェクト ) ですが、今回のような例で使用した場合、チーム内のコードレビューでお説教されることうけあい。 サンプル 一応、サンプル貼っておきます。( 真似することはお勧めしません ) ソース シンタックスハイライトもおかしなことになってしまう破壊力… var Globals = {}; // ('A`) (function () { angular.module('appName', ['ngRoute'], function($routeProvider) { $routeProvide
![[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0d3607a7a199f07c7b213c833b97dd2b983c6b2/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
Angular.jsのディレクトリ構成のベストプラクティスを探る - Qiita
Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent Calenderを機会に勉強会で話した内容をまとめてみます。 元スライドはこちら -> http://slides.com/sugawararyousuke/ng-curry-2 まとめ疲れたので スライドの前半部分だけの話をまとめます。 このテーマで話そうと
AngularJSのcontrollerAs使い方まとめ | QUARTETCOM TECH BLOG
最初に AngularJSを使い始めて１年半、ここ最近ではまったのがスコープ継承による値の問題でした。 （【AngularJS】スコープの継承で地味にハマりがちなこと で丁寧に解説されています） そんな時にcontrollerAsを使うと値の問題から解放されるよ、と教えてもらいました。 controllerAsの使い方と既存コードに導入する方法を調べているうちに、自分が書いていたコードでスコープの使い方が間違っていたことも浮き彫りになりました。 この記事ではそんな問題点を解消しつつcontrollerAsを使う方法について紹介したいと思います。 スコープの使い方の何が間違っていたか 問題のあるコード // controller .controller('MainCtrl', ['$scope', function ($scope) { $scope.list = [{id:1}, {id:
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
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angularjs UI Routerの使い方 - Qiita