1。快速修复

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


        }
  ]
  });

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 param，如果是，那么它需要一个请求来提供项目信息，否则不是。

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 with resolve

另一种不在ngComponentRoute上取消的方法是使用route resolve属性，当使用组件作为路由模板时，它非常有用。您将一个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: ''
      }
    }
  })

Angularjs 1.5 - CRUD页面和组件

1 个答案:

1。快速修复

2。组件路由器

3。 ngRoute with resolve