troubleshooting Question

Laravel+AngularJS project

Avatar of eugene007
eugene007 asked on
Angular* laraval
26 Comments2 Solutions262 ViewsLast Modified:
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

In my public folder I have a file known as index.php

<!DOCTYPE html>
<html lang="en" ng-app="myApp">  
        <meta charset="UTF8">
        <title>My First App</title>
        <!-- Add the usual things here -->

        <div id="maincontent">
            <div id="view" ng-view></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>


Open in new window

In my js folder I have a file known as myApp.js

var app = angular.module("myApp", ['ngRoute']);


    .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";
            case 'edit':
                $scope.form_title = "Employee Detail";
                $ = id;
                $http.get(API_URL + 'employees/' + id)
                        .success(function(response) {
                            $scope.employee = response;

    //save new record / update existing record
    $ = 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;

            method: 'POST',
            url: url,
            data: $.param($scope.employee),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(response) {
        }).error(function(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) {
                method: 'DELETE',
                url: API_URL + 'employees/' + id
                    success(function(data) {
                    error(function(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>
       Welcome to my website people

Open in new window

Your help is kindly appreciated.
Join our community to see this answer!
Unlock 2 Answers and 26 Comments.
Start Free Trial
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 2 Answers 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.

-Mike Kapnisakis, Warner Bros