Angularjs 1.5 - CRUD-страницы и компоненты

Question

Я работаю в небольшом проекте Angularjs 1.5, и я совершенно новый.

Я должен создать объект или отредактировать существующий объект, и шаблон такой же, единственное различие в логике - это вызов службы http для извлечения данных в случае обновления. Я использую ngRoute. Как я могу использовать один и тот же компонент для обеих операций?

РЕДАКТИРОВАТЬ

JS КОМПОНЕНТНЫЙ КОД

angular.
module('editProject').
    component('editProject', {
        templateUrl: 'app/edit-project/edit-project.template.html',
        controller:['$http','$routeParams', function EditProjectController($http,$routeParams) {
            var self=this;
            $http.get('rest/projects/' + $routeParams.id ).then(function(response) {
              console.log(JSON.stringify(response.data));
              self.project = response.data;
            });


        }
  ]
  });

МАРШРУТ КОНФИГ

angular.
  module('myApp').
   config(['$locationProvider', '$routeProvider',
   function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');

      $routeProvider.
    when('/projects', {
      template: '<project-list></project-list>'
    }).
    when('/projects/:id', {
      template: '<project-detail></project-detail>'
    }).
    when('/projects/edit/:id', {
        template: '<edit-project></edit-project>'
      }).
    when('/projects/new', {
        template: '<edit-project></edit-project>'
    }).  
    otherwise('/projects');
}
 ]);

Answer 1

1. Быстрое исправление

Простое решение будет использовать условную проверку, если $routeParams.id Параметр определен, если это так, то ему нужен запрос для подачи информации о проекте, в противном случае нет.

if($routeParams.id){
    $http.get('rest/projects/' + $routeParams.id ).then(function(response) {
        console.log(JSON.stringify(response.data));
        self.project = response.data;
    });
}

2. Компонентный маршрутизатор

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

.component('app', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [
    {path: '/projects', name: 'Projects', component: 'projectList', useAsDefault: true},
    {path: '/projects/:id', name: 'Project Detail', component: 'projectDetail' },
    {path: '/projects/edit/:id', name: 'Edit Project', component: 'editProject' },
    {path: '/projects/new', name: 'New Project', component: 'newProject' }
  ]
});

Затем вы можете создать компонент редактора проекта и повторно использовать его как на странице редактирования, так и на странице нового проекта, просто добавив <project-editor-form project="{}" on-save="$ctrl.mySave()"></project-editor-form>, Например:

.component('projectEditorForm', {
    template:
      'Project Name: <input type="text" ng-model="$ctrl.project.name">' +
      '<button ng-click="$ctrl.onSaveProject($ctrl.project)">Save</button>',
    bindings: {
        project: '<',
        onSave: '&'
    },
    controller: function () {
        var $ctrl = this;
        $ctrl.onSaveProject = function (project) {
            // general save logic goes here
            // if you want to reuse this too
            // then emit the on save for onSave binding
            $ctrl.onSave($ctrl.project);
        }
    },
  })

.component('editProject', {
    template:
      '<project-editor-form project="$ctrl.project" on-save="$ctrl.mySave()">' + 
      '</project-editor-form>',
    bindings: {
        project: '<',
        onSave: '&'
    },
    controller: function ($http) {
        var $ctrl = this;

        // consider using a Service to do such task
        // instead of request directly from the controller
        $http.get('rest/projects/' + $routeParams.id).then(function(response) {
            $ctrl.project = response.data;
        });

        $ctrl.mySave = function (project) {
            // save logic here
        }
    },
  })

3. ngRoute с решимостью

Другой подход, который не зависит от ngComponentRoute, это использовать свойство разрешения маршрута, это очень полезно при использовании компонента в качестве шаблона маршрута. Вы добавляете свойство разрешения в свой маршрут, которым будет проект, и привязываете к компоненту формы.

$routeProvider
  .when('/projects/edit/:id', {
    template: '<project-editor-form project="$resolve.project"></project-editor-form>',
    resolve: {
      project: function ($route, $q) {
        var id = $route.current.params.id;
        // again, consider using a service instead
        return $http.get('rest/projects/' + id).then(function (response) {
          return response.data;
        });
      }
    }
  })
  .when('/projects/new', {
    template: '<project-editor-form project="$resolve.project"></project-editor-form>',
    resolve: {
      project: {
        id: 0,
        name: ''
      }
    }
  })