[Middleman 3][AngularJS 1]ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
はじめに 前回のウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替えでngRouteを使いました。今回はより高機能なAngularUI Routerを使ってみます。今回はngRouteでやったことと同じことをAngularUI Routerでやってみたいと思います。 AugularUI Routerとは AngularUI Routerとは、ngRouteと同じルーティングモジュールのひとつ。ngRouteはURLを元にルーティングしていましたが、AngularUI Routerは状態（State）を元にルーティングを行います。State/Viewの入れ子ができ、複数のViewを作れるのが特徴です。 AngularUI Router Guide AngularUI Routerインストール $ bower install angular-ui-r
![[Middleman 3][AngularJS 1]ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
ui-routerでページタイトルを動的に変更する - Qiita
viewの作成 ビューの変更を確認するために下記の3つのビューファイルを用意します。 index.htmlのtitle要素にpage-titleディレクティブを使用しています。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="UTF-8"> <title page-title></title> </head> <body> <div ui-view></div> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/ui-router/release/angular-ui-router.min.js"></script> <script src="app.js"></
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ（前編）。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか？ 使いにくいところは？ などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 ふだんなかなか聞けない、AngularJSを現場で使っている人たちの本音が詰まっていたセッションの内容をダイジェストで紹介しましょう。 AngularJSのFAQ 川田氏 今日は、AngularJSを使って開発している方、AngularJSの本を執筆している方々に、Angu
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
angular.js ng-repeatの組み込み変数 | Webエンジニアブログ
ng-repeatのビルトイン変数を利用してtableの背景色を一行おきに設定 AngularJSのng-repeatディレクティブで利用できる変数 ng-repeatの組み込み(ビルトイン)変数は利用頻度が高いプロパティ。 AngularJSの公式サイトでは以下のURL(英語)で使い方を確認できる。 https://docs.angularjs.org/api/ng/directive/ngRepeat 本記事では、 $index $middle $even $odd を利用してtableタブ内における繰り返し処理で、ng-repeatの組み込み変数を使ったサンプルを紹介する。 サンプルコード headタグ内では、foundation(cssフレームワーク)とangularjs本体を読み込み、サンプルとなるModelデータを定義している。 <html ng-app="webEnginee
AngularJSで、動的に入力項目数を設定する - 戯言
例えば「趣味は何ですか？」に対する回答はいくつになるかわかりません。 「料理」と答える人もいれば、「ゴルフ」と「TVゲーム」と「ショッピング」と答える人もいるかもしれない。 今回はこのように、あらかじめ幾つになるかわからない項目に対する入力画面を作るときに、AngularJS使うと簡単にできるよ、というお話です。 この例のような場合によくある入力画面は、複数行の入力欄があり、行ごとに削除ボタンがあって、入力した内容が消せるようになっており、最後の行だけは「削除」ボタンのでなく「追加」ボタンがあって、入力欄を一つずつ動的に増やせるってやつです。 こんなイメージのやつです。これはボタン押しても動きません。 ここに動くコードを置いときました。 http://jsfiddle.net/2Y88u/ 趣味の名前=月に何回やる？ 趣味の名前=月に何回やる？ 趣味の名前=月に何回やる？ これを、Angu
AngularJSでのng-includeのパス指定の方法
AngularJSのng-includeのパス指定の方法はクセがある。 例えば「template.html」を指定するにはこうする。 <ng-include src="'template.html'"></ng-include> ポイントは、srcの「ダブルクオーテーションの中にさらにシングルクォーテーションを書いてその内側にパスを書く」ということ！ クセあるでしょう？(^^); パス指定の方法でもうひとつ注意したいのが、相対パス。 ng-includeはincludeされた側のHTML内でもng-includeをネストして使うことができるが、その場合のパス指定はどうなるか？ 例えばファイルシステム上で index.html templates/template.html templates/subtemplates/subtemplate.html という位置関係になっているとする。 ま
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
別稿「TIPS：モデルをテキストボックスなどのフォーム要素にバインドするには？」でも見たように、AngularJSでは入力された値を即座にモデルに反映します。しかし、アプリの性質によっては、「即座にページに反映されるのが目障り」「モデルの更新によって非同期通信が発生する場合、通信が頻繁に発生しすぎる」などの問題が出てくるかもしれません。 そのような場合、ng-model-options属性を利用することで、モデルの更新タイミングを変更することが可能です。 モデルを更新するイベントを指定する まずは、モデルを（キー入力時ではなく）テキストボックスからフォーカスを外したタイミングで反映させる例から見ていきます。
AngularJSで楽々、フォームを作ってみよう | The Wacul Blog
AngularJSのformディレクティブは強力なバリデーション機能を提供します。 以下は基本的な使用例です。 <form name="form"><!-- 1 --> <input type="text" name="firstName" ng-model="user.firstName" required><!-- 2 --> <span ng-show="form.firstName.$error.required">何も入力されていません。</span><!-- 3 --> <button ng-disabled="foo.$invalid" ng-click="submit()">submit</button><!-- 4 --> </form> 番号ごとに説明すると formのname属性を設定します。ここではname="form"としています。 formのプロパティからfor
AngularJS 1.3のフォームまわりの機能強化
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
$locationの使用について | AngularJS 1.2 日本語リファレンス | js STUDIO
$locationは何をするものですか? APIの概要 Hashbang(#)とHTML5モード 注意事項 $locationサービスのテスト 前バージョンからのマイグレーション 関連API $locationは何をするものですか? $locationサービスは、ブラウザアドレスバー(window.locationが基)のURLを解析し、 アプリケーションで利用可能なものにします。 アドレスバーのURLの変更は、$locationサービスに反映され、 また$locationの変更は、ブラウザのアドレスバーに反映されます。 $locationサービスは、 現在のURLは、ブラウザバーに晒されているため、 そのURLを確認することが出来ます。 そのURLを変更することが出来ます。 ユーザーが下記の事を行う際に、$locationサービス自身とブラウザのURLの同期が取れるように保持します。 ブ
AngularJSでアコーディオン(toggleボタン仕様)のサンプル
クリックできる範囲 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 <dl class="accordion"> <dt ng-click="flag = !flag">クリックできる範囲</dt> <dd ng-class="{hide: flag}">テキストが入ります。テキストが入ります。テキストが入ります。</dd> </dl> .accordion, .accordion dt, .accordion dd { margin: 0; padding: 0; } .accordion { width: 300px; margin-bottom: 10px; border: 1px solid #CCC; } .accordion dt { padding: 5px 10px; } .accordion dt { background-color:
AngularJSの便利なツール20選 | POSTD
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
AngularJSでアコーディオン(toggleボタン仕様)を1分で実装
AngularJSでアコーディオンを実装する場合、jqLiteを使用して実装しようと考える人もいるかもしれないがjqLiteにはslideToggle()が含まれていないためjQueryのように実装することはできない。 ※ちなみにtoggle()もない。（toggleClassはある） https://docs.angularjs.org/api/ng/function/angular.element ng-click,ng-class,CSSアニメーションで実装 ng-clickでクリックの検出および開閉(フラグ)の切り替え、ng-classでCSSクラスの追加・削除、そしてtransitionで開閉のアニメーションを追加すれば簡単に実装できる。 やり方は簡単。まず$scope.flag = false;で初期フラグを設定する。 angular.module('myApp', []) .
AngularJS1.4とbindToController - Qiita
こんにちは。imaiです。待望のAngularJS1.4がリリースされましたね。Directive関係では、bindToControllerの機能が向上しました。 このbindToControllerとは一体何なのか。使って嬉しいことは何か。どう機能が向上したのか。について書いていきます。また、最後に自作Directiveを作っていく際に筆者がよくつまずく点を記しておきます。 この記事の対象者:AngularJSに触れたことがある、自作のDirectiveを作ったことがある bindToControllerとは AngularJS公式サイトのReferenceからbindToConrollerの説明を意訳すると、 再利用可能なコンポーネントを作るために、分離?隔離?スコープやcontrollerAsを用いる際に、bindToController:trueとすることでコンポーネントのプロパテ
【AngularJS】Directiveのscopeプロパティを理解する - フロントエンドとコーヒー
最近AngularJSを触るようになって。一番最初に詰まったのがControllerとDirectiveの関係性でした。 今回はそこで必要になってくるDirectiveのscopeプロパティについてメモ。 scopeプロパティがfalseの時 HTML <div ng-controller="MyCtrl"> <div>Controller: {{ test }}</div> <my-directive></my-directive> </div> JavaScript function myDirective(){ return { scope: false, template: '<div>Directive: {{ test }}</div>', link: function(scope){ scope.test = 'test!!!!'; } } } angular.module(
ここらでDirective Scopeの@=&をまとめておきたいと思う - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body ng-app="myApp"> <div ng-controller="SampleCtrlA"> <dir-a my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-a> </div> <div ng-controller="SampleCtrlB"> <dir-b my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-b> </div> <div ng-controller="SampleCtrlC"> <dir-c my-arr="arr"><span ng-re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular-UI-Bootstrap TAB | すてねこのダンボール箱
AngularJS入門 ｜ シリーズ ｜ Developers.IO
