Avatar of eugene007
eugene007

asked on 

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

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

Avatar of undefined
Last Comment
eugene007
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Are there any errors in the console (F12)?
Avatar of eugene007
eugene007

ASKER

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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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
Avatar of eugene007
eugene007

ASKER

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)
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of eugene007
eugene007

ASKER

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.
Avatar of eugene007
eugene007

ASKER

I have uploaded the latest code with changes on git

angulara
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

What am I looking at on GIT? Please check link.
Avatar of eugene007
eugene007

ASKER

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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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
Avatar of eugene007
eugene007

ASKER

I am using Google chrome version 56
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

And if you use another browser?
Avatar of eugene007
eugene007

ASKER

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

http://localhost:8000/test.php#!/index.php#%2FEmployee
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Copied your code to my local server - changed paths only - works perfectly.
Avatar of eugene007
eugene007

ASKER

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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

What version of Angular are you on?
Avatar of eugene007
eugene007

ASKER

AngularJS v1.6.3
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Ok that makes a difference. I will need to take a look at why 1.6 is handling this differently from 1.5
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of eugene007
eugene007

ASKER

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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?
Avatar of eugene007
eugene007

ASKER

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
Avatar of eugene007
eugene007

ASKER

Attached is the  "RangeError: Maximum call stack size exceeded angular.js" looping.
call_stack.png
SOLUTION
Avatar of eugene007
eugene007

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of eugene007
eugene007

ASKER

Review.
Avatar of eugene007
eugene007

ASKER

As answered.
Angular
Angular

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

1K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo