Angularjs 1.5 - CRUD页面和组件

Angularjs 1.5 - CRUD pages and Components

本文关键字：组件 CRUD Angularjs      更新时间：2023-09-26

我正在做一个小的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');
}
 ]);

快速修复h1> 单的解决方案是使用条件检查，如果定义了$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。组件路由器h1> 管前面的解决方案看起来简单而实用，但它可能不是最好的。一个合适的解决方案是为每条路由使用一个单独的组件，但你可以重用它的表单部分。此外，假设你正在构建一个完全基于组件的应用程序，你应该使用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: ''
      }
    }
  })
相关文章：