私はAngularJSが初めてで、複数のビューに少し苦労しています。たぶん、誰かがこれをどのように行うべきかを明らかにすることができます。
私が達成しようとしていること: 私はある種のファイル エクスプローラーを実装しようとしています。ここには 2 つの列があります。左側の列にはフォルダー内のすべてのサブフォルダーとファイルが含まれ、右側の列にはファイルまたはフォルダーの詳細情報が表示されます。クリックされます。ユーザーがフォルダーをダブルクリックすると、ビューが更新されてサブフォルダーが一覧表示され、詳細列がクリアされます。
基本的に多かれ少なかれ機能していますが、左の列は、そうでない場合でも常に更新されています。そして、それは非常にハッキーだと確信していますが、これを改善する方法がわかりません。
複数のビューには ui-router を使用し、REST 呼び出しには Restangular を使用していますが、この例ではダミー データに置き換えています。
ブートストラップ:
// app.js
var app = angular.module('explorer', ['ui.compat']);
これは私のメインのテンプレートです:
// app.html
[...]
[...]
<div ui-view></div>
これはコンテナー テンプレートで、最初に読み込まれます。
// files.html
<div ui-view></div>
<div ui-view="details"></div>
これは、左側のファイル リストのテンプレートです。
// files-list.html
<table>
<thead>
<tr>
<th>Filename</th>
<th>Size</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="file in files">
<td><a href="#/{{ file.type }}/{{ file.id }}">{{ file.name }}</a></td>
<td>{{ file.size }}</td>
<td>{{ file.modified }}</td>
</tr>
</tbody>
</table>
そして、これは詳細テンプレートです:
// files-details.html
<div>{{ file.name }}</div>
これは、左の列にリストを表示するための最初のコントローラーです (申し訳ありませんが、CoffeScript です)。
app.controller 'ListController', ['$scope', '$state', ($scope, $state) ->
$scope.files = [{
"id": "12", "type": "folder", "name": "testfolder", "size": "", "modified": "01.01.2000"
}, {
"id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"
}]
]
そして、これは詳細コントローラーです:
app.controller 'DetailsController', ['$scope', '$stateParams', ($scope, $stateParams) ->
$scope.file = { "id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"};
]
そして、これらは私の面倒なルーティング ルールです。
app.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$urlRouterProvider
.when('/folder', '/folder/1')
$stateProvider.state 'list', {
url: ''
views: {
'': {
templateUrl: 'files.html'
},
'column1@list': {
templateUrl: 'files-list.html'
controller: 'ListController'
},
'column2@list': {
templateUrl: 'files-detail.html'
}
}
}
$stateProvider.state 'folder', {
abstract: yes
templateUrl: 'files-list.html'
controller: 'ListController'
}
$stateProvider.state 'folder.list', {
url: '/folder/{id}'
templateUrl: 'files-list.html'
controller: 'ListController'
}
$stateProvider.state 'list.file', {
url: '/file/{childId}'
views: {
'': {
templateUrl: 'files-list.html'
controller: 'ListController'
}
'details': {
templateUrl: 'files-detail.html'
controller: 'DetailsController'
}
}
}
]