asked on 3/18/2017

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

Last Comment