Databases
StackOverflow2013
Postsdbo
POProper use of views and subviews in AngularJS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProper use of views and subviews in AngularJS
    text
    copied!<p>I'm new to AngularJS and I'm struggling a little bit with my multiple views. Maybe someone can shed a light on how this should be done.</p> <p>What I'm trying to achieve: I'm trying to implement some kind of file explorer, where there are two columns: the left column contains all subfolders and files in a folder, the right column shows detail infos when a file or a folder is clicked. When the user double-clicks a folder the view should refresh and list the subfolder while the detail column should be cleared.</p> <p>It's basically working more or less but the left column is refreshing always even if it shouldn't. And I'm pretty sure it's very hacky, but I don't know how to improve this.</p> <p>I'm using ui-router for the multiple views and Restangular for REST-calls, which I replaced with dummy data in this example.</p> <p>Bootstrapping:</p> <pre><code>// app.js var app = angular.module('explorer', ['ui.compat']); </code></pre> <p>This is my main template:</p> <pre><code>// app.html [...] [...] &lt;div ui-view&gt;&lt;/div&gt; </code></pre> <p>This is the container template, that is loaded at the very beginning:</p> <pre><code>// files.html &lt;div ui-view&gt;&lt;/div&gt; &lt;div ui-view="details"&gt;&lt;/div&gt; </code></pre> <p>This is the template for the file list on the left: </p> <pre><code>// files-list.html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Filename&lt;/th&gt; &lt;th&gt;Size&lt;/th&gt; &lt;th&gt;Modified&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr data-ng-repeat="file in files"&gt; &lt;td&gt;&lt;a href="#/{{ file.type }}/{{ file.id }}"&gt;{{ file.name }}&lt;/a&gt;&lt;/td&gt; &lt;td&gt;{{ file.size }}&lt;/td&gt; &lt;td&gt;{{ file.modified }}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>And this is the details template:</p> <pre><code>// files-details.html &lt;div&gt;{{ file.name }}&lt;/div&gt; </code></pre> <p>This is the first controller for displaying the list in the left column (sorry, it's CoffeScript):</p> <pre><code>app.controller 'ListController', ['$scope', '$state', ($scope, $state) -&gt; $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" }] ] </code></pre> <p>And this is the details controller:</p> <pre><code>app.controller 'DetailsController', ['$scope', '$stateParams', ($scope, $stateParams) -&gt; $scope.file = { "id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"}; ] </code></pre> <p>And these are my messy routing rules:</p> <pre><code>app.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) -&gt; $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' } } } ] </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload