Правильное использование представлений и подзонов в AngularJS

Question

Я новичок в AngularJS, и я немного борюсь с моими многочисленными взглядами. Может быть, кто-то может пролить свет на то, как это должно быть сделано.

Что я пытаюсь достичь: Я пытаюсь реализовать какой-то файловый проводник, где есть два столбца: левый столбец содержит все подпапки и файлы в папке, правый столбец показывает подробные сведения, когда файл или папка. Когда пользователь дважды щелкает по папке, представление должно обновляться и перечислить подпапку, в то время как столбец подробностей должен быть очищен.

Это в основном работает более или менее, но левая колонка освежает всегда, даже если это не так. И я уверен, что это очень хаки, но я не знаю, как это улучшить.

Я использую ui-router для множественных представлений и Restangular для REST-вызовов, которые я заменил фиктивными данными в этом примере.

Бутстрапирование:

// 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"}; 
] 

И это моя грязная маршрутизация ru les:

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' 
     } 
    } 
    } 
] 

Answer 1

Но я вижу несколько вещей, которые могут быть неправильными.

• Вы используете модуль ui.compat. Вместо этого используйте ui.state. compat - для обратной совместимости, если у вас есть существующий проект с использованием ng-view и routeProvider.

• Я бы в гнезде просмотрел детали внутри вид списка файлов. Это помогает, потому что теперь, когда вы переключаетесь между файлами, обновляется только просмотр сведений, а не список. Я добавил журнал, чтобы доказать это. Смотрите мой планкр ниже. Перемещение из папки в файл и обратно несколько раз. Контроллер «list» только один раз запускает экземпляр.

• Я также слиты ваше состояние детали в единое государство с URL из url: "/:type/:id", поэтому он захватывает как/папку/идентификатор и/файл/ID

Вот plunkr я сделал для вас: http://plnkr.co/edit/6BEIs6?p=preview

---

Также вы сказали:

Когда пользователь дважды щелкает папку й e view должен обновить и указать подпапку, в то время как столбец подробностей должен быть очищен.

Таким образом, я также сделал версию, которая может укорениться в папках (дважды щелкните их), точно так же, как настоящий проводник файлов, и вы также можете вернуться назад (одним щелчком мыши ../).

http://plnkr.co/edit/tAjv2I?p=preview

Я думаю, что его довольно хорошо, хотя, если у меня было больше времени, было бы хорошо, если URL также хранится ваше местоположение в папках (а не только то, что тип файла, чтобы показать в деталях).

---

EDIT: Поэтому я хотел попытаться выяснить, как сделать синхронизацию пути папки к пути к местоположению. Ну, я понял это, но для этого требуется довольно много вручную. Например, у меня есть только одно состояние с URL-адресом «* path», который просто захватывает весь путь даже символами «/». Затем я должен разобрать его и заставить его делать то, что мне нужно. Смотрите plunkr:

http://plnkr.co/edit/1dDN3x?p=preview