Angular js retreiving and displaying data from backend to front end - angularjs

Question

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

Answer 1

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.

Answer 2

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