We help IT Professionals succeed at work.

Laravel+AngularJS project

eugene007
eugene007 asked
on
240 Views
Last Modified: 2017-04-16
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

<!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>  

Open in new window


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'}); 
});

Open in new window


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;
        }
    }*/
});

Open in new window


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>

Open in new window


Your help is kindly appreciated.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Are there any errors in the console (F12)?

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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

Author

Commented:
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:

<script src="assets/js/controllers/EmployeeController.js"></script>

Open in new window


Then I modified the code in the EmployeeController.js file as follow

angular.module("myApp").controller('EmployeeController', function($scope, $http) {
      console.log('testing');
});

Open in new window


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)
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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.

Author

Commented:
I have uploaded the latest code with changes on git

angulara
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
What am I looking at on GIT? Please check link.

Author

Commented:
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>  

Open in new window


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'}); 
});

Open in new window


In my controller folder I have a file name EmployeeController.js

angular.module("myApp").controller('EmployeeController', function($scope, $http) {
      //console.log('testing');
});

Open in new window


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>

Open in new window


The directory structure is also found in the code base. I'll screen shot if needed.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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

Author

Commented:
I am using Google chrome version 56
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
And if you use another browser?

Author

Commented:
I tried firefox browser version 51 and the same. The url becomes

http://localhost:8000/test.php#!/index.php#%2FEmployee
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Copied your code to my local server - changed paths only - works perfectly.

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
What version of Angular are you on?

Author

Commented:
AngularJS v1.6.3
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Ok that makes a difference. I will need to take a look at why 1.6 is handling this differently from 1.5
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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?

Author

Commented:
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

Author

Commented:
Attached is the  "RangeError: Maximum call stack size exceeded angular.js" looping.
call_stack.png
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Review.

Author

Commented:
As answered.
Unlock the solution to this question.
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.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.