angular-ui-router(0.2.8) release dir is empty…


angular-ui-routerをbowerからinstallするとreleaseフォルダの中身が空だった。。

どうやら間違ってangular-ui-routerのbower.jsonにignore: jsを追加してしまった模様。。

現状修正されてますが、bowerからいれると修正されていない0.2.8が入るので以下のコマンドでインストールしてください。

bower install --save angular-ui-router#0.2.8-bowratic-tedium

0.2.9になると修正されてるでしょう。

Angular-UI-Bootstrap TAB


Angular UI Bootstrapタブを使ってみました。

ngRouteやui-routerを使いだすとbootstrapタブがリンクで切り替えてるため使えなくなってしまいます。

AngularUIにはAngularJSのためのbootstrapコンポーネントが用意されています。

いつも通りbowerでインストールします。

bower install angular-bootstrap --save

スクリプトを読み込みます。

<script src="/vendors/angular-bootstrap/ui-bootstrap-tpls.min.js></script>

tplsテンプレートが含まれているものです。こちらを使う方が無難でしょう。

angularモジュール追加します

var app = angular.module('app', ['ui.bootstrap']);

で使い方はとっても簡単

<tabset>
	<tab heading="ヘッダー1">内容1</tab>
	<tab heading="ヘッダー2">内容2</tab>
	<tab heading="ヘッダー3">内容3</tab>
</tabset>

オプションとかはマニュアル読んでください←

angular-ui bootstrap
http://angular-ui.github.io/bootstrap/

Angular UI Router


前回ngRoute使いましたが、よくよく調べるとangular-ui-routerの方が多機能なようです。

こちらを使ってみましょう!

bower install angular-ui-router --save

インストール完了!

<script src="/vendors/angular-ui-router/release/angular-ui-router.min.js></script>

インクルード!あとはマニュアル通りに使いますー。

var app = angular.module('<app名>', ['ui.router']);

app.config(function($urlRouterProvider, $stateProvider) {
	$urlRouterProvider.otherwise('/index');

	$stateProvider
		.state('index', {
			url: '/',
			templateUrl: '/templates/dashboard.html'
		})
		.state('test', {
			url: '/test',
			templateUrl: '/templates/test.html'
		});
		.state('test.item', {
			url: '/:id',
			templateUrl: '/templates/test.item.html',
			controller: 'TestItemController'
		});
});

テンプレートが入る場所はng-viewではなく、ui-viewになりますー。

<div ui-view></div>

コントローラはこんな感じ

app.controller('TestItemController', function($scope, $stateParams) {
	// URL引数の取得: $stateParams.id
}

リンクするときはui-sref=”状態名”でも可能です。
もちろん今まで通りhrefでも大丈夫です!
引数の指定も簡単☆

<a ui-sref="test"></a>
<a ui-sref="test.get({id:0})"></a>

angular-ui-routerの何が便利かというと、状態に階層を設け、ページの一部分を書き換えることができます。
上記、例の場合。test→itemといった構造になっています。そのため、test.htmlのui-viewがtest.item.htmlに更新されます。

時間が無くなったので今回はこの辺で!

AngularJS angular-route angular-ui-router


AngularJS使っていてngRouteがなぜか動かないなーって思ってたらangular-ui-router使ってました。。。

angular-routeとは全くの別物なんですね。。

bower install angular-route --save

でインストール完了!

<script src="/vendors/angular-route/angular-route.js></script>

インクルード!して、あとはマニュアル通りに普通に使えますー。

angular.module('<app名>', ['ngRoute']).config(['$routeProvider',
	function($routeProvider) {
		$routeProvider
		.when('/index', {
			templateUrl: '/templates/index.html'
		})
		.when('/test', {
			templateUrl: '/templates/test.html'
		})
		.otherwise({
			redirectTo: '/index'
		});
	}
]);

あ、テンプレートで指定した部分はng-viewのところに入ります。

<div ng-view></div>

 

[追記] angular-ui-routerのほうが便利そうだったのでそちらも使ってみました!
http://nekok.com/2014/02/angular-ui-router/

INPUT TAG IN NG-REPEAT 2


昨日動かないといっていた問題解決しました。

ネットをさまよっていると、、

http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs/14379763#14379763

参考になりそうな質問を発見!

公式ではできないってことになってるけど、解決策としてng-repeatの中でng-formも生成すればvalidation効くようになるよ☆

なるほど。ng-formも一緒生成すればそこのcallbackにちゃんと設定されるってことですね。

やってみた・・・。動かない・・・。なーぜー?

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="form[field.name].$dirty && form[field.name].$invalid">
			<span ng-show="form[field.name].$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

と思ってよく見比べてみたら、validationをform[…]がinnerFormになっていることに気付くΣ

外のほうのformの中のフィールドに中からはアクセスできないのね。

昨日試した感じ外からはこの方法でアクセスできた気がするんだけど。
いろいろ綺麗に書き直して、、、

<form>
<ng-form name="innerForm" class="form-group" ng-repeat="field in fields">
	<label class="col-sm-2 control-label">{{ field.label }} {{ (field.required) ? '*' : '' }}</label>
	<div class="col-sm-{{ field.size }}">
		<input class="form-control" type="{{ field.type }}" name="{{ field.name }}"
			ng-model="item[field.name]" ng-required="field.required" />
		<div ng-show="innerForm.$dirty && innerForm.$invalid">
			<span ng-show="innerForm.$error.required">{{ field.label }}を入力してください</span>
		</div>
	</div>
</ng-form>
</form>

以上!すっきり。

input tag in ng-repeat


AngularJS使ってるんだけど。

ng-repeatの中でinputつくったら入力してもvalidationとか効かにゃい。

なんてこった。Σ(๑ l 口 l ๑ )

ng-repeatの外で同じ名前でinputつくると外のほうのinputは反応する。外のほうで入力すると中のほうも効くようになる・・・。

ぐぬぬ。解決策探し中。

→ 解決編