CODEWITHSUNDEEP
angularjs
Sami
Sami

Reputation: 1051

Angular js retreiving and displaying data from backend to front end

I am working on app where I have 2 subdirectories inside public namely admin and core. admin is for admin users where we need to login and add,Edit,delete posts while in core we have pages which a public user or visitors can see. Now what I want is that I have a CRUD functionality implement in admin. I have controller, routes and services. but what I don't know is that how can I display the data in core views for public users I needs steps to to re-use some of the code from admin and retrieve and display data in core views.

Here is a link to the directory structure: http://take.ms/LdaWk

Upvotes: 0

Views: 492

Answers (2)

Ramin Farajpour
Ramin Farajpour

Reputation: 417

You can implement a component base structure, something like:

Components
            TestComponent
                      AddTestComoonent
                      EditTestComponent
                      ListTestComponent

That each component has own module and router. and whenever you want you can just inject the module and use it

Upvotes: 0

mhatch
mhatch

Reputation: 4605

Imagine the following structure...

app
 |- admin
 |- api
 |- core

The api defines your CRUD functions. For example, in Slim PHP something like

$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...

Now in admin, you can call the api in angularjs using $http. For example calling the resource 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();
});

In core you can use the same api to display data. For example calling the resource 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;
  });
});

Obviously, this is a rough outline. You would need to fill out the code, but it displays the principle.

Upvotes: 1

Related Questions