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.
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.
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.
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
it appears as
The template doesn't get rendered in ng-view.
I solved it. Thank you.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.