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.
no error but when i attempt to access the link
http://localhost:8000/Employee
i see http://localhost:8000/Employee#!/index
which means that the program is routing the request to otherwise.
http://localhost:8000/Employee
i see http://localhost:8000/Employee#!/index
which means that the program is routing the request to otherwise.
Any particular reason you are wrapping your Employee page content in <script> tags?
I also don't see where you have included your controller script.
Routing works but only on a direct URL you don't have a link to get to the Employee page.
You don't define API_URL which you are injecting into your controller.
After making the small changes above it works for me
1. Add controller reference to index.html
2. Remove script tags from Employee file
3. Remove API_URL from injected dependencies of controller.
Working sample here
I also don't see where you have included your controller script.
Routing works but only on a direct URL you don't have a link to get to the Employee page.
You don't define API_URL which you are injecting into your controller.
After making the small changes above it works for me
1. Add controller reference to index.html
2. Remove script tags from Employee file
3. Remove API_URL from injected dependencies of controller.
Working sample here
I renamed index.php to test.php. I included the following line of code in test.php which points to the location of the controller:
Then I modified the code in the EmployeeController.js file as follow
After that the Employee.php file located in templates folder, I removed the script tag.
Realizing that I have not created a link therefore I accessed the resource with the following hyperlink
http://localhost:8000/test.php#/Employee
and the result is
http://localhost:8000/test.php#!/index.php#%2FEmployee
F12 shows no indication of error. Also I am running this app using the command php artisan serve and I see the following error
[Sun Mar 19 20:22:06 2017] ::1:51273 Invalid request (Unexpected EOF)
<script src="assets/js/controllers/EmployeeController.js"></script>
Then I modified the code in the EmployeeController.js file as follow
angular.module("myApp").controller('EmployeeController', function($scope, $http) {
console.log('testing');
});
After that the Employee.php file located in templates folder, I removed the script tag.
Realizing that I have not created a link therefore I accessed the resource with the following hyperlink
http://localhost:8000/test.php#/Employee
and the result is
http://localhost:8000/test.php#!/index.php#%2FEmployee
F12 shows no indication of error. Also I am running this app using the command php artisan serve and I see the following error
[Sun Mar 19 20:22:06 2017] ::1:51273 Invalid request (Unexpected EOF)
If you look at the link I posted earlier - that is a working version of your code base.
Something does not look right with your URL - if you accessed with the http://localhost:8000/test.php#/Employee - the URL should remain unchanged - again refer to the sample.
Something does not look right with your URL - if you accessed with the http://localhost:8000/test.php#/Employee - the URL should remain unchanged - again refer to the sample.
Could it be i'm running my code with php artisan serve. I'll check again. Also i'll push the latest code to git.
If you look at the link I posted earlier - that is a working version of your code base.
The code base. I'll copy and paste the code changes made on the code base.
In my public folder I have a file known as test.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>
<script src="assets/js/controllers/EmployeeController.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
angular.module("myApp").controller('EmployeeController', function($scope, $http) {
//console.log('testing');
});
In my templates folder I have a file name Employee
<div class="col-xs-12">
<h2>About Page</h2>
<p>
Welcome to my website people
</p>
</div>
The directory structure is also found in the code base. I'll screen shot if needed.
This is what I am seeing - see attached.
What browser are you using?
Have you tried a different browser?
According to this link (http://stackoverflow.com/questions/29141240/php-local-server-invalid-request-unexpected-eof) this is a common problem.
ss107.jpg
What browser are you using?
Have you tried a different browser?
According to this link (http://stackoverflow.com/questions/29141240/php-local-server-invalid-request-unexpected-eof) this is a common problem.
ss107.jpg
I tried firefox browser version 51 and the same. The url becomes
http://localhost:8000/test.php#!/index.php#%2FEmployee
http://localhost:8000/test.php#!/index.php#%2FEmployee
Perhaps I have to show via teamviewer :)
I even attempted to move the Employee.php file from templates folder to js folder and then amend the templateUrl attribute of myApp.js file to
templateUrl: 'Employee.php'
however the result is the same.
I even attempted to move the Employee.php file from templates folder to js folder and then amend the templateUrl attribute of myApp.js file to
templateUrl: 'Employee.php'
however the result is the same.
Ok that makes a difference. I will need to take a look at why 1.6 is handling this differently from 1.5
It works by remaining as:
http://localhost:8000/test.php#!/Employee
However I notice the request loops at the controller and the view doesn't get rendered with the template. Attached is a reference.
Apart from that when I view the browser console I see "RangeError: Maximum call stack size exceeded angular.js" looping.
controller.png
http://localhost:8000/test.php#!/Employee
However I notice the request loops at the controller and the view doesn't get rendered with the template. Attached is a reference.
Apart from that when I view the browser console I see "RangeError: Maximum call stack size exceeded angular.js" looping.
controller.png
Where do you see that error - I don't see it in the image you posted - is it in the command window or the console of the browser?
Also not seeing the error here. What if you serve this through a normal http process - do you get the same problem?
Also not seeing the error here. What if you serve this through a normal http process - do you get the same problem?
At chrome developer console window. Now I see something else as attached. Also you may notice at the "My First App" tab there is a rotating circle (loop).
invalid_request.png
invalid_request.png
Thanks for using Experts Exchange.
Please provide your email to receive a sample view!
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.