<!doctype html>
<html lang="ja" ng-app="project">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- [a] - routeモジュールを読込 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<!-- [b] - AngularJS用firebaseモジュールを読込 -->
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<!-- [c] - 見た目を調整 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="project.js"></script>
<title>Wire up a Backend</title>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div><!-- [d] - ng-view属性を追加 -->
</body>
</html>
angularJS sample
=======================================
以下のブログ記事内で、解説してます
[公式サンプルから学ぶAngularJS (2)](http://1010real.hateblo.jp/entry/2014/05/08/162845)
// [a] - projectモジュールを定義。依存モジュールとしてngRouteおよびfirebaseを追加
angular.module('project', ['ngRoute', 'firebase'])
// [b] - firebaseサービスのURLを登録し、fbURLでアクセス可能にします。
// ※ここは自分で登録したFirebaseのURLに差し替えてください
.value('fbURL', 'https://intense-fire-7044.firebaseio.com/angularSample3/')
// [c] Firebaseサービスのインスタンスを返す関数を登録
.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL));
})
// [d] ngRouteモジュールの設定
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'ListCtrl',
templateUrl:'list.html'
})
.when('/edit/:projectId', {
controller:'EditCtrl',
templateUrl:'detail.html'
})
.when('/new', {
controller:'CreateCtrl',
templateUrl:'detail.html'
})
.otherwise({
redirectTo:'/'
});
})
// [e] 以降、各コントローラの挙動を定義
.controller('ListCtrl', function($scope, Projects) {
$scope.projects = Projects;
})
.controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
$scope.save = function() {
Projects.$add($scope.project, function() {
$timeout(function() { $location.path('/'); });
})
$location.path('/');
};
})
.controller('EditCtrl', function($scope, $location, $routeParams, $firebase, fbURL) {
var projectUrl = fbURL + $routeParams.projectId;
$scope.project = $firebase(new Firebase(projectUrl));
$scope.destroy = function() {
$scope.project.$remove();
$location.path('/');
};
$scope.save = function() {
$scope.project.$save();
$location.path('/');
};
});
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<table>
<thead>
<tr>
<th>Project</th>
<th>Description</th>
<th><a href="#/new"><i class="icon-plus-sign"></i></a></th><!-- [a] - ページ遷移しない様に、urlの最初に#をつける -->
</tr>
</thead>
<tbody>
<tr ng-repeat="project in projects | orderByPriority | filter:search | orderBy:'name'"><!-- [b] - フィルタ・ソート条件を指定 -->
<td><a href="{{project.site}}" target="_blank">{{project.name}}</a></td>
<td>{{project.description}}</td>
<td>
<a href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
</td>
</tr>
</tbody>
</table>
<form name="myForm">
<div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}"><!-- [a1] - ng-class:エラー時にクラス変更 -->
<label>Name</label>
<input type="text" name="name" ng-model="project.name" required>
<span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">Required {{myForm.name.$pristine}}</span><!-- [a2] - ng-show:エラー時のみ表示） -->
</div>
<div class="control-group" ng-class="{error: myForm.site.$invalid && !myForm.site.$pristine}">
<label>Website</label>
<input type="url" name="site" ng-model="project.site">
<span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="help-inline">Required</span><!-- [a3] - 必須項目チェック -->
<span ng-show="myForm.site.$error.url" class="help-inline">Not a URL</span><!-- [a4] - url形式かどうかをチェック -->
</div>
<label>Description</label>
<textarea name="description" ng-model="project.description"></textarea>
<br>
<a href="#/" class="btn">Cancel</a>
<!-- [a5] - ng-disabled:内容に不備がある場合にボタンをdisabled -->
<button ng-click="save()" ng-disabled="myForm.$invalid" class="btn btn-primary">Save</button>
<!-- [b] - project.$removeがあるか(=データが存在するか)により表示制御 -->
<button ng-click="destroy()" ng-show="project.$remove" class="btn btn-danger">Delete</button>
</form>