カテゴリー: AngularJS

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のタブを使ってみました。

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/

前回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使っていて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/