troubleshooting Question
Laravel+AngularJS project
I am attempting to create a simple project for the subject matter for learning and discovery purpose however it doesn't seem to work.
It's a single page application using angularjs as the front end framework and my back end is laravel. You may also pull the project from git https://github.com/solomon13000/angulara
In my public folder I have a file known as index.php
In my js folder I have a file known as myApp.js
In my controller folder I have a file name EmployeeController.js
In my templates folder I have a file name Employee
Your help is kindly appreciated.
It's a single page application using angularjs as the front end framework and my back end is laravel. You may also pull the project from git https://github.com/solomon13000/angulara
In my public folder I have a file known as index.php
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF8">
<title>My First App</title>
<!-- Add the usual things here -->
</head>
<body>
<div id="maincontent">
<div id="view" ng-view></div>
</div>
<script src="assets/vendor/angular/angular.min.js"></script>
<script src="assets/vendor/angular-route/angular-route.min.js"></script>
<script src="assets/js/myApp.js"></script>
</body>
</html>
In my js folder I have a file known as myApp.js
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/Employee', {
templateUrl: '../templates/Employee.php',
controller: 'EmployeeController'
});
$routeProvider.otherwise({redirectTo : '/index.php'});
});
In my controller folder I have a file name EmployeeController.js
app.controller('EmployeeController', function($scope, $http, API_URL) {
/*
//retrieve employees listing from API
$http.get(API_URL + "employees")
.success(function(response) {
$scope.employees = response;
});
//show modal form
$scope.toggle = function(modalstate, id) {
$scope.modalstate = modalstate;
switch (modalstate) {
case 'add':
$scope.form_title = "Add New Employee";
break;
case 'edit':
$scope.form_title = "Employee Detail";
$scope.id = id;
$http.get(API_URL + 'employees/' + id)
.success(function(response) {
console.log(response);
$scope.employee = response;
});
break;
default:
break;
}
console.log(id);
$('#myModal').modal('show');
}
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "employees";
//append employee id to the URL if the form is in edit mode
if (modalstate === 'edit'){
url += "/" + id;
}
$http({
method: 'POST',
url: url,
data: $.param($scope.employee),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
location.reload();
}).error(function(response) {
console.log(response);
alert('This is embarassing. An error has occured. Please check the log for details');
});
}
//delete record
$scope.confirmDelete = function(id) {
var isConfirmDelete = confirm('Are you sure you want this record?');
if (isConfirmDelete) {
$http({
method: 'DELETE',
url: API_URL + 'employees/' + id
}).
success(function(data) {
console.log(data);
location.reload();
}).
error(function(data) {
console.log(data);
alert('Unable to delete');
});
} else {
return false;
}
}*/
});
In my templates folder I have a file name Employee
<script type="text/ng-template" id="Employee.php">
<div class="col-xs-12">
<h2>About Page</h2>
<p>
Welcome to my website people
</p>
</div>
</script>
Your help is kindly appreciated.
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 26 Comments.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 26 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.