0

I am attempting to create a simple project for the subject matter for learning and discovery purpose however it doesn't seem to work.

My rest API works well but the integration of AngularJS with Laravel doesn't work. You can pull my mini project from Click Here. Your help is kindly appreciated.

Edited by solomon_13000

2
Contributors
4
Replies
36
Views
5 Months
Discussion Span
Last Post by solomon_13000
0

Also I have placed files under the following directory

1) angulara\resources\views (index.php)
2) angulara\public\app

In the directory angulara\public\assets I created a shortcut (vendor) that points to the folder containing the libraries.

Edited by solomon_13000

0

We cannot help with this level of info. Please don't ask members to download or install any of your files - ask for specific info. Show relevant code.

0

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>

Now when I attempt to access

Click Here

it appears as

Click Here

The template doesn't get rendered in ng-view.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.