Angularjs 1.5 - CRUD頁面和組件

Question

我在一個小的Angularjs 1.5項目中工作，我很新。

我必須創建一個對象或編輯一個現有的對象，並且模板是相同的，邏輯唯一的區別是在更新的情況下調用http服務進行數據檢索。 我使用ngRoute。 如何才能在兩種操作中使用相同的組件？

EDIT

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; 
      }); 


     } 
    ] 
    }); 

ROUTE CONFIG

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.組件路由器

即使以前的解決方案看起來簡單而實用，它可能不是最好的。 propper解決方案是爲每個路由使用一個單獨的組件，但您可以重新使用它的表單部分。另外，假設你正在構建一個完整的基於組件的應用程序，你應該使用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 deppend，是使用路線resolve屬性，它使用組件作爲路由模板時是非常有用的。您添加一個解析屬性到您的路線，這將是項目，並綁定到您的表單組件。

$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: '' 
     } 
    } 
    })