Angular js从后端到前端检索和显示数据

Question

我正在开发应用程序，其中我在公共内部有2个子目录，即admin和core。 admin适用于需要登录和添加，编辑，删除帖子的admin用户，而在核心中，我们拥有可供公共用户或访问者查看的页面。 现在我想要的是我在admin中有一个CRUD功能实现。 我有管制员，路线和服务。 但是我不知道如何为公共用户在核心视图中显示数据，我需要一些步骤来重新使用admin中的某些代码，并在核心视图中检索和显示数据。

这是目录结构的链接： http : //take.ms/LdaWk

Answer 1

想象以下结构...

app
 |- admin
 |- api
 |- core

该API定义了您的CRUD函数。 例如，在Slim PHP中，类似

$api = new \Slim\Slim();

// audio/video
$api->get('/av', 'getAVs');
$api->get('/av/:id', 'getAV');
$api->post('/add/av', 'addAV');
$api->put('/update/av/:id', 'updateAV');
$api->delete('/delete/av/:id', 'deleteAV');

// define functions that handle http requests above...

现在在admin中，您可以使用$http在angularjs中调用api。 例如，调用资源POST /add/av

var admin = angular.module('adminApp', ['ngRoute']);

admin.controller('addAvCtrl', function($scope, $http, MsgService){
  MsgService.set('');
  // process the form
  $scope.submit = function() {
    $http.post('../api/add/av', $scope.formData)
    .success(function() {
      MsgService.set('Success!');
    });
  };
  $scope.message = MsgService.get();
});

在核心中，您可以使用相同的api来显示数据。 例如，调用资源GET /av/:id

var core= angular.module('coreApp', ['ngRoute']);

core.controller('mediaCtrl', function($scope, $http, $routeParams){
  $http.get('../api/av/' + $routeParams.id)
  .success(function(response) {
    $scope.media_detail = response;
  });
});

显然，这是一个粗略的概述。 您将需要填写代码，但是它显示了原理。

Answer 2

您可以实现组件基础结构，例如：

Components
            TestComponent
                      AddTestComoonent
                      EditTestComponent
                      ListTestComponent

每个组件都有自己的模块和路由器。 而且只要您愿意，就可以注入模块并使用它